how to navigate to a particular tab from a drawer navigator menu react native

Question

I have to navigate to a particular tab when pressed from drawer items. I searched around a lot but couldnt find anything relating to my problem

i tried to follow this link of navigation actions but couldnt find out how to implement it Navigate to specific tab from Drawer Navigator.

const TabNavigator = createMaterialTopTabNavigator(
  {
    Upcoming: { screen: UpcomingScreen },
    Accepted: { screen: AcceptedScreen },
    Ongoing: { screen: OngoingScreen },
    Completed: { screen: CompletedScreen },
  },
);

const Screen1_StackNavigator = createStackNavigator({
  First: {
    screen: TabNavigator,
  },
});


const DrawerNavigatorExample = createDrawerNavigator({
  Screen1: {
      //Title
      screen: Screen1_StackNavigator,
      navigationOptions: {
        drawerLabel: 'Upcoming Trips',
        labelStyle: {
          fontFamily: Fonts.LatoLight,
          fontWeight: '200',
        },
        drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 20, width: 21}} source={require('./images/calendar.png')} />
      )
    },
  },
  Screen2: {
    //Title
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: () => null,
    },
  },
  Screen3: {
    //Title
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Accepted Trips',
      labelStyle: {
        fontFamily: Fonts.LatoLight,
        fontWeight: '200',
      },
      drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 22, width: 22}} source={require('./images/sticker.png')} />
      )
    },
  },
  Screen4: {
    //Title
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Ongoing Trips',
      labelStyle: {
        fontFamily: Fonts.LatoLight,
        fontWeight: 'normal'
      },
      drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 22, width: 22}} source={require('./images/navigator.png')} />
      )
    },
  },
  Screen5: {  
    //Title
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Completed Trips',
      labelStyle: {
        fontFamily: Fonts.LatoLight,
        fontWeight: 'normal'
      },
      drawerIcon: () => (
        // <Icon name="align-center" size={20} color="#365888" />
        <Image style={{height: 24, width: 20}} source={require('./images/checklist.png')} />
      )
    },
  },
})

When i press on the " Screen3 " on the drawer menu it should navigate to " Accepted " screen in tab navigator. When i press " Screen4 " on the drawer menu it should navigate to " Ongoing " screen in the tab navigator. When i press " Screen5 " on drawer menu it should navigate to " Completed " screen in the tab navigator. Is there any way to achieve it ? Thanks

score 2 · Accepted Answer · answered Oct 27 '19 at 05:51

Hi guys i worked around little bit and found out a simple solution, hope it helps any one in the future. The solution is by " writing a custom drawer component and mentioning in the contentComponent ".

const TabNavigator = createMaterialTopTabNavigator(
  {
    Upcoming: { screen: UpcomingScreen },
    Accepted: { screen: AcceptedScreen },
    Ongoing: { screen: OngoingScreen },
    Completed: { screen: CompletedScreen },
  },
);

UpcomingNav = (props) => {
  props.navigation.navigate('Upcoming')
}

AcceptedNav = (props) => {
  props.navigation.navigate('Accepted')
}

OngoingNav = (props) => {)
  props.navigation.navigate('Ongoing')
}

CompletedNav = (props) => {
  props.navigation.navigate('Completed')
}

const CustomDrawerContentComponent = props => (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView>
        <DrawerItems {...props} />

        <TouchableOpacity onPress={() => this.UpcomingNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 20, width: 21}} source={require('./images/calendar.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Upcoming Trip</Text>
            </View>
          </TouchableOpacity>

        <TouchableOpacity style={{paddingTop: calcHeight(2)}} onPress={() => this.AcceptedNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 22, width: 22}} source={require('./images/sticker.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Accepted Trip</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity style={{paddingTop: calcHeight(2)}} onPress={() => this.OngoingNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 22, width: 22}} source={require('./images/navigator.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Ongoing Trip</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity style={{paddingTop: calcHeight(2)}} onPress={() => this.CompletedNav(props)}>
            <View style={{flexDirection: 'row', paddingLeft: calcWidth(5), paddingTop: calcHeight(1)}}>
              <Image style={{height: 24, width: 20}} source={require('./images/checklist.png')} />
              <Text style={{fontWeight: 'normal', fontFamily: Fonts.LatoRegular, paddingLeft: calcWidth(10.5), color: 'black'}}>Completed Trip</Text>
            </View>
          </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
);

const DrawerNavigatorExample = createDrawerNavigator({
  Screen1: {
    screen: Screen1_StackNavigator,
    navigationOptions: {
      drawerLabel: () => null,
    },
  },
  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: () => null,
    },
  },
},{
    contentComponent: CustomDrawerContentComponent,
    contentOptions: {
      labelStyle: {
        fontFamily: Fonts.LatoRegular,
        fontWeight: 'normal'
      }
    },
  },
);

score 0 · Answer 2 · answered Oct 23 '19 at 10:12

You can overload your tabBarComponent. Then you can check which Tab was tapped/clicked, and assign an navigate-Call to it.

Example:

    createAppContainer(createBottomTabNavigator({
    TAB_NEWS: {
    screen: NewsMenu,

      navigationOptions: {
        tabBarLabel: 'NEWS',
      },
    },
    TAB_MORE: {
        screen: MenuMenu,
        navigationOptions: {
          tabBarLabel: 'MEHR',
        },
      },
    ....
    tabBarComponent: ({ jumpToIndex, ...props }) => (
    <BottomTabBar
      {...props}
      jumpToIndex={(index) => {
        if (index === 2) {
          // This is the MORE-Tab-Button. Don't  switch to tab, but open the Modal
          props.navigation.navigate('Menu_Screen');
        } else {
          jumpToIndex(index);
        }
      }}
    />
    ),

hi @suther, thank you for your response, i kind of didnt get your answer, i am sorry i am new to RN, and as i have mentioned i want to navigate from drawer menu to a particular tab. Can you please let me know how can i achieve that ? — Sagar RS, Oct 23 '19 at 23:48

how to navigate to a particular tab from a drawer navigator menu react native

2 Answers2

Linked