title: FlatList onClick navigate to next screen
body: <p>How do I make a Flatlist navigate to the next screen when a row is clicked inside the Flatlist in react-native?</p>
  
  <p><strong>Edited:</strong> I posted all the codes inside my JS file.</p>
  
  <p>Here is my flatlist code:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {
      StyleSheet,
      Text,
      View,
      FlatList,
      Button,
      TouchableOpacity,
      TouchableHighlight
  } from 'react-native'
  
  const Tasks = (props) =&gt; {
       const { navigate } = props.navigation;
       return (
        &lt;View style={styles.container}&gt;
          &lt;FlatList
            data={[
              {key: 'Task 1'},
              {key: 'Task 2'},
              {key: 'Task 3'},
              {key: 'Task 4'},
              {key: 'Task 5'},
            ]}
            renderItem={({item}) =&gt; &lt;TouchableHighlight onPress={() =&gt; this.goToNextScreen()}&gt;
        &lt;Text style={styles.item}&gt;{item.key}&lt;/Text&gt;}
  &lt;/TouchableHighlight&gt;}
          /&gt;
            &lt;TouchableOpacity style={{ height: 50, marginTop: 5, marginLeft: 100, marginRight: 100 }}&gt;
           &lt;Button
                onPress={()=&gt;navigate('Steps')}
                title="Steps"
                /&gt;  
                &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  
  
  const styles = StyleSheet.create({
    container: {
     flex: 1,
     paddingTop: 22
    },
    item: {
      padding: 10,
      fontSize: 18,
      height: 44,
    },
  })
  
  Tasks.navigationOptions = {
      title: 'Task Order',
  };
  
  export default Tasks
  </code></pre>