React Native navigation: undefined is not an object - react-native

Question

I try to implement a navigation in React Native with react-navigation according to this tutorial, but I am facing the following error when launching the app:
undefined is not an object (Evaluating 'this.props.navigation.navigate')
render index.android.js:17:12
My index.android.js:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
export default class Abc extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Button
title="Go to List"
onPress={() =>
navigate('Liste')
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
export class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to List"
onPress={() =>
navigate('Profile')
}
/>
);
}
}
export class Liste extends React.Component {
static navigationOptions = {
title: 'Liste',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Liste"
/>
);
}
}
const App = StackNavigator({
Home: { screen: HomeScreen },
Liste: { screen: Liste },
});
AppRegistry.registerComponent('Abc', () => Abc);
Do you have any suggestions? Thank you!

Answer 1

I believe what you wanted to do is to register your App component in your AppRegistry instead of the Abc component.
The reason that you ran into this undefined is not an object (Evaluating 'this.props.navigation.navigate') is because the props.navigation is not available in your Abc component. If you look closely to the bottom of your code,
you have:
const App = StackNavigator({
Home: { screen: HomeScreen },
Liste: { screen: Liste },
});
AppRegistry.registerComponent('Abc', () => Abc);
So you have created a StackNavigator component, but you are not registering this component but instead you are registering the Abc component in the AppRegistry, and since Abc component is not any of the screen under your StackNavigator, it won't have access to the this.props.navigation thus you would run into the exception.

Answer 2

You don't have Profile screen.
If you want to go to Liste screen from HomeScreen use:
onPress={() => navigate('Liste')}
If you want to go to Profile screen then you need to make Profile Screen and add it on StackNavigator, example:
export class Profile extends React.Component {
static navigationOptions = {
title: 'Profile',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Profile"
/>
);
}
}
const App = StackNavigator({
Home: { screen: HomeScreen },
Liste: { screen: Liste },
Profile: {screen: Profile},
});

Answer 3

almost 3 years since the original question was asked. I had the same problem and landed on this page.
react-navigation is v5 now. The problem I had was because 'navigation' was not passing to the child component.
After a bit more research I fixed the problem using this solution from here.
I need to pass the props to child component like this.
<GoToButton navigation={props.navigation} />
https://reactnavigation.org/docs/connecting-navigation-prop
Hopefully this helps to new comers like me.