react-navigation change active tab from nested navigator

Question

I am looking at react-navigation and am having a lot of trouble pushing a new screen to a tab other than the one the user is currently on and having it switch tabs and push the route I specify.

The navigation structure I'm using is as follows with a StackNavigator with a screen of a TabNavigator and each of the tabs have screens of StackNavigators.

StackNavigator({
  root: {
    screen: TabNavigator({
      shopTab: {
        screen: StackNavigator({
          shopIndex: ShopIndexScreen,
          product: ProductScreen
        })
      },
      listsTab: {
        screen: StackNavigator({
          listsIndex: ListsIndexScreen
        })
      }
    })
  }
})

Let's say I want to push a product screen from the listsTab . I want to have it switch tabs and push the product route onto the StackNavigator on the shopTab . I have not been able to find a way to do this.

I was hoping that I would be able to use this.props.navigation.navigate('product') in the ListsIndexScreen but it seems that with the navigators being nested like this the library is unable to find the screen with the product key.

I've also tried to use a combination of this.props.navigation.dispatch and NavigationActions.navigate/replace but none of those worked either.

I assume I'm missing something simple as this seems like pretty basic behavior to be able to write into an app, but I'm unable to see it.

Answer 1

As promised, stack in tab in stack, all connected and navigating via navigate.

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, Dimensions } from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';

const device_width = Math.round(Dimensions.get('window').width);
const device_height = Math.round(Dimensions.get('window').height);

const viewStyle = {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    width:device_width, 
    height: device_height, 
};

const Home = ({ navigation }) => (
    <View style={{...viewStyle, backgroundColor:'green'}}>
        <Text>HOME</Text>
        <TouchableOpacity onPress={() => navigation.navigate('Home')}><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home2')}><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home3')}><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home4')}><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home5')}><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home6')}><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home7')}><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home8')}><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home2 = ({ navigation }) => (
    <View style={{...viewStyle, backgroundColor:'blue'}}>
        <Text>HOME2</Text>
        <TouchableOpacity onPress={() => navigation.navigate('Home')}><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home2')}><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home3')}><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home4')}><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home5')}><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home6')}><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home7')}><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home8')}><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home3 = ({ navigation }) => (
    <View style={{...viewStyle, backgroundColor:'yellow'}}>
        <Text>HOME3</Text>
        <TouchableOpacity onPress={() => navigation.navigate('Home')}><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home2')}><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home3')}><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home4')}><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home5')}><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home6')}><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home7')}><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home8')}><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home4 = ({ navigation }) => (
    <View style={{...viewStyle, backgroundColor:'red'}}>
        <Text>HOME4</Text>
        <TouchableOpacity onPress={() => navigation.navigate('Home')}><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home2')}><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home3')}><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home4')}><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home5')}><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home6')}><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home7')}><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home8')}><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home5 = ({ navigation }) => (
    <View style={{...viewStyle, backgroundColor:'teal'}}>
        <Text>HOME5</Text>
        <TouchableOpacity onPress={() => navigation.navigate('Home')}><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home2')}><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home3')}><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home4')}><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home5')}><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home6')}><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home7')}><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home8')}><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home6 = ({ navigation }) => (
    <View style={{...viewStyle, backgroundColor:'white'}}>
        <Text>HOME6</Text>
        <TouchableOpacity onPress={() => navigation.navigate('Home')}><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home2')}><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home3')}><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home4')}><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home5')}><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home6')}><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home7')}><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home8')}><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home7 = ({ navigation }) => (
    <View style={{...viewStyle, backgroundColor:'lightgrey'}}>
        <Text>HOME7</Text>
        <TouchableOpacity onPress={() => navigation.navigate('Home')}><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home2')}><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home3')}><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home4')}><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home5')}><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home6')}><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home7')}><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home8')}><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)

const Home8 = ({ navigation }) => (
    <View style={{...viewStyle, backgroundColor:'lightgreen'}}>
        <Text>HOME8</Text>
        <TouchableOpacity onPress={() => navigation.navigate('Home')}><Text>GO TO HOME</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home2')}><Text>GO TO HOME2</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home3')}><Text>GO TO HOME3</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home4')}><Text>GO TO HOME4</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home5')}><Text>GO TO HOME5</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home6')}><Text>GO TO HOME6</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home7')}><Text>GO TO HOME7</Text></TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Home8')}><Text>GO TO HOME8</Text></TouchableOpacity>
    </View>
)



const StackNav2 = StackNavigator(
    {
        Home6: {
            screen: Home6,
        },
        Home7: {
            screen: Home7,
        },
        Home8: {
            screen: Home8,
        }
    },
    {
   headerMode: 'none',
   mode: 'card',
   navigationOptions: {
     gesturesEnabled: true,
   },
   initialRouteName: 'Home7',
}
);

const TabNav = TabNavigator(
    {
        Home4: {
            screen: Home4,
            navigationOptions: {
                tabBarLabel: 'Home4',
            },
        },
        Home5: {
            screen: Home5,
            navigationOptions: {
                tabBarLabel: 'Home5',
            },
        },
        StackNav2: {
            screen: StackNav2,
            navigationOptions: {
                tabBarLabel: 'Home6',
            },
        },
    }, {
        tabBarPosition: 'bottom',
        animationEnabled: false,
        lazy: true,
        tabBarOptions: {
            activeTintColor: 'white',
            activeBackgroundColor: 'rgba(152, 187, 45, 1)',
        },
});

const Nav = StackNavigator(
    {
        Home: {
            screen: Home,
        },
        Home2: {
            screen: Home2,
        },
        Home3: {
            screen: Home3,
        },
        Tab: {
            screen: TabNav,
        }
    },
    {
   headerMode: 'none',
   mode: 'card',
   navigationOptions: {
     gesturesEnabled: true,
   },
   initialRouteName: 'Home',
}
);




export default Nav;