BottomNavigationTab has wrong offset on iOS

[mirkokiefer]

🐛 Bug Report

Tab bar offset is wrong on iOS devices except for iPhone SE - the bar is not considering the safe zones.

To Reproduce

Steps to reproduce the behavior:

The example in the docs:

https://akveo.github.io/react-native-ui-kitten/docs/components/bottom-tabs/overview#bottomnavigation

Expected behavior

Link to runnable example or repository (highly encouraged)

https://snack.expo.dev/@mirkokiefer/playground?platform=web

UI Kitten and Eva version

 "@eva-design/eva": "^2.2.0",
 "@ui-kitten/components": "^5.3.1",
 "@ui-kitten/eva-icons": "^5.3.1",

[danya0365]

Your tabbar must wrap inside SafeAreaLayout

from

const BottomTabBar = ({ navigation, state }) => (
  <BottomNavigation
    selectedIndex={state.index}
    onSelect={index => navigation.navigate(state.routeNames[index])}>
    <BottomNavigationTab
      title='USERS'
      icon={ props => <Icon {...props} name='person-outline' /> }
    />
    <BottomNavigationTab title='ORDERS'/>
  </BottomNavigation>
);

change to

const BottomTabBar = ({ navigation, state }) => (
  <View
    style={{
      left: 0,
      right: 0,
      bottom: 0,
      paddingBottom: 64,
    }}
  >
    <BottomNavigation
      selectedIndex={state.index}
      onSelect={(index) => navigation.navigate(state.routeNames[index])}
    >
      <BottomNavigationTab
        title="USERS"
        icon={(props) => <Icon {...props} name="person-outline" />}
      />
      <BottomNavigationTab title="ORDERS" />
    </BottomNavigation>
  </View>
);

paddingBottom value must dynamic calculate from react-native-safe-area-context

for example

import { useSafeAreaInsets } from "react-native-safe-area-context";

const BottomTabBar = ({ navigation, state }) => {
   const safeAreaInsets = useSafeAreaInsets();

   return (
  <View
    style={{
      left: 0,
      right: 0,
      bottom: 0,
      paddingBottom: safeAreaInsets.bottom,
    }}
  >
    <BottomNavigation
      selectedIndex={state.index}
      onSelect={(index) => navigation.navigate(state.routeNames[index])}
    >
      <BottomNavigationTab
        title="USERS"
        icon={(props) => <Icon {...props} name="person-outline" />}
      />
      <BottomNavigationTab title="ORDERS" />
    </BottomNavigation>
  </View>
)};

for example project https://github.com/danya0365/expo-react-native-uikitten-with-auth-middleware

[greenfrvr]

@mirkokiefer BottomNavigation component is not responsible for applying device insets. You could check Kitten Tricks repo – there is an example of how to use it with react-native-safe-area-context.