I have searched a lot about Navigation in React Native. I saw a lot of possibilities but I never found something like on Instagram. I did found a Bottom Tab bar Navigation, but there is always:
a) An animation
b) A Text
c) A color
d) .........
But I never found a bar like this. Do I have to use React Navigation for Nativgation or is it just helpful? What if I don't use it? :) And how could I do a menu bar like this (I think you all know how Instagram Navigation works):
Btw. I don't use expo :)
I use import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; because I was having many problems with the @react-navigation/bottom-tabs.
To use on bottom you can do this:
const Tab = createMaterialTopTabNavigator();
...
<Tab.Navigator
initialRouteName="Home"
tabBarPosition="bottom"
lazy={true}
tabBarOptions={{
activeTintColor: colors.orange,
inactiveTintColor: 'gray',
showIcon: true,
indicatorStyle: { backgroundColor: 'transparent' },
labelStyle: {
fontFamily: 'GothamRounded-Bold',
fontSize: widthPercentageToDP('3%'),
bottom: 1.5,
alignSelf: 'flex-start'
},
activeTintColor: colors.orange,
inactiveTintColor: colors.greyLight,
style: {
elevation: 5,
shadowColor: '#000',
shadowOpacity: 0.2,
shadowOffset: {
height: 1,
width: 0
},
position: 'absolute',
width: widthPercentageToDP('100%'),
zIndex: 8,
borderTopColor: 'transparent',
bottom: keyboard,
justifyContent: 'center'
},
upperCaseLabel: false
}}>
...
And then you can customize as you want
To change icon I do this:
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ focused }) => (
<FastImage
source={focused ? homeOrange : homeGrey}
style={{ flex: 1, width: null, height: null }}
resizeMode="contain"
/>
),
tabBarLabel: 'Home'
}}
/>