CODEWITHSUNDEEP
javascriptreact-native
Chris
Chris

Reputation: 641

Change navigationBar in response to navigation state

I'm writing an application and only want the back button to show when I push new views onto the Navigator (in this case a news article vs. a list of news articles).

It seems like the way to do this would be to modify render() to only include the Back button for certain navigator states. And while the React Native docs suggest components inside the navigator can access it using getContext, this doesn't seem to work for navigatorBar.

Is this the right way to go about it? How would I render the Back button only for certain navigation states?

<Navigator
    initialRoute={{name: 'NewsList', index: 0}}
    renderScene={this.renderScene}
    sceneStyle={styles.navigator}
    navigationBar={
        <View style={styles.navbar}>
            <View style={styles.logo_container}>
                <Text style={styles.backButton}>Back</Text>
                <Image
                    source={require( 'image!Logo' )}
                    style={styles.logo}
                />
            </View>
            <View style={styles.separator} />
        </View>
    }
/>

Upvotes: 1

Views: 6640

Answers (1)

Moss Palmer
Moss Palmer

Reputation: 1854

It will help to move your navigationBar code into its own component, pass the route information into it*, then check for route depth.

TLDR;

if (route.index > 0){
    //Show Back Button.
}

Or just make your life easier and user either of these plugins to do the job for you.

React-Native-NavBar https://github.com/Kureev/react-native-navbar

React-Native-Router https://github.com/t4t5/react-native-router

*Passing the route may no longer be needed since the addition of Navigator.getContext(this).xxx was added. See navigator documentation for further info on getContext https://facebook.github.io/react-native/docs/navigator.html

Upvotes: 2

Related Questions