Why am I getting an error that route is undefined in my React Native Navigator component? I thought I was pushing the correct information but I guess not? Any help would be appreciated. I'm used to working with the web so React Native is quite the shift.
So...
I want to navigate from my SplashContainer component to my SignUpForm component. So in SplashContainer I do this...
class SplashContainer extends Component {
handleLoginFinished = () => {
this.props.dispatch(handleAuthWithFirebase())
}
handleToSignUp = () => {
this.props.navigator.push({
signUpForm: true
});
}
handleToSignIn = () => {
this.props.navigator.push({
signIn: true
})
}
render () {
return (
<Splash onLoginFinished={this.handleLoginFinished} goToSignUp={this.handleToSignUp} goToSignIn={this.handleToSignIn} />
)
}
}
export default connect()(SplashContainer)
Then in the React Native Navigator I do this...
export default class NimbusNavigator extends Component {
static propTypes = {
isAuthed: PropTypes.bool.isRequired
}
renderScene = (route, navigator) => {
// Keeps track of whether user is Authed or not.
if (this.props.isAuthed === false) {
return <SplashContainer navigator={navigator}/>
} else if (route.signUpForm === true) {
return <SignUpForm navigator={navigator}/>
}
return <FooterTabsContainer navigator={navigator} />
}
configureScene = (route) => {
}
render () {
return (
<Navigator
configureScene={this.configureScene}
renderScene={this.renderScene}
/>
)
}
}
The route is undefined at start because you didn't give the Navigator any initial routes. You want to set either of the props initialRoute or initialRouteStack.
Assuming you want to start at a route with the name HOME, here's an example where the route { name: 'HOME' } is defined inline:
render () {
return (
<Navigator
initialRoute={{ name: 'HOME' }}
configureScene={this.configureScene}
renderScene={this.renderScene}
/>
)
}
Normally the navigation is set up like this:
handleToSignUp = () => {
this.props.navigator.push({
name: 'signUpForm'
});
}
//
renderScene = (route, navigator) => {
// Keeps track of whether user is Authed or not.
if (this.props.isAuthed === false) {
return <SplashContainer navigator={navigator}/>
} else if (route.name === 'signUpForm') {
return <SignUpForm navigator={navigator}/>
}
return <FooterTabsContainer navigator={navigator} />
}