is there any method to re-render the screen to bottom tab nav v5 in react-native

Issue

Hy, I'm using react-native bottom tabs navigation the first time I'm having an issue to re-render the screen when I get back to some other tab. I try to use isFocused in useEffect() but it didn't work for me.

const LandScreen = ({navigation}) => {
  return (
    <Tab.Navigator
      
      tabBarOptions={{
        showLabel: false,
        activeTintColor: colors.primary,
        inactiveTintColor: colors.textHead,
      }}
      
      >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'home' : 'home';
            return <Icon name={icon} color={color} size={size} />;
          },
        }}
      />
      <Tab.Screen
        name="Message"
        component={ChatStackScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'chatbox-ellipses' : 'chatbox-ellipses';
            return <Icon name={icon} color={color} size={size} />;
          },
          
        }}
      />
      <Tab.Screen
        name="Requests"
        component={RequestStackScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'heart' : 'heart';
            return <Icon name={icon} color={color} size={size} />;
          },
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationStackScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'notifications' : 'notifications';
            return <Icon name={icon} color={color} size={size} />;
          },
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreenScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'person' : 'person';
            return <Icon name={icon} color={color} size={size} />;
          },
          
        }}
      />
    </Tab.Navigator>
  );
};

Each Tab component having a stack inside of it.

Someone informs me how to rerender the bottom navigation tabs?

Solution

If I understand you correctly, you want the screen to re-render when you click on a bottom tab navigation button.

This can be accomplished by either adding the 'focus' event listener via the react navigation docs https://reactnavigation.org/docs/function-after-focusing-screen/

Or by explicitly calling 'navigation.navigate' when a bottom tab is pressed.

Answered By - mblakew