Can I use FlatList in FlatList (React Native)?

Question

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}
        />
    )}
/>

Answer 1

I found the solution and it worked perfectly for me.

<FlatList
  data={data ? data : []}
  renderItem={({ outerItem }) => (
    <View>
      <FlatList
        data={outerItem["data"] ? outerItem["data"] : []}
        renderItem={({ innerItem }) => (
          <TouchableOpacity onPress={() => {
            navigation.navigate("Home", {
              artist_id: innerItem["artistID"]
            })
          }}>
            <View>
              <Text>Inner FlatList</Text>
            </View>
          </TouchableOpacity>
        )}
        keyExtractor={(innerItem) => innerItem.id}
      />
    </View>
  )}
/>

Answer 2

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>