title: Make a reusable component in react native?
body: <p>I make a reusable component to render a Flatlist and inside I have a TouchableOpacity when pressed it I want to navigate to a specific screen,
  and I pass some params based on items inside FlateList</p>
  
  <p>So when I pressed to navigate i got an error </p>
  
  <blockquote>
    <p>can't read property navigate of undefined</p>
  </blockquote>
  
  <p>here is my code</p>
  
  <pre><code>const OrdersList = props =&gt; {
    return (
      &lt;View style={styles.container}&gt;
        &lt;FlatList
          data={props.data}
          renderItem={({item}) =&gt; {
            return (
              &lt;TouchableOpacity
                onPress={() =&gt;
                  props.navigation.navigate(props.screenName, {
                    ...
                    service: item.service,
                    date: item.date,
                    ...
                  })
                }
               &gt;
                  &lt;Text&gt;
                    {item.service}
                  &lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            );
          }}
        /&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  
  <p><strong>here is how I used it</strong> </p>
  
  <pre><code> &lt;OrdersList
            data={this.state.orders}
            extraData={this.state}
            screenName="OrderHomeDetails"
            // navigate={ // when i do it i got error he can't find item and thats usual 
            //   (this.props.navigation.navigate,
            //   {
            //     service: item.service,
            //     time: item.time,
            //     username: item.username,
            //     buildingNumber: item.buildingNumber,
            //     date: item.date,
            //     description: item.description,
            //     images: item.images,
            //     status: item.status,
            //     snapshotKey: item.snapshotKey,
            //   })
            // }
          /&gt;
  </code></pre>