React Navigation - Navigation options with nested navigators

Question

Im still learning React Native. I kinda know how React Navigation works. Now Im getting a little bit stuck with Navigation Nesting. Im gonna try to be quick.

First, whats the practical way to nest navigators?

I was doing it somehow using nesting, but came across with a problem. Im only able to change navigation options in the nested navigator not in the component screen. I have difficulties opening the drawer menu from one of the screens since Im using a custom header plus using nested navigators. I have a similar code Im using for testing:

App.js (Navigators)

 import React, { Component } from 'react'; import { createStackNavigator, createDrawerNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation'; import SplashScreen from './SplashScreen'; import MainScreen from './MainScreen'; import FirstTabScreen from './FirstTabScreen'; import SecondTabScreen from './SecondTabScreen'; const AppStackNavigator = createStackNavigator({ splash: { screen: SplashScreen }, mainFlow: { screen: createDrawerNavigator({ main: { screen: MainScreen }, someTab: { screen: createBottomTabNavigator({ firstTab: { screen: FirstTabScreen }, secondTab: { screen: SecondTabScreen } }) } }) } }); const AppContainer = createAppContainer(AppStackNavigator); export default class App extends Component{ render(){ return <AppContainer/>; } } 

Above code will launch SplashScreen which is good and has the following:

SplashScreen.js

 import React, { Component } from 'react'; import { Button, View } from 'react-native'; export default class SplashScreen extends Component { static navigationOptions = { header: null } go = () =>{ this.props.navigation.navigate('main'); } render() { return ( <View> <Button title='GO NEXT SCREEN' onPress={this.go}/> </View> ); } } 

In this screen navigation options work in the same code and its as expected. Everything cool for now, when I press the button and go to the next screen which is MainScreen:

MainScreen.js

 import React, { Component } from 'react'; import { Text, StyleSheet, Button, View } from 'react-native'; export default class MainScreen extends Component { static navigationOptions = { header: null } drawer = () => { this.props.navigation.openDrawer(); } render() { return ( <View> <Text style={styles.baseText}>HELLO</Text> <Button title='DRAWER' onPress={this.drawer}/> </View> ); } } const styles = StyleSheet.create({ baseText: { fontFamily: 'Cochin', }, titleText: { fontSize: 20, fontWeight: 'bold', }, }); 

Here is the problem, navigation options wont work here, so I was trying setting those lines in the navigator itself and it works if I configure header as null but if I want to control 'props.navigation' it will say 'this.props.navigation' is undefined.

So, ideal question would be, is there a way to make navigation options available from the screen component itself? somehow? or is there a way I can put this navigation options inside the navigator with working navigation props that wont say its undefined?

All this is because I want to customize my header

Thanks a lot!

Answer 1

You need to use withNavigation to provide navigation prop there,

See my answer here

Answer 2

In SplashScreen.js you are not navigating to the right screen

you have to do

go = () =>{
        this.props.navigation.navigate('mainFlow');
    }