swescot February 2016

Hide navigator in React Native?

I'm developing my first application in React Native and have run into my first problem. For navigation I'm using a navigator. The problem is that I would like to hide it on the app's login page, but don't know how to do it.

Here is my navigator from index.ios.js:

class testApp extends Component {
    renderScene(route, navigator) {

        switch (route.name) {
            case 'home':
                return (<Home navigator={navigator} />)
            case 'login':
                return (<Login navigator={navigator} />)
        }
    }
    render() {
        return (
            <Navigator
                initialRoute={{name: 'login'}}
                renderScene={this.renderScene}
                configureScene={() => Navigator.SceneConfigs.FloatFromBottomAndroid}

                navigationBar={
                    <Navigator.NavigationBar
                        routeMapper={NavigationBarRouteMapper}
                        style = {styles.navigationBar}
                    />
                }
            />
        );
    }
}

Is there any way to hide the navigator for a certain page?

Answers


dvine multimedia February 2016

Since the idea of a navigation bar is to persist across transitions, I don't think you have access to it from inside the navigator's routing. One solution would be to stack two navigators. One outer navigator for routing between login and main app. This one doesn't have a navigation bar. Main app is itself a navigator that has a navigation bar. Don't forget to provide the inner navigator with the instance of the outer navigator in the aptly name property "navigator".

Full disclosure: I never actually tried this, but it should work like this.


swescot February 2016

So I managed to solve it myself by moving my navigator to its own component with the following class:

class NavigationBar extends Navigator.NavigationBar {
    render() {
            var routes = this.props.navState.routeStack;
        if(routes.length){
            var route = routes[routes.length -1];
        }

        if (!route.display) {
            return null;
        }
        return super.render();

    }
}

In my index I set display as true, except for login where it is set to false:

    route.display = true;

    switch (route.name) {
        case 'home':
            return (<Home navigator={navigator} />)
        case 'login':
            route.display = false;
            return (<Login navigator={navigator} />)
    }

Probably not the best solution since the variable is set to true or false each time a view is rendered. But it works.

Post Status

Asked in February 2016
Viewed 3,082 times
Voted 12
Answered 2 times

Search




Leave an answer