How can I create a custom tabbar using React Navigation 5? - reactjs

Question

So, here is my tabbar:
I tried to use just a common navigation between screens when pressing the button, but that's not working in my situation. Also all of the methods I saw in google are deprecated. Is there a possibility to make a custom tabbar in React Navigation 5?

Answer 1

You should implement your custom tab bar, I created one as you have shown in the screenshot
Live Snack
import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '#expo/vector-icons';
function HomeScreen() {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
}}>
<Text>Home!</Text>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
function MyTabBar({ state, descriptors, navigation }) {
return (
<View
style={{
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
flexDirection: 'row',
backgroundColor: '#ccc',
height: 60,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
justifyContent: 'space-between',
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, justifyContent: 'space-between' }}>
{route.name === 'Home' ? (
<MaterialCommunityIcons
style={{ alignSelf: 'center' }}
name="home"
size={22}
color={isFocused ? '#673ab7' : '#222'}
/>
) : (
<MaterialCommunityIcons
style={{ alignSelf: 'center' }}
name="settings"
color={isFocused ? '#673ab7' : '#222'}
size={22}
/>
)}
<View
style={{
width: 8,
height: 3,
backgroundColor: isFocused ? '#00f' : '#777',
alignSelf: 'center',
}}
/>
</TouchableOpacity>
);
})}
</View>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
showIcon: true,
showLabel: false,
activeTintColor: 'red',
}}
tabBar={(props) => <MyTabBar {...props} />}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}