Tab navigation React Native hide part of bottom menu buttons - react-native

Question

I am new to this field and have been puzzling over this question for several days. Now I have three screens and three buttons.
I try to do next.
When I click on a middle button I want to hide left and right buttons and change active button's image.
This code from documentation with a small modification
when I click on right button I want to switch left and middle buttons
import * as React from 'react';
import { Text, View } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
if (route.name === 'Home') {
return (
<Ionicons
name={
focused
? 'ios-information-circle'
: 'ios-information-circle-outline'
}
size={size}
color={color}
/>
);
} else if (route.name === 'Settings') {
return (
<Ionicons
name={focused ? 'beaker' : 'ios-list'}
size={size}
color={color}
/>
);
} else if (route.name === 'Test') {
return (
<Ionicons
name={focused ? 'basketball' : 'aperture'}
size={size}
color={color}
/>
);
}
},
tabBarInactiveTintColor: 'gray',
tabBarActiveTintColor: 'tomato',
})}>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{ tabBarBadge: 3 }}
/>
<Tab.Screen name="Settings" component={SettingsScreen} />
<Tab.Screen name="Test" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}