How to change the background of List.Accordion

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 * as React from ‘react’%3B import { List } from ‘react-native-paper’%3B const MyComponent %3D () %3D> { const [expanded%2C setExpanded] %3D React.useState(true)%3B const handlePress %3D () %3D> setExpanded(!expanded)%3B return ( <List.Section title%3D"Accordions"> <List.Accordion title%3D"Uncontrolled Accordion" left%3D{props %3D> <List.Icon {...props} icon%3D"folder" %2F>}> <List.Item title%3D"First item" %2F> <List.Item title%3D"Second item" %2F> <%2FList.Accordion> <List.Accordion title%3D"Controlled Accordion" left%3D{props %3D> <List.Icon {...props} icon%3D"folder" %2F>} expanded%3D{expanded} onPress%3D{handlePress}> <List.Item title%3D"First item" %2F> <List.Item title%3D"Second item" %2F> <%2FList.Accordion> <%2FList.Section> )%3B }%3B export default MyComponent%3B&dependencies=react-native-paper But I can’t change the gray color of the screen:

Please help me.

[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>

[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.