title: React-Native nested Flatlist
body: <p>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).
  <strong>here is the cooks array:</strong> </p>
  
  <pre><code>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"
              }
          ]
      }
  ]
  </code></pre>
  
  <p>==================================================================</p>
  
  <pre><code>    &lt;FlatList
          data={this.props.cooks}
          renderItem={({ item }) =&gt; (
            &lt;View&gt;
              &lt;TouchableOpacity &gt;
              &lt;CardSection&gt;
                &lt;View style={thumbnailContainerStyle}&gt;
                  &lt;Image
                    style={thumbnailStyle}
                    source={{ uri: item.profilePic }}
                  /&gt;
                  &lt;/View&gt;
                  &lt;View style={headerContentStyle}&gt;
                    &lt;Text style={headerTextStyle}&gt;{item.firstName}&lt;/Text&gt;
                  &lt;/View&gt;
            &lt;/CardSection&gt;
            &lt;/TouchableOpacity&gt;
            {/*
              following part is not working as expected.
            */}
            &lt;FlatList
                data={item.photos}
                renderItem={({ item2 }) =&gt;
                &lt;View&gt;
                  &lt;Image
                    style={imageStyle}
                    source={{ uri: item2.url }}
                  /&gt;
                &lt;/View&gt;
              }
              keyExtractor={(item2, index) =&gt; index}
            /&gt;
            &lt;/View&gt;
          )}
          keyExtractor={(item, index) =&gt; index}
        /&gt;
  </code></pre>
  
  <p>===========================================================</p>
  
  <pre><code>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
    }
  };
  </code></pre>