When I am navigating from other screen to home screen then my footer tab is hiding . I have to fic tis , my Bottom Tab Navigator should not hide if I navigate form any screen. When screen reload then its hide , elase when I come back using back button its doesn't hide.
const AppNavigator = () => {
const { colors, font, sizes } = useTheme();
const { t } = useRtlContext();
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = HOME;
} else if (route.name === 'Orders') {
iconName = ORDERS;
} else if (route.name === 'Profile') {
iconName = PROFILE;
}
// You can return any component that you like here!
return (
<SvgCss
xml={_.replace(iconName, new RegExp('{color}', 'g'), color)}
width={wp('7%')}
height={wp('7%')}
/>
);
},
tabBarLabel: ({ tintColor, focused, item }) => {
const color = focused ? colors.primary : colors.grey1;
let labelName;
if (route.name === 'Home') {
labelName = t('home');
} else if (route.name === 'Orders') {
labelName = t('orders');
} else if (route.name === 'Profile') {
labelName = t('profile');
}
return (
<Text
style={{
fontFamily: font.regular,
fontSize: hp('1.7%'),
color,
marginTop: 5,
borderBottomWidth: 2,
borderBottomColor: focused ? colors.primary : colors.white,
}}>
{labelName}
</Text>
);
},
tabBarStyle: {
height: hp('7.5%'),
paddingTop: hp('1.5%'),
paddingBottom: hp('1%'),
display: getTabBarVisibility(route) ? 'none' : 'flex',
},
headerShown: false,
tabBarActiveTintColor: colors.primary,
tabBarInactiveTintColor: colors.grey1,
})}
initialRouteName="Home">
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Orders" component={OrderStack} />
<Tab.Screen name="Profile" component={ProfileStack} />
</Tab.Navigator>
);
};
Please suggest Thank you
