title: React Native TypeError: undefined is not an object (evaluating '_ref.item')
body: <p>I'm trying to do an Instagram clone, but when using a FlatList I'm getting this error:</p>
  
  <p>Error: TypeError: undefined is not an object (evaluating '_ref.item')</p>
  
  <p>I followed this <a href="https://www.youtube.com/watch?v=o7eB8wG20iw&amp;t=8586s" rel="nofollow noreferrer">tutorial</a> on youtube and my code is basically the same to the one on the video, I believe that probably the docs have changed due to the video was uploaded 1 year ago.</p>
  
  <p><a href="https://i.stack.imgur.com/Up4Qz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Up4Qz.png" alt="enter image description here"></a></p>
  
  <p>Using React Native Cli &amp; android studio</p>
  
  <pre><code>import React, {Component} from "react";
  import {FlatList} from "react-native";
  import Post from "../presentation";
  
  class PostFeed extends Component{
  
    _renderPost({ item }) {
      return &lt;Post /&gt;;
    }
  
    _returnKey(item) {
      return item.toString();
    }
  
    render() {
      return (
        &lt;FlatList
        data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
        keyExtractor={this._returnKey}
        renderItem={this._renderPost()}
      /&gt;
      );
    }
  }
  
  export default PostFeed;
  </code></pre>
  
  <p>Here's the InstaClone.js</p>
  
  <pre><code>import React, {Component} from "react";
  import { View, Text, StyleSheet, Image, Dimensions, TouchableOpacity } from "react-native";
  import config from "./config";
  import { PostFeed } from './components/container';
  
  class InstaClone extends Component {
    render() {
      return (
        &lt;View style={{ flex: 1, width: 100+"%", height: 100+"%"}}&gt;
            &lt;View style={styles.tempNav}&gt;
                  &lt;Text&gt;Instagram&lt;/Text&gt;
            &lt;/View&gt;
            &lt;PostFeed/&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export default InstaClone;
  
  const styles = StyleSheet.create({
      tempNav: {
        width:100+"%",
        height: 56,
        backgroundColor:"rgb(250,250,250)",
        borderBottomColor:"rgb(233,233,233)",
        borderBottomWidth: StyleSheet.hairlineWidth,
        justifyContent: "center",
        alignItems: "center"
      },
      userBar: {
        width:100+"%",
        height: config.styleConstants.rowHeight,
        backgroundColor: "#fff",
        flexDirection: "row",
        paddingHorizontal: 10,
        justifyContent: "space-between"
  
      },
      userPic: {
        height:40,
        width:40,
        borderRadius:20
      },
  
      iconBar: {
        height: config.styleConstants.rowHeight,
        width: 100 + "%",
        borderColor:"rgb(233,233,233)",
        borderTopWidth: StyleSheet.hairlineWidth,
        borderBottomWidth: StyleSheet.hairlineWidth,
        flexDirection: "row"
      },
      icon: {
        marginHorizontal: 5
      },
  
  })
  </code></pre>