Is there a way to put JSX tags around renderItem? (I want to put the rendered output from renderItem inside an Accordion drop-down using <List.Accordion> from "react-native-paper")
<List.Accordion>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</List.Accordion>
This works; however as I am using a ListHeaderComponent and ListFooterComponent props; I only want the <List.Accordion> around the renderItem; so that the content of renderItem are inside an accordion (as a container) but not around the header and footer.
Note: I am using SectionList, but I made the first example FlatList to simplify
I tried the following which works; except for it not rendering inside a <List.Accordion></List.Accordion>:
const AudioTracksScreenData = [
{
title: "Reviews",
renderItem: renderReviews,
data: audiobookReviewData.result,
keyExtractor: reviewsKeyExtractor,
},
]
<SectionList
sections={AudioTracksScreenData}
keyExtractor={({ section: { keyExtractor } }) => {
keyExtractor;
}}
renderItem={({ section: { renderItem } }) => (
<List.Accordion>{renderItem}</List.Accordion>
)}
ListHeaderComponent={getHeader()}
/>
- https://reactnative.dev/docs/flatlist
- https://reactnative.dev/docs/sectionlist
- https://callstack.github.io/react-native-paper/list-accordion.html
I could get this to work using <ScrollView> and .map() ; However I am hoping there is a way to do this with <SectionList>.
What I want... (a collapsible list if you press/click on reviews; ignore styling differences)
