How to change the background of List.Accordion

[Allwithyou999]

This is my code:

<List.Section title="Accordions" style={{ backgroundColor: 'white' }}>
      <List.Accordion
       style={{ backgroundColor: 'white', marginBottom: 20 }}
        title="Uncontrolled Accordion"
        left={props => <List.Icon {...props} icon="folder" />}>
        <List.Item title="First item" />
        <List.Item title="Second item" />
      </List.Accordion>

      <List.Accordion
      style={{ backgroundColor: 'white', marginBottom: 20 }}
        title="Controlled Accordion"
        left={props => <List.Icon {...props} icon="folder" />}
        expanded={expanded}
        onPress={handlePress}>
        <List.Item title="First item" />
        <List.Item title="Second item" />
      </List.Accordion>
    </List.Section>

https://snack.expo.dev/@allwithyou999/14e46c?name=List.Accordion&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Flist-accordion.html&code=import%20*%20as%20React%20from%20%27react%27%3B%0Aimport%20%7B%20List%20%7D%20from%20%27react-native-paper%27%3B%0A%0Aconst%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Bexpanded%2C%20setExpanded%5D%20%3D%20React.useState(true)%3B%0A%0A%20%20const%20handlePress%20%3D%20()%20%3D%3E%20setExpanded(!expanded)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CList.Section%20title%3D%22Accordions%22%3E%0A%20%20%20%20%20%20%3CList.Accordion%0A%20%20%20%20%20%20%20%20title%3D%22Uncontrolled%20Accordion%22%0A%20%20%20%20%20%20%20%20left%3D%7Bprops%20%3D%3E%20%3CList.Icon%20%7B...props%7D%20icon%3D%22folder%22%20%2F%3E%7D%3E%0A%20%20%20%20%20%20%20%20%3CList.Item%20title%3D%22First%20item%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CList.Item%20title%3D%22Second%20item%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2FList.Accordion%3E%0A%0A%20%20%20%20%20%20%3CList.Accordion%0A%20%20%20%20%20%20%20%20title%3D%22Controlled%20Accordion%22%0A%20%20%20%20%20%20%20%20left%3D%7Bprops%20%3D%3E%20%3CList.Icon%20%7B...props%7D%20icon%3D%22folder%22%20%2F%3E%7D%0A%20%20%20%20%20%20%20%20expanded%3D%7Bexpanded%7D%0A%20%20%20%20%20%20%20%20onPress%3D%7BhandlePress%7D%3E%0A%20%20%20%20%20%20%20%20%3CList.Item%20title%3D%22First%20item%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CList.Item%20title%3D%22Second%20item%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2FList.Accordion%3E%0A%20%20%20%20%3C%2FList.Section%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper
But I can't change the gray color of the screen:

Please help me.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[lukewalczak]

You can achieve it by passing a theme prop into List.Accordion with customized background color, in the following way:

<List.Accordion
    theme={{colors: {background: 'orange'}}}
    style={{ backgroundColor: 'white', marginBottom: 20 }}
    title="Uncontrolled Accordion"
    left={(props) => <List.Icon {...props} icon="folder" />}>
        <List.Item title="First item" />
        <List.Item title="Second item" />
</List.Accordion>

[Allwithyou999]

Thank you @lukewalczak. That works!!

[shizuo-x]

can someone tell me how to remove the annoying blue color when the list is active?

[shizuo-x]

I advice to use a spacer to space the lists, for OP and not to use the margin because it will push down the drop down options too.