title: How to navigate to detail page using Flatlist
body: <p>I'm building an app using react-native (expo) firebase and flamelink as cms and I need to create a project list with some landing pages on project.I used flatlist to render my list of project but now I need to navigate from a project card to a detail page. What am I doing wrong ?</p>
  
  <pre><code>import React from 'react';
  import {
      Image,
      Platform,
      ScrollView,
      StyleSheet,
      Text,
      TouchableOpacity,
      View,
      TextInput,
      FlatList,
      Button,
      Alert,
      CameraRoll,
      TouchableHighlight,
  } from 'react-native';
  import {
      widthPercentageToDP as wp,
      heightPercentageToDP as hp
  } from 'react-native-responsive-screen';
  import * as firebase from 'firebase';
  import {NavigationAction,StackNavigator, withNavigation} from 'react-navigation';
  
  
  class secondScreen extends React.Component {
  
      static navigationOptions = {
          tabBarLabel:'Axian et les ODDD'
      }
  
      state = {
          item:[]
      }
  
  
      componentDidMount() {
          firebase.database().ref('databaseRefFitHere').once("value", snapshot =&gt; {
              const item = [];
              snapshot.forEach(function (childSnapshot) {
                  var data = childSnapshot.val();
                  item.push(data);
              });
              this.setState({
                  item
              });
          });
      }
  
  
  renderRow ({ item }) {
  
      return (
        &lt;TouchableHighlight style={styles.container}  onPress={()=&gt; {this.props.navigation.navigate("Details")}}&gt;
        &lt;View&gt;
         &lt;Image
              style={{width:wp('90%'), height: 150}}
                          source= {{uri:item.imgUrl}}
                      /&gt;
          &lt;Text style={styles.title}&gt;{item.title}&lt;/Text&gt;
          &lt;Text style={styles.sum}&gt;{item.summary}&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
      );
  }
  
  
      render(){
          return(
              &lt;View style={{
                  flex:1,
                  justifyContent:'center',
                  alignItems:'center',
                  backgroundColor: '#C80F2D'
  
              }}&gt;
              &lt;FlatList
                  data={this.state.item}
                  renderItem={this.renderRow}
                  keyExtractor={item =&gt; item.title}
              /&gt;
              &lt;/View&gt;
          )
      }
  
  
  }
  export default withNavigation(secondScreen);
  
  const styles = StyleSheet.create({
  
      container: {
          flexDirection: 'column',
          marginVertical: 20,
          marginHorizontal: wp('5%'),
          backgroundColor:'#FFF',
          width:wp('90%'),
          shadowColor: "#000",
              shadowOffset: {
                  width: 0,
                  height: 2,
              },
              shadowOpacity: 0.25,
              shadowRadius: 3.84,
  
              elevation: 5,
  
      },
      title:{
          fontFamily: 'circular-bold',
          fontSize: 20,
          marginHorizontal: 10,
          marginTop:10,
          color: '#000',
      },
      sum:{
          fontFamily: 'circular-mono',
          fontSize:14,
          color: '#000',
          margin:10,
      }
  
  });
  </code></pre>
  
  <p>I've got the classic undefined is not an object (evaluating 'this3.props.navigation') as an response.</p>