Now I want to build a small library app. In this app, I am using FlatList. Then can I use FlatList in a FlatList? So can I get this kind of effect with FlatList? Now I am thinking as follows. Is this possible method? If this method is possible, how to use it? I wish any sample code even very simple.
<FlatList
data={this.state.countryList}
renderItem={({ country }) => (
<FlatList
horizontal
data={this.props.album ? this.props.album.mostDown : []}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => {
this.props.navigation.navigate('StageTwo')
}}>
<View style={styles.borderImageGroup}>
<Image style={styles.borderImage} source={{ uri: item['thumbnailURL'] }} />
</View>
</TouchableOpacity>
)}
keyExtractor={item => item.id}
/>
)}
/>
Yes, You can use it.
Editing: according to your comment I am assuming this will be the data passed down to the FlatList
const FlatListData = [{
country: 'Country Name', // Which will display on bottom
artists: [
{artist_name: 'artistOne_name'},
{artist_name: 'artistTwo_name'},
{artist_name: 'artistThree_name'},
{artist_name: 'artistFour_name'},
]
}]
here is an example.
<View>
<Text>test page</Text>
<FlatList
data={FlatListData}
renderItem={({ item }) => (
<View>
<Text>{item.country}</Text>
<FlatList
data={item.artists}
renderItem={({ item2 }) => (
<View>
<Text>{item2.artist_name}</Text>
</View>
)}
keyExtractor={(item2, index) => index}
/>
</View>
)}
keyExtractor={(item, index) => index}
/>
</View>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With