React Native Navigator Route Object is Undefined

Question

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}
            />
        )
    }
}

ArneHugo · Accepted Answer · 2017-01-17 07:03:32Z

1

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}
        />
    )
}

answered Jan 17, 2017 at 7:03

ArneHugo

6,5992 gold badges28 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Aft · Accepted Answer · 2017-01-05 23:35:59Z

0

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} />
}

answered Jan 5, 2017 at 23:35

Matt Aft

8,9663 gold badges28 silver badges38 bronze badges

1 Comment

maxwellgover Over a year ago

Route would be undefined either way.

Collectives™ on Stack Overflow

React Native Navigator Route Object is Undefined

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related