React-Native nested Flatlist

Question

I'm trying to display profile of cooks with the images this person may have. I have an array of cooks with some information like name and profile picture. Cooks array also contains an array of pictures. I would like to display cook.profile Pic name and then the list of photos linked to their profile. I am able to display name and profile Pics but I am not sure how to display array of pictures under each cook's name(horizontal scroll). here is the cooks array:

cooks = [{
        "id": "1001",
        "firstName": "Mike",
        "profilePic": "Portrait.jpg",
        "photos": [{
                "url": "img.jpg"
            },
            {
                "url": "img2.jpg"
            },
            {
                "url": "img3.jpg"
            },
            {
                "url": "img4.jpg"
            }
        ]
    },
    {
        "id": "1002",
        "firstName": "Marla",
        "profilePic": "profilePic.jpg",
        "photos": [{
                "url": "img1.jpg"
            },
            {
                "url": "img2.jpeg"
            },
            {
                "favorite": "true",
                "url": "img3.jpg"
            },
            {
                "url": "img4.jpeg"
            }
        ]
    }
]

==================================================================

    <FlatList
        data={this.props.cooks}
        renderItem={({ item }) => (
          <View>
            <TouchableOpacity >
            <CardSection>
              <View style={thumbnailContainerStyle}>
                <Image
                  style={thumbnailStyle}
                  source={{ uri: item.profilePic }}
                />
                </View>
                <View style={headerContentStyle}>
                  <Text style={headerTextStyle}>{item.firstName}</Text>
                </View>
          </CardSection>
          </TouchableOpacity>
          {/*
            following part is not working as expected.
          */}
          <FlatList
              data={item.photos}
              renderItem={({ item2 }) =>
              <View>
                <Image
                  style={imageStyle}
                  source={{ uri: item2.url }}
                />
              </View>
            }
            keyExtractor={(item2, index) => index}
          />
          </View>
        )}
        keyExtractor={(item, index) => index}
      />

===========================================================

const styles = {
  iconStyle: {
      paddingLeft: 10,
      justifyContent: 'center',
      alignItems: 'center',
      height: 23,
      width: 25
  },
  containerStyle: {
    flexDirection: 'row',
    flex: 1
  },
  inputStyle: {
    paddingLeft: 10,
    fontSize: 30,
    height: 30,
    width: 350
  },
  headerContentStyle: {
    flexDirection: 'column',
    paddingTop: 20
  },
  headerTextStyle: {
    fontSize: 25
  },
  thumbnailStyle: {
    borderRadius: 15,
    height: 100,
    width: 100
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  imageStyle: {
    height: 400,
    flex: 1,
    width: null
  }
};

Answer 1

You can solve this using wrapping the inner FlatList by horizontal FlatList

<OuterFlatList
  renderItem={() => {
    <FlatList
      horizontal
      renderItem={() => {
        <InnerFlatList />
      }}
    />
  }}
/>

Answer 2

Here is an example that i created in one of my Projects. Take a look it may help you

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: "",
      dummy: [
        {
          _id: "5e12905eb10fe53808d1ca55",
          name: "WHY NAME EXISTS -_-",
          stage: "Confirmed",
          feedback: {
            _id: "5e12905eb10fe53808d1ca56",
            rating: 1,
            review: "bad bad only bad."
          },

          itemDetails: [
            {
              _id: "5e12905eb10fe53808d1ca5a",
              nameXquantity: "Lehsun Adrak x100",
              individualTotal: 155
            },
            {
              _id: "5e12905eb10fe53808d1ca59",
              nameXquantity: "Lehsun x50",
              individualTotal: 25
            },
            {
              _id: "5e12905eb10fe53808d1ca58",
              nameXquantity: "Lehsun Adrak Dhaniya Shimla mirch x Infinity",
              individualTotal: 9969
            }
          ],

          __v: 0
        }
      ]
    };
  }


  render() {
    return (
      <SafeAreaView>
        <ScrollView>
          <FlatList
            data={this.state.dummy}
            renderItem={({ item }) => (
              <View>
                <Text>{item.name}</Text>
                <FlatList
                  data={item.itemDetails}
                  renderItem={({ item }) => <Text>{item.nameXquantity}</Text>}
                  keyExtractor={item => item._id}
                />
              </View>
            )}
            keyExtractor={item => item._id}
          />
        </ScrollView>
      </SafeAreaView>
    );
  }
}

export default Test;

Answer 3

You can implement SectionList from 'react-native' library instead of using an nested FlatList. Its easier and a better solution. You have all the documentation up here. Hope this can help you!