score:8

Accepted answer

navigation object of your custom BottomBar has an index that hold the current active screen index

tabBarComponent: ({navigation}) => <BottomBar navigation={navigation}/>

navigation.state.index

If Home screen is active >> navigation.state.index would be 0 If Chat screen is active >> navigation.state.index would be 1 ...etc

score:-1

As @Biskrem Muhammad suggested, this works:

export function SignUp(props: TSignupProps) {
  const { navigation, route } = props;
  console.log('Im in screen:', route.name)
  .
  .
  .
}

score:4

You can with navigation.state.routeName

tabBarComponent: ({navigation}) => <BottomBar navigation={navigation} currentRouteName={navigation.state.routeName} />

Or Better still you can do something like this:

const TabNavigator = createBottomTabNavigator({
    Home: Home,
    Chat: Chat
},
{
    defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, horizontal, tintColor }) => {
            if (navigation.state.routeName === 'Home') {
                return <Icon name='ios-home' size={30} color={tintColor} />
            } else if (navigation.state.routeName === 'Chat') {
                return <Icon name='ios-heart' size={30} color={tintColor} />
            }
        },
        tabBarOptions: {
            activeTintColor: '#2BEDBA',
            inactiveTintColor: '#FAFAFA',
            style: { backgroundColor: '#000', paddingTop: 5 }
        },
    })
});

score:4

Rather than setting a complete new tabBarComponent for icons you can use tabBarIcon property to set the icons. You can find an example on Tab Navigation Docs

  • tabBarIcon is a property on navigationOptions, so we know we can use it on our screen components, but in this case chose to put it in the createBottomTabNavigator configuration in order to centralize the icon configuration for convenience.
  • tabBarIcon is a function that is given the focused state, tintColor, and horizontal param, which is a boolean. If you take a peek further down in the configuration you will see tabBarOptions and activeTintColor and inactiveTintColor. These default to the the iOS platform defaults, but you can change them here. The tintColor that is passed through to the tabBarIcon is either the active or inactive one, depending on the focused state (focused is active). The orientation state horizontal is true when the device is in landscape, otherwise is false for portrait.
  • Read the full API reference for further information on createBottomTabNavigator configuration options.

Example (From the docs)

export default createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
          // Sometimes we want to add badges to some icons. 
          // You can check the implementation below.
          IconComponent = HomeIconWithBadge; 
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here!
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);

score:4

Using a functional component with React Navigation 5.x. You can use the useIsFocused hook.

import { useIsFocused } from "@react-navigation/native"; 

Usage: In each of the tab screens that you want to detect if they are the currently active or focused.

const isFocused = useIsFocused();

if (isFocused) {
  // the screen is currently focused
  // your code here
}

Docs: https://reactnavigation.org/docs/function-after-focusing-screen/


Related Query

More Query from same tag