Navigate to the screen when Tab on BottomTabNavigator is pressed

Question

I would like to navigate to the screen when the particular tab on the BottomTabNavigator is pressed.

Normally, when the tab is pressed, it navigates to the configured screen automatically. But I don't want to have that behaviour. I want to hide the bottom tab on that screen and provide back feature in the top bar too. I normally use navigation.navigate('routeName') in ReactNavigationStack screens. But I don't know how/where to write this code in the BottomTabNavigator configuration.

For example, I've got the following 5 tabs in the bottom bar. I want to navigate to AddNewScreen when Add button is pressed. I don't know where to put that onPress event. I tried to put it under options and BottomTab.Screen. But still no luck.

I tried to intercept onPress event to use navigation.navigate. But it's not even hit and it always opens the AddNewScreen with the tab bar.

<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Home"
        component={HomeScreen}
        initialParams="Home Params"
        options={{
          title: 'Home',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-home" iconType="ion" />,
        }}
      />      
      <BottomTab.Screen
        name="AddNew"
        component={AddNewScreen}        
        options={{
          title: 'Add',
          tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-add-circle" iconType="ion" 
          onPress={(e) => {
            e.preventDefault();
            console.log(e)
          }} />,    
        }}
      />
</BottomTab.Navigator>

The Add new screen is always opened with the bottom tab bar.

Questions:

Is there anyway to navigate to specific screen when the tab is pressed?
Is there anyway to hide the bottom tab bar on that Add New Screen?

score 15 · Accepted Answer · edited Feb 17 '22 at 13:51

15

Update:

The Navigation library v6 supports the Listener feature that can be used

<Tab.Screen
  name="Chat"
  component={Chat}
  listeners={{
    tabPress: e => {
      // Prevent default action
      e.preventDefault();

      //Any custom code here
      alert(123);
    },
  }}
/>;

You can have a custom functionality in the bottom toolbar using the tabbar button. The code would be like below

<Tab.Screen
  name="Settings2"
  component={SettingsScreen}
  options={{
    tabBarButton: props => (
      <TouchableOpacity {...props} onPress={() => alert(123)} />
    ),
  }}
/>

This would render a normal bottom tab bar button but the onclick would show the alert, you can replace the code with your navigate or any other code you need. Also the 'SettingsScreen' component can be a dummy component returning null.

Hope this helps.

edited Feb 17 '22 at 13:51

Abhishek Sah

384
5
12

answered May 28 '20 at 03:16

Guruparan Giritharan

15,660
4
27
50

1

thanks for the answer, but when I use `props.navigation`, it tells me that navigation is `undefined`. `tabBarButton` seems to not have `navigation` object, how can we retrieve it ? – samasoulé Mar 11 '21 at 11:43
2

you will have to pass a function to options which will receive the navigation as a param – Guruparan Giritharan Mar 11 '21 at 12:34
3

thanks!! it works by doing `options={({navigation}) => { return { tabBarButton: () => ( navigation.navigate('Market')}> ), }; }}` – samasoulé Mar 11 '21 at 16:40
1

thank you for this solutions. You cannot find it this easy in the docs. x – Abhishek Sah Feb 17 '22 at 13:37

score 12 · Answer 2 · answered Mar 19 '21 at 18:10

You can have a custom functionality

 <Tab.Screen
      name="Add"
      component={View}
      listeners={({ navigation }) => ({
        tabPress: (e) => {
          // Prevent default action
          e.preventDefault();

          // Do something with the `navigation` object
          navigation.navigate("PhotoNavigation"); // Here!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        },
      })}
    />
<Tab.Screen name="Notifications" component={Notifications} />

This is the official solution. Thumbs up! – ovabrandon Sep 29 '21 at 20:46 — ovabrandon, Sep 29 '21 at 20:46

Navigate to the screen when Tab on BottomTabNavigator is pressed

2 Answers2

Update:

Linked

Related