React native navigation v5 tab press not working

Question

As seen on the code, tabPress is not called, am i doing it wrong or am i missing something, unfortunately i have not found any code samples for react navigation version 5.

<Tab.Navigator labeled={false} barStyle={{backgroundColor: '#ffffff', height: 55}} options={{
        tabPress: ({navigation}) => {
            console.log('nav tab press triggered')
        }
    }}>
        <Tab.Screen name={`DeviceNavigatorTab`} component={DeviceNavigator} options={{
            tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather_home-menu.png')}
                                                style={{width: 26, height: 26, tintColor}}/>,
            tabPress: ({navigation}) => {
                console.log('tab press triggered')
            }
        }} tabPress={() => { console.log('prop tab pressed') }}/>
        <Tab.Screen name={`AlarmNavigatorTab`} component={AlarmNavigator} options={{
            tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather_alert-circle.png')}
                                                style={{width: 26, height: 26, tintColor}}/>,
        }}/>
        <Tab.Screen name={`ProfileNavigatorTab`} component={ProfileNavigator} options={{
            tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather_user.png')}
                                                style={{width: 26, height: 26, tintColor}}/>,
        }} />
    </Tab.Navigator>

tabPress is an event. You have to use it inside the component. https://reactnavigation.org/docs/bottom-tab-navigator#events — Ashwin Mothilal, Mar 25 '20 at 06:43

score 42 · Accepted Answer · edited May 24 '21 at 09:28

42

I found something new in documentation, that i have not seen before, this is the way to add listener to screen, every time user clicks on tab, it goes to first stack screen inside this tab

https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen

<Tab.Screen 
  name="DeviceNavigatorTab" 
  component={DeviceNavigator} 
  listeners={({ navigation, route }) => ({
    tabPress: e => {
      if (route.state && route.state.routeNames.length > 0) {
          navigation.navigate('Device')
      }
    },
  })}
/>

edited May 24 '21 at 09:28

arnaudambro

2,403
3
25
51

answered Mar 27 '20 at 09:21

Karli Ots

729
1
8
22

Can you please share the link of the documentation. ty – user7747472 Sep 05 '20 at 16:25
3

https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen – Karli Ots Sep 07 '20 at 06:12
There is no 'listeners' available?! – user1804084 Sep 28 '20 at 13:57
1

I spent days looking for this you angel from above. – kekkles4 Jan 18 '22 at 01:34
Thank you!!! You can also use the `screenListeners` prop on `` if you want to add a listener for all tab buttons: ` console.log('TAPPED'); }}>...` – ourmaninamsterdam May 22 '22 at 15:47

score 1 · Answer 2 · answered Mar 25 '20 at 10:40

1

You need to listen/subscribe "tabPress" event as below in your component.

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabPress', e => {
    // Prevent default behavior
    e.preventDefault();

    // Do something manually
    // ...
  });

  return unsubscribe;
}, [navigation]);

answered Mar 25 '20 at 10:40

Rajan

1,512
2
14
18

17

This example from the docs does not work, though. The listener is not called. – philk Jul 10 '20 at 13:57
1

Out of curiosity, has anyone got this to work? – Trip Jan 01 '21 at 20:28
to make it work, it need to be within a component as a child of the Tab.Screen – Hugo Gresse Mar 18 '21 at 14:12
5

If your TabNavigator has nested StackNavigators, and you're attempting to listen to tabPress events from a screen in the nested stack, you might be forgetting to call ````navigation.getParent()```` (react navigation 6). ````getParent()```` was formerly ````dangerouslyGetParent()```` in react navigation 5. – Joe Nov 07 '21 at 01:22

React native navigation v5 tab press not working

2 Answers2

Linked