Search code examples
react-nativereact-navigation-v5react-navigation-bottom-tab

React native navigation v5 tab press not working


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>

Solution

  • 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')
          }
        },
      })}
    />