Change tab bar button on different screen in Expo bottomTabNavigator - react-native

Question

If have the following code :
const Tab = createBottomTabNavigator();
export default function Tabs() {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarShowLabel: true,
tabBarHideOnKeyboard: true,
tabBarStyle: {
backgroundColor: "#FFFFFF",
height: "8%",
position: "absolute",
},
})}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: ({ focused }) => (
<Text
style={{
color: focused ? "#299ca4" : "#b5b5b5",
fontFamily: "Jost",
fontWeight: "600",
fontSize: RFPercentage(1.2),
marginTop: -10,
marginBottom: 10,
}}
>
ACCUEIL
</Text>
),
tabBarIcon: ({ focused }) =>
focused ? (
<Image
source={require("../assets/home-active.png")}
style={{ width: 20, height: 20 }}
/>
) : (
<Image
source={require("../assets/home.png")}
style={{ width: 20, height: 20 }}
/>
),
}}
/>
<Tab.Screen
name="Explorer"
component={Explorer}
options={{
tabBarLabel: ({ focused }) => (
<Text
style={{
color: focused ? "#299ca4" : "#b5b5b5",
fontFamily: "Jost",
fontWeight: "600",
fontSize: RFPercentage(1.2),
marginTop: -10,
marginBottom: 10,
}}
>
MARCHES
</Text>
),
tabBarIcon: ({ focused }) =>
focused ? (
<Image
source={require("../assets/explorer-active.png")}
style={{ width: 20, height: 20 }}
/>
) : (
<Image
source={require("../assets/explorer.png")}
style={{ width: 20, height: 20 }}
/>
),
}}
/>
<Tab.Screen
name="Scanner"
component={Scanner}
options={{
tabBarLabel: ({ focused }) => (
<Text
style={{
color: "#ffffff",
}}
>
SCANNER
</Text>
),
tabBarIcon: ({ focused }) => (
<View
style={{
width: 55,
height: 55,
backgroundColor: "#089baa",
borderRadius: 50,
marginBottom: 30,
justifyContent: "center",
alignItems: "center",
}}
>
<Image
source={require("../assets/scanner-blanc.png")}
style={{ width: 28, height: 28 }}
/>
</View>
),
}}
/>
<Tab.Screen
name="Community"
component={Community}
options={{
tabBarLabel: ({ focused }) => (
<Text
style={{
color: focused ? "#299ca4" : "#b5b5b5",
fontFamily: "Jost",
fontWeight: "600",
fontSize: RFPercentage(1.2),
marginTop: -10,
marginBottom: 10,
}}
>
FIL D'ACTU
</Text>
),
tabBarIcon: ({ focused }) =>
focused ? (
<Image
source={require("../assets/news-active.png")}
style={{ width: 20, height: 20 }}
/>
) : (
<Image
source={require("../assets/news.png")}
style={{ width: 20, height: 20 }}
/>
),
}}
/>
<Tab.Screen
name="Profile"
component={Menu}
options={{
unmountOnBlur: true,
tabBarLabel: ({ focused }) => (
<Text
style={{
color: focused ? "#299ca4" : "#b5b5b5",
fontFamily: "Jost",
fontWeight: "600",
fontSize: RFPercentage(1.2),
marginTop: -10,
marginBottom: 10,
}}
>
PROFIL
</Text>
),
tabBarIcon: ({ focused }) =>
focused ? (
<Image
source={require("../assets/profile-active.png")}
style={{ width: 20, height: 20 }}
/>
) : (
<Image
source={require("../assets/profile.png")}
style={{ width: 20, height: 20 }}
/>
),
}}
/>
</Tab.Navigator>
);
}
If I am on any screen, the "Scanner" button in the center of the navigator displays the "Scanner" screen when pressed.
What I need to do is to render another button to display another view instead of it, if I am on a different screen.
For instance, if I am in the "Home" screen, I want the "Scanner" button, and if I am in the "Explorer" screen, I want the "Scanner" button be replaced with another one to call another screen.