Как перейти на страницу сведений с помощью Flatlist

Я создаю приложение, используя реагирующую (выставку) firebase и пламенную ссылку в качестве cms, и мне нужно создать список проектов с некоторыми целевыми страницами в проекте. Я использовал плоский список для отображения моего списка проектов, но теперь мне нужно перейти из карточку проекта на страницу сведений. Что я делаю неправильно ?

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 => {
            const item = [];
            snapshot.forEach(function (childSnapshot) {
                var data = childSnapshot.val();
                item.push(data);
            });
            this.setState({
                item
            });
        });
    }


renderRow ({ item }) {

    return (
      <TouchableHighlight style = {styles.container}  onPress = {()=> {this.props.navigation.navigate("Details")}}>
      <View>
       <Image
            style = {{width:wp('90%'), height: 150}}
                        source= {{uri:item.imgUrl}}
                    />
        <Text style = {styles.title}>{item.title}</Text>
        <Text style = {styles.sum}>{item.summary}</Text>
        </View>
      </TouchableHighlight>
    );
}


    render(){
        return(
            <View style = {{
                flex:1,
                justifyContent:'center',
                alignItems:'center',
                backgroundColor: '#C80F2D'

            }}>
            <FlatList
                data = {this.state.item}
                renderItem = {this.renderRow}
                keyExtractor = {item => item.title}
            />
            </View>
        )
    }


}
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,
    }

});

У меня есть классический undefined is not a object (оценка this3.props.navigation) в качестве ответа.