Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use FlatList in FlatList (React Native)?

Tags:

react-native

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}
        />
    )}
/>
like image 481
SatelBill Avatar asked Jul 01 '26 16:07

SatelBill


1 Answers

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>
like image 175
Waheed Akhtar Avatar answered Jul 05 '26 06:07

Waheed Akhtar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!