Hello, I am new to React native and would like to get a help with this situation. How can I create this kind of navigation ?
It's not a duplicate of Similar question
I don't want to use CreateBottomTabNavigator, because as you can see, navigation bars are at the top.
You will have to use a custom tabbar to implement this.
You can see the code for the custom tab bar here
function MyTabBar({ state, descriptors, navigation, position }) {
return (
<View style={{ flexDirection: 'row', backgroundColor: 'blue' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Animated.Text
style={{
color: isFocused ? 'white' : 'grey',
marginVertical: 10,
}}>
{label}
</Animated.Text>
<View
style={{
width: '80%',
backgroundColor: isFocused ? 'white' : 'transparent',
height: 5,
marginTop: 'auto',
}}></View>
</TouchableOpacity>
);
})}
</View>
);
}
And you will have to use it in your Navigator like below
<Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}>
Output will be
You can try out the snack for this https://snack.expo.io/am8bsZI-4
You can change the colors, height and margins as per you need.
Other options are to use the renderIndicator or the indicatorStyle but those wont take the width properly so the above would be the best option.