Unable to use StackNavigator in ReactNative - reactjs

Question

I'm trying to create a simple navigation in the following page:
Page1:
import React, { Component } from 'react';
import { Text, View, TouchableOpacity, Alert } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { connect } from 'react-redux';
var styles = require('./styles');
class Page1 extends Component {
static navigationOptions = {
header: null
};
componentDidMount() { // <== Edited
setTimeout(function() {
const { navigate } = this.props.navigation;
},4000);
}
render() {
const { navigate } = this.props.navigation; // <= Getting error here
const { fname, lname } = this.props.person;
return (
<View style={styles.container}>
<Text style={styles.welcome}>
From Page 1 - {lname} { fname}
</Text>
<TouchableOpacity
// onPress={() => this.props.navigation.navigate('Page2', { user: 'Lucy' }) }
>
<Text style={styles.welcome}> click for Page 2</Text>
</TouchableOpacity>
</View>
);
}
}
function mapStateToProps(state) {
return {
person:state.person
}
}
export default connect(mapStateToProps) (Page1);
Page 3:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Page1 from './Page1'
import { Provider, connect } from 'react-redux'
import configureStore from './store'
const store = configureStore()
export default class Page3 extends Component {
render() {
return (
<Provider store={store}>
<Page1 />
</Provider>
);
}
}
And in the index page I'm importing Page1, Page2 and Page3 and :
const SimpleApp = StackNavigator({
Page1: { screen: Page1 },
Page2: { screen: Page2 },
Page3: { screen: Page3 },
});
AppRegistry.registerComponent('my03', () => SimpleApp);
The app works fine unless I comment const { navigate } = this.props.navigation;. I get the following error:
Undefined is not an object (evaluating 'this.props.navigation.navigate')
I also tried:
onPress={() => this.props.navigation.navigate('Page2', { user: 'Lucy' }) } and
onPress={() => navigation.navigate('Page2', { user: 'Lucy' }) }
Not really sure why I tried it but was going to figure it out if it worked. It did not.
I'm trying to use ReactNavigation without creating the reducer for it, cause I did not understand this part even after trying for 2 days.
Why is this failing here? Please help.
Many thanks.
UPDATE1
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Page1 from './src/components/Page1'
import Page2 from './src/components/Page2'
import Page3 from './src/components/Page3'
const SimpleApp = StackNavigator({
Page3: { screen: Page3 },
Page2: { screen: Page2 },
Page1: { screen: Page1 },
});
AppRegistry.registerComponent('my03', () => SimpleApp);

Answer 1

Short answer. Just do this. <Page1 navigation={this.props.navigation} />
Explanation - The reason why this.props.navigation is coming out undefined is that you're essentially using another instance of the Page 1 component inside your Page 3 and not the one that you used to initialize the StackNavigator with. So it's an entirely new Page 1 that is not coupled with the StackNavigator at all. If Page 1 would have been the starting component of your StackNavigator. Then this.props.navigation would not have been undefined which brings me to another point of interest.
Why would you ever nest Page 1 inside Page 3 but want the same page as a sibling to Page 3 inside your react navigation stack? The idea is to add components inside our StackNavigator as screens without nesting them together and we move from one screen to another using this.props.navigation.navigate inside any one of them. So, therefore, our Page 3 would have our navigation prop (since I'm assuming it gets loaded first through the StackNavigator directly) we just pass that prop to our nested Page 1 component and viola! You would now have access to this.props.navigation inside your Page 1.
Also, since your Page 3 has the <Provider > tag I'm assuming it's something more of a root. In that case, you're better off using <SimpleApp > in place of <Page1 > and keeping Page 1 as the starting point of your Stack. You can then register your root component as AppRegistry.registerComponent('my03', () => Page3);
The last piece of info, you can keep your redux state and your navigation completely decoupled from each other so use redux integration only when you're absolutely sure that you need your navigation state inside your redux store. A project which has both Redux and ReactNavigation doesn't mean that you have to integrate them both. They can be completely separate.
Phew! Hope it helps! :)