react native : tab navigation style-CodePudding

Is there a way to change the style just of the ORANGE tab? Well I would be happy to know what is the way to handle such a situation. I tried in several ways to change the style of the ORANGE. I use navigation 5 in my app .

<Tab.Navigator
        tabBarOptions={{
          activeTintColor: 'white',
          inactiveTintColor: Colors.background_color,
          indicatorStyle: {
            backgroundColor: 'red',
            height: 5,
          },
          style: {
            elevation: 10,
            backgroundColor: Colors.background_2,
          },
          labelStyle: {
            fontSize: 18,
            fontWeight: 'bold',
          },
        }}
        backBehavior="none"
      >
        <Tab.Screen
          name="APPLE"
          listeners={({ route }) => ({
            focus: () => {
              setCurrentTabName(route.name);
            },
          })}
        >
          {() => <NetuneyDigum item={item} />}
        </Tab.Screen>
        <Tab.Screen
          name="ORANGE"
          component={BitzuaBdikotSadea}
          listeners={({ route }) => ({
            focus: () => {
              setCurrentTabName(route.name);
            },
          })}
        // initialParams={{ updateRecentFieldInput }} used for parameters not function
        />
        <Tab.Screen
          name="BANANA"
          component={E_BitsuaDigdum}
          listeners={({ route }) => ({
            focus: () => {
              setCurrentTabName(route.name);
            },
          })}
        />
      </Tab.Navigator>

CodePudding user response：

It depends exactly what you want to change but you can absolutely configure the icon and text per Screen in your Tab Bar Navigator using the options parameter.

<Tab.Screen
  name="ORANGE"
  component={BitzuaBdikotSadea}
  listeners={({ route }) => ({
    focus: () => {
      setCurrentTabName(route.name);
    },
  })}
  options={{
    tabBarLabel: () => <Text>My Custom Label</Text>,
    tabBarIcon: () => <MyCustomIcon />
  }}
// initialParams={{ updateRecentFieldInput }} used for parameters not function
/>

You can pass more props such as "focused" to have more dynamic styling like changing colour when that tab is active. Example: tabBarLabel: ({ focused }) => <MyCustomText focused={focused}>Custom Label</MyCustomText>

Full list of options are documented here: https://reactnavigation.org/docs/5.x/material-bottom-tab-navigator/#options