javascriptreact-nativenavigationreact-navigation-bottom-tabreact-navigation-v6

How to add a button on the bottomTabNavigator rather than navigating to a screen in react native?


I am using react-navigation 6. my requirement is to add a signout button in the bottom tab, I have a bottomTabNavigator. So, I want to add that button on the bottom tabs so as soon as it is pressed the user is logged out. is there a way this can be done?


Solution

  • You can override tabBarButton options inside your Tab.Screen. Like this:

    const = LogoutComponent = () => {
      return null;
    }
    
    const navigator = () => {
    
      return (
        <Tab.Navigator>
          <Tab.Screen name="Logout" component={LogoutComponent} options={{
            tabBarButton: () => (<TouchableOpacity onPress={() => logout()}/>),
          }} />
        <Tab.Navigator>
      )
    }
    

    References: https://medium.com/@my.maithi/react-native-navigation-add-custom-button-in-the-middle-of-tabbar-6c390201a2bb