React native paper display custom views when List accordian is expanded

Question

Unable to display custom view as list item in react native paper List accordian . I could only figure out that it can be used for text but not for custom components or custom views. Can anyone let me know if this can be done using react native paper or should i move to some other npm package.

Answer 1

You can display custom view like this

<List.Accordion
    title="Accordion"
    left={(props) => <List.Icon {...props} icon="folder" />}>
    
    <TextInput style={{height:100}} placeholder={'enter text...'}/> 
      
</List.Accordion>

Answer 2

You can use custom png icon

 const arrowRight = require('../assets/Img/Icons/arrowRight.png')
 const arrowDown = require('../assets/Img/Icons/arrowDown.png')


<List.AccordionGroup>
    <List.Accordion
        right={(props) => <Image style={styles.accordIcon} source={props.isExpanded ? arrowDown : arrowRight} />}
                        title={quickLinks.title}
                        id={quickLinks.id}
                    >
        <View style={styles.quickLinkTextWrap}>
            <Text>{quickLinks.description}</Text>
        </View>
    </List.Accordion>
</List.AccordionGroup>

accordIcon: {
  width: 12,
  height: 12,
  resizeMode: 'contain',
  tintColor: "#000"
},