I am currently making custom bottom tab navigator because I had issues with the react native safe context where the black bar on the phone goes on top of the text on the bottom tab.
And I would like to have it on bottom.
I have also basic bottom tab navigation but it has one issue on some devices that has following black bar on the bottom of the phone. I tried to apply react-native-safe-area-context
but it didn't seem to work or help.
What is the simplest thing I can do to fix this?
This is my basic bottom tab navigation:
const Tab = createBottomTabNavigator()
const HomeTab = () => {
return (
<Tab.Navigator
screenOptions={({ route, navigation }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName
if (route.name === 'Koti') {
iconName = focused ? 'ios-home' : 'ios-home-outline'
} else if (route.name === 'Palvelut') {
iconName = focused ? 'ios-pin' : 'ios-pin-outline'
} else if (route.name === 'Ukk') {
iconName = focused ? 'ios-help-circle' : 'ios-help-circle-outline'
} else if (route.name === 'Omat tiedot') {
iconName = focused
? 'ios-person-circle'
: 'ios-person-circle-outline'
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />
},
tabBarActiveTintColor: colors.red,
tabBarInactiveTintColor: colors.black,
tabBarStyle: [
{
display: 'flex',
},
null,
],
headerShown: true,
headerTransparent: true,
headerTitleAlign: 'center',
headerTitleStyle: { color: colors.white, fontSize: 20 },
headerRight: () => (
<>
<Pressable
onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
>
<Ionicons
testID='DrawerMenu'
name='ios-menu-outline'
size={40}
color={colors.white}
/>
</Pressable>
</>
),
})}
>
<Tab.Screen
name='Koti'
component={HomeStack}
options={{ headerTitle: 'Vahingonsattuessa', headerShown: false }}
/>
<Tab.Screen name='Palvelut' component={ServicesScreen} />
<Tab.Screen
name='Ukk'
component={UkkScreen}
options={{ headerTitle: 'Usein kysytyt kysymykset' }}
/>
<Tab.Screen name='Omat tiedot' component={ProfileScreen} />
</Tab.Navigator>
)
}
and this is my custom tab navigation:
import * as React from 'react'
import { Text, Pressable, View, StyleSheet } from 'react-native'
import {
useNavigationBuilder,
TabRouter,
TabActions,
createNavigatorFactory,
} from '@react-navigation/native'
const TabNavigator = ({
initialRouteName,
children,
screenOptions,
tabBarStyle,
contentStyle,
}) => {
const { state, navigation, descriptors, NavigationContent } =
useNavigationBuilder(TabRouter, {
children,
screenOptions,
initialRouteName,
})
return (
<NavigationContent>
<View style={[{ flexDirection: 'row' }, tabBarStyle]}>
{state.routes.map((route) => (
<Pressable
key={route.key}
onPress={() => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
})
if (!event.defaultPrevented) {
navigation.dispatch({
...TabActions.jumpTo(route.name),
target: state.key,
})
}
}}
style={{ flex: 1 }}
>
<Text>{descriptors[route.key].options.title || route.name}</Text>
</Pressable>
))}
</View>
<View style={[{ flex: 1 }, contentStyle]}>
{state.routes.map((route, i) => {
return (
<View
key={route.key}
style={[
StyleSheet.absoluteFill,
{ display: i === state.index ? 'flex' : 'none' },
]}
>
{descriptors[route.key].render()}
</View>
)
})}
</View>
</NavigationContent>
)
}
export const CustomBottomTabNavigator = createNavigatorFactory(TabNavigator)