React Native Navigation from Child Components - reactjs

Question

I'm trying to implement a simple navigation between screens, but getting this error:
Undefined is not an object 'this.props.navigate'
AppNavigator.js
let AppNavigator = createStackNavigator({
Signup:
{ screen: SignupScreen,
navigationOptions: {
header: null
}
},
Login: { screen: LoginScreen,
navigationOptions: {
header: null
}
},
},{
initialRouteName: "Signup"
});
SignupScreen.js
<View>
<SignupForm/>
</View>
SignupForm.js
const { navigate } = this.props.navigation;
<Text onPress={() =>
navigate('Login')
}>
¿Allready have an account? Sign in
</Text>
I guess the problem is that there si something additional to do in child components cases. Please help.

Answer 1

You should pass navigation to SignupForm. Choose 1 of 2 solution below
1.
<View>
<SignupForm navigation={this.props.navigation} />
</View>
or
in SignupForm.js
import { withNavigation } from 'react-navigation';
export default withNavigation(SignupForm);

Answer 2

You must use withNavigation if you use separate component see the documentation about withNavigation : here

Answer 3

You might have missed wrapping your AppNavigator in a NavigationContainer before using it elsewhere.
in your AppNavigator.js
import { createAppContainer } from 'react-navigation'; // add this
import { createStackNavigator } from 'react-navigation-stack'; // i trust you've already got this
let AppNavigator = createStackNavigator({
Signup:
{ screen: SignupScreen,
navigationOptions: {
header: null
}
},
Login: { screen: LoginScreen,
navigationOptions: {
header: null
}
},
},{
initialRouteName: "Signup"
});
export default createAppContainer(AppNavigator); // this is important!
I actually don't think there's anything special you need to do for child components to work. That AppContainer is for ensuring correct props are passed to child components. Refer to documentation for a bit more context.