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

Question

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?

Answer 1

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