React-Native Navigation v5 : How to change a tabBarLabel or tabBarIcon and the colorBackground of the tab on a specific screen?

Question

I'm using React Navigation 5 and I would like my Tab Bar to be different on a specific screen. I've try many things but without success... I would like the tabIcon of the second screen to be not visible only when the active screen is the second screen and also to change the tab background color when i'm on this same screen. Here is my code and 2 photos to show what I would like to do.

import React from 'react';
import 'react-native-gesture-handler';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import Photo from './Home';
import Folders from './Folders';
import Search from './Search';

import CustomIcon from './components/CustomIcon.js';

import { Dimensions } from "react-native";

const Tab = createMaterialTopTabNavigator();

export default function TabNavigator() {
  return (
    <Tab.Navigator
    initialRouteName = 'Photo' 
    tabBarOptions= {{
        activeTintColor: '#FFCD29',
        inactiveTintColor: 'white',
        showLabel: true, //icons in label because maxsize of tabBarIcons is 25
        showIcon: false,
        indicatorStyle:{height: 0},
        pressColor: 'transparent', 
        pressOpacity: 0, 
        style: {
            paddingBottom: 24,
            backgroundColor: 'transparent', 
            // I WANT TAB BACKGROUND COLOR TO BE TRANSPARENT ON PHOTO SCREEN BUT BLACK ON OTHER SCREENS
            position: "absolute",
            bottom: 0,
            width: Dimensions.get('window').width
        }
    }}
    >
        <Tab.Screen 
            name="Search" 
            component={Search} 
            options={{ 
                tabBarLabel: ({ color }) => (
                    <CustomIcon name='SearchScreen' size={45} color={color}/>
                ),
                tabBarAccessibilityLabel: 'SearchScreen',
            }}
        />
        <Tab.Screen 
            name="Photo" 
            component={Photo} 
            options={{ 
                tabBarLabel: ({ color }) => (
                    <CustomIcon name='PhotoScreen' size={45} color={color}/>
                ),
                // I DONT WANT TO SEE THIS ICON WHEN ACTIVESCREEN IS PHOTOSCREEN
                tabBarAccessibilityLabel: 'Appareil Photo',
            }}
        />
        <Tab.Screen 
            name="Dossiers" 
            component={Folders}
            options={{ 
                tabBarLabel: ({ color }) => (
                    <CustomIcon name='FolderScreen' size={45} color={color}/>
                ),
                tabBarAccessibilityLabel: 'Dossiers',
            }}
            style = {{backgroundColor: 'black',}}
        />
    </Tab.Navigator>
  );
}

[SearchScreen]: https://i.sstatic.net/UGH7L.jpg

[PhotoScreen]: https://i.sstatic.net/wAfwz.jpg

Answer 1

This is a great solution! If you are looking to change just the text color of each tab name, you could do this:

screenOptions={({route}) => ({
      tabBarLabel: ({focused}) => {
        let iconColor;
        if(route.name === 'Pending'){
          iconColor = focused ? 'yellow' : 'white'
        } else if(route.name === 'Accepted'){
          iconColor = focused ? 'lightgreen' : 'white'
        } else {
          iconColor = focused ? 'red' : 'white'
        }
        return <Text style={{color: iconColor, fontSize: 20, textAlign: "center"}}>{route.name}</Text>
      },
    })}

Answer 2

Here is the solution i found to make the middle Icon disappear on the middle screen (see code below). But sometimes the animation of passing from a color to another fail a little when i click on icons rather than using swipe. The middle icon color is still a bit visible when i go on PhotoScreen like if i didn't swipe completely to this screen. But as soon as i click somehere the icon turns correctly invisible. Same when i go to an other screen by clicking, the change between inactiveColor and activeColor of other icons hasn't been done completlely. The solution i found for this bug is to not use activeTintColor and inactiveTintColor for other icons but to also use the focused props, for each screen. To change the background color of the tab bar depending on which screen i am, i just added a different colored view on each screen behind my tab bar. It works because my tab bar background color was transparent. I haven't find other solution directly in react-navigation module.

<Tab.Screen 
        name="Photo" 
        component={Home} 
        options={({ route }) => ({
            tabBarLabel: ({ focused }) => {
                let iconColor;

                if (route.name === 'Photo') {
                iconColor = focused
                    ? 'transparent'
                    : 'white';
                } 

                return <CustomIcon name='PhotoScreen' size={45} color={iconColor}/>;
            },
            tabBarAccessibilityLabel: 'Appareil Photo',
        })}
    />