Custom Tab Bar React Navigation 5
23,803
Solution 1
here is demo: https://snack.expo.io/@nomi9995/createbottomtabnavigator-%7C-react-navigation
you can use tabBar
props to make custom TABBAR
<NavigationContainer>
<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
MyTabBar Component
function MyTabBar({ state, descriptors, navigation }) {
return (
<View style={{ flexDirection: 'row',backgroundColor:"#F4AF5F",height:50,borderRadius:50,justifyContent:"center",alignItems:"center" }}>
{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"
accessibilityStates={isFocused ? ['selected'] : []}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1, alignItems:"center" }}
>
<Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
{label}
</Text>
</TouchableOpacity>
);
})}
</View>
);
}
Solution 2
The key to this is to add the style position: 'absolute'
to the outer <View>
container on your custom TabBar. This will get rid of the white background issue.
Author by
Tony Starkus
Updated on July 09, 2022Comments
-
Tony Starkus almost 2 years
I'm trying to make a tab bar like in the picture bellow, using React Navigation.
I tried some codes, but nothing worked. Some codes are from previous React Navigation Version. The really problem is make the tab bar have a margin from from bottom and both sides, and borders rounded.
Anyone can help me please?!
-
Tony Starkus about 4 yearsYeah, with that I can customize the content inside tab bar. But I can't make rounded border for tab bar and I can't make a margin between tab bar and left/right/bottom screen.
-
Muhammad Numan about 4 yearsin demo project you can see the rounded border and you can make margin between tab by changing style ob TouchableOpacity in example
-
Tony Starkus about 4 yearsIn demo code I can see a white background that show the limit from screen page and tab bar
-
Muhammad Numan about 4 yearsyou can give style properties to adjust your tabbat
-
Tony Starkus about 4 yearsI tried override this white background but no success
-
Muhammad Numan about 4 yearsnow you can check snack.expo.io/@nomi9995/…
-
Tony Starkus about 4 yearsI forgot, sorry xD
-
Vikas Roy over 3 yearsHow to add icons?
-
Sharad S Katre over 3 yearsAny update on How we can add icons for tabs??
-
laxman khanal about 3 years@SharadSKatre May be its too late but you can add icons by replacing text with Image, or can add view with both text and image.
<Image source={require("image path")} style={styles.image} />
-
Pro over 2 yearsNo this makes the entire navbar disappear