How can I align bottom tab navigation to bottom?

Question

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)