title: Displaying FlatList using array of objects (React Native)
body: <p>I have a prop where</p>
  
  <pre><code>console.log(this.props.userList);
  </code></pre>
  
  <p>returns</p>
  
  <pre><code>Array [
    Object {
      "userData": Object {
        "userName": "David",
        "userAge": 20,
      },
      "id": "ax3",
    },
    Object {
      "userData": Object {
        "userName": "Phillip",
        "userAge": 27,
      },
      "id": "xq4",
    },
    Object {
      "userData": Object {
        "userName": "Kelly",
        "userAge": 28,
      },
      "id": "pj7"
    }
  ]
  </code></pre>
  
  <p>I am trying to generate a Flatlist from that data by writing:</p>
  
  <pre><code>&lt;FlatList
    data={this.props.userList}
    keyExtractor={item =&gt; item.id}
    renderItem={({ item }) =&gt;
      &lt;Text&gt;{item.userData.userName}&lt;/Text&gt;
    }
  /&gt;
  </code></pre>
  
  <p>When testing through Expo on my iphone, the app just freezes. Doesn't throw any errors or anything. Is this method incorrect?</p>
  
  <p>*Adding in full render below</p>
  
  <pre><code>  render() {
      return (
          &lt;TouchableWithoutFeedback onPress={Keyboard.dismiss}&gt;
              &lt;View style={styles.mainViewStyle}&gt;
                  &lt;View style={styles.searchBarViewStyle}&gt;
                      &lt;TextInput
                          style={styles.textInputStyle}
                          placeholder="User"
                          autoCorrect={false}
                          autoCapitalize="none"
                          onChangeText={this.onUserChanged.bind(this)}
                          value={this.props.userInput}
                      /&gt;
                  &lt;/View&gt;
                  &lt;View&gt;
                      &lt;Button
                          title="press this"
                          onPress={() =&gt;
                              this.props.navigation.navigate("yearSearch")
                          }
                      /&gt;
                  &lt;/View&gt;
                  &lt;View&gt;
                      &lt;Button
                          title="testUserSearch"
                          onPress={() =&gt; this.showData()}
                      /&gt;
                  &lt;/View&gt;
                  &lt;View&gt;
                      &lt;FlatList
                          data={this.props.userList}
                          keyExtractor={item =&gt; item.id}
                          renderItem={({ item }) =&gt; (
                              &lt;Text&gt;{item.userData.userName}&lt;/Text&gt;
                          )}
                      /&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          &lt;/TouchableWithoutFeedback&gt;
      );
  }
  </code></pre>
  
  <p>If I take out the Flatlist part of it, it runs fine. The showData() function currently just console logs this.props.userList, which returns the array post in the beginning.</p>