Cannot read property 'navigation' of undefined - react-native

Question

I'm trying to navigate with NavigationActions, but for some reason it won't navigate.
I'm trying to move from LoginScreen to HomeScreen.
loginscreen:
constructor(props){
super(props)
this.state = {
email: '',
password: '',
status: '',
}
this.handlePress = this.handlePress.bind(this)
}
handlePress(){
firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
//Success, move to homepage.
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Home'})
]
})
this.props.navigation.dispatch(resetAction) <-- SAYS NAVIGATION IS UNDEFINED
}).catch(function(error){
//Failed to log in, print error.
console.log(error)
});
}
this is where I call handlePress:
<TouchableOpacity style={styles.logBtn} onPress={()=>this.handlePress()}>
<Text style={styles.logTxt}>
Login
</Text>
</TouchableOpacity>
This is 'navigation'(in render method, loginscreen):
const { navigation } = this.props.navigation;
this is app.js where I set the navigation:
import React from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import LoginScreen from './app/screens/LoginScreen';
import RegisterScreen from './app/screens/RegisterScreen';
import HomeScreen from './app/screens/HomeScreen';
import FriendsScreen from './app/screens/FriendsScreen';
const Stylelist = StackNavigator({
Login:{
screen: LoginScreen,
navigationOptions: ({navigation}) =>({
header: null,
}),
},
Register:{
screen: RegisterScreen,
navigationOptions: ({navigation}) =>({
header: null,
}),
},
Home:{
screen: TabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
title: 'Home',
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
size={26}
style={{ color: tintColor }}
/>
)
}),
},
Friends: {
screen: FriendsScreen,
navigationOptions: ({ navigation }) => ({
title: 'Friends',
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons
name={focused ? 'ios-people' : 'ios-people-outline'}
size={26}
style={{ color: tintColor }}
/>
)
}),
},
}),
navigationOptions: ({ navigation }) => ({
title: 'Home',
headerStyle: {backgroundColor: "#553A91"},
headerTitleStyle: {color: "#FFFFFF"},
}),
}
});
export default Stylelist;
I tried to log the error from the 'catch' and I get this error:
Cannot read property 'navigation' of undefined
How can I fix it?

Answer 1

It should be
const { navigate} = this.props.navigation;
or
const { navigation } = this.props;
Actually, what you get in props is navigation object, which has navigate method in it.And what you were doing was
const { navigation } = this.props.navigation;
This gets evaluates to
this.props.navigation.navigation
It says look for navigation property inside navigation object, which actually is not present, hence giving undefined. I hope this clears your doubt.

Answer 2

I had this problem too.
Of course I had used setTimeout. There may be someone who has this problem, so it's a good reminder.
only use let that = this;
componentDidMount() {
let that = this ;
setTimeout(function () {
let toHome = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({routeName: 'MainScreen'})]
});
that.props.navigation.dispatch(toHome);
},3000);
}

Answer 3

Make sure your function is bind with this.
onPress={()=>this.handlePress()}
instead
onPress={()=>this.handlePress.bind(this)}