Undefined is not an object for react navigation - react-native

Question

I have two components for my project, and I have gone through all the steps for react navigation as follow:
// App.js
import React from 'react';
import Main from './app/componenets/Main'
import details from './app/componenets/details'
import { createStackNavigator, createAppContainer } from 'react-navigation'
const mainNavigator = createStackNavigator(
{
MainScreen: Main,
detailsScreen: details,
},
{
initialRouteName :'MainScreen'
}
);
const AppContainer = createAppContainer(mainNavigator);
export default class App extends React.Component{
render() {
return(
<AppContainer />
);
}
}
Then I have my Main.js which I have a method as follow:
import React from 'react';
import {
StyleSheet ,
Text,
View,
} from 'react-native'
import Note from './Note'
import detail from './details'
import { createStackNavigator, createAppContainer } from "react-navigation";
export default class Main extends React.Component {
static navigationOptions = {
title: 'To do list',
headerStyle: {
backgroundColor: '#f4511e',
},
};
constructor(props){
super(props);
this.state = {
noteArray: [],
noteText: ''
}
}
render() {
let notes = this.state.noteArray.map((val,key) => {
return <Note key={key} keyval={key} val={val}
goToDetailPage= {() => this.goToNoteDetail(key)} />
});
const { navigation } = this.props;
return(
<View style={styles.container}>
<View style={styles.footer}>
<TextInput
onChangeText={(noteText) => this.setState({noteText})}
style={styles.textInput}
placeholder='What is your next Task?'
placeholderTextColor='white'
underlineColorAndroid = 'transparent'
>
</TextInput>
</View>
<TouchableOpacity onPress={this.addNote.bind(this)} style={styles.addButton}>
<Text style={styles.addButtonText}> + </Text>
</TouchableOpacity>
</View>
);
}
//This method is declared in my Note.js
goToNoteDetail=(key)=>{
this.props.navigation.navigate('detailsScreen')
}
}
//Styles which I didn't post to be short in code here
But when I try to do the navigation I get this error:
'undefined is not and object(evaluating 'this.props.val.date')
Do I need to pass the props in a way? or should I do anything else? I am new to React native and confused!

Answer 1

in order to access this.props make arrow function or bind the function in constructor.
goToDetail=()=>{
this.props.navigation.navigate('detailsScreen')
}

Answer 2

Just remove createAppContainer
const AppContainer = mainNavigator;
and tell me what react-navigation that you work with