Route not found when nesting TabNavigator inside DrawerNavigator

Question

I'm using a TabNavigator nested inside DrawerNavigator. My TabNavigator contains 2 screens and DrawerNavigator has 4 routes, one of which is the TabNavigator.

When I swipe to second tab inside my TabNavigator, then use the drawer to go to some other route and use the drawer to come back to TabNavigator, it is an error.

Here is the TabNavigator:

const MyTabNavigator = TabNavigator(
{
    Tab1: {
        screen: StackNavigator1,
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: "Tab1"
        })
    },
    Tab2: {
        screen: StackNavigator2,
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: "Tab2",
            header: false
        })
    }
},
{
    tabBarPosition: 'top',
    tabBarOptions: {
        activeTintColor: '#000000',
        inactiveTintColor: '#707070',
        labelStyle: labelStyle,
        style: {
            backgroundColor: '#ffffff',
        },
        indicatorStyle: {
            borderBottomColor: '#ff3278',
            borderBottomWidth: 3
        }
    }
});

And here is the DrawerNavigator:

const MyDrawerNavigator = DrawerNavigator(
{
    Tabs: {
        screen: MyTabNavigator
    },
    Key1: {
        screen: Navigator1
    }
    .
    .
    .
},
{
    contentComponent: (props) => {
        return <View>
            <View style={styles.drawerHeaderStyle}>
                <Text style={styles.drawerHeaderTextStyle}>{`Welcome user`}</Text>
            </View>
            <DrawerItems {...props} />
            <View style={styles.emptySpace} />
            <Touchable
                onPress={() => {
                    // Logout User
                }}
                style={styles.logoutButton}
                background={Touchable.Ripple('grey')}>
                <Text style={styles.buttonFont}>{"Logout"}</Text>
            </Touchable>
        </View>
    }
});

Each of the StackNavigators have 2 screens. Something like:

const StackNavigator1 = StackNavigator(
{
    Screen1: {
        screen: Screen1,
        navigationOptions: ({ navigation }) => ({
            header: false
        })
    },
    Screen2: {
        screen: Screen2,
        navigationOptions: ({ navigation }) => ({
            header: false,
            tabBarVisible: false,
            swipeEnabled: false,
            drawerLockMode: 'locked-closed'
        }),
    }
}, {
    headerMode: "screen"
});

So when I swipe to "Key1" then use drawer to come to Navigator1 and finally use drawer to go back to "Tabs", I get an error saying

Error: There is no route defined for key Screen1, Must be one of Screen3, Screen4.

Where Screen3 and Screen4 reside inside StackNavigator2.

I hope I was able to describe the issue appropriately. Any ideas?

Answer 1

Alright. I've figured out a solution. It's a little hard to explain but I'll try nonetheless.

To get it to work I had to overwrite the onItemPress method of the DrawerItems myself.

My DrawerNavigation now looks like this:

const MyDrawerNavigator = DrawerNavigator(
{
    Tabs: {
        screen: MyTabNavigator
    },
    Key1: {
        screen: Navigator1
    }
    .
    .
    .
},
{
    contentComponent: (props) => {
        return <View>
            <View style={styles.drawerHeaderStyle}>
                <Text style={styles.drawerHeaderTextStyle}>{`Welcome user`}</Text>
            </View>
            <DrawerItems {...props} onItemPress={(routeOptions) => {
                props.navigation.navigate(routeOptions.route.routes[routeOptions.route.index].routeName, {})
            }} />
            <View style={styles.emptySpace} />
            <Touchable
                onPress={() => {
                    // Logout User
                }}
                style={styles.logoutButton}
                background={Touchable.Ripple('grey')}>
                <Text style={styles.buttonFont}>{"Logout"}</Text>
            </Touchable>
        </View>
    }
});

Notice the onItemPress added in DrawerItems. This rather looks like a bug in react-navigation itself.

Answer 2

I had been facing these problems too but I came up with a solution building up my own header that will call drawer navigator.

class Header extends Component {
  render() {
    return (
      <View>
        <Logo />
        <TouchableOpacity onPress={() => this.props.navigation.navigate('DrawerOpen')}>
          <Icon size={24} style={{ color: '#fff' }} name="navicon" />
        </TouchableOpacity>
      </View>
    )
  }
}

Header.propTypes = {
  navigation: PropTypes.instanceOf(Object).isRequired,
}

export default withNavigation(Header)

Wrapping your screens with withNavigation() maybe will do the trick.