Bottom Navigation Tab position issue

[vinodsptharsha]

🐛 Bug Report

I recently updated UI Kitten library to 5.3.0 from 5.1 (till this version no issues) and my bottom navigation tab bar is broken and it got pushed to the middle of the page. I am using expo-router (1.5.03) for navigation

To Reproduce

Steps to reproduce the behavior:

• Create a expo-router project and integrate with UI Kitten
• Create a Tab layout with below code

  
  import React from 'react'
  import { Icon, BottomNavigation, BottomNavigationTab } from '@ui-kitten/components'
  import { Tabs } from "expo-router";

const BottomTabs = ({navigation, state}) => {

return (
    <BottomNavigation style={{marginBottom: 4, paddingHorizontal: 4, paddingVertical: 8}} selectedIndex={state.index}
    onSelect={index => navigation.navigate(state.routeNames[index])}>
        <BottomNavigationTab icon={<Icon name="ios-list-outline" pack='ionicons'/>} title={`Manage`}/>
        <BottomNavigationTab icon={<Icon name="ios-add-outline" pack='ionicons'/>} title={`Create`}/>
        <BottomNavigationTab icon={<Icon name="ios-trash-bin-outline" pack='ionicons'/>} title={`Deleted`}/>
    </BottomNavigation>
)

}

export default function Layout() { return ( <Tabs screenOptions={{headerShown: false}} tabBar={props => <BottomTabs {...props} />}>

) }; ``` ## Expected behavior Bottom tab bar position need to be fixed at the bottom. ## UI Kitten and Eva version | Package | Version | | ----------- | ----------- | | @eva-design/eva | 5.3.0 | | @ui-kitten/components | 5.3.0 | ## Environment information System: OS: macOS 13.3.1 CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz Binaries: Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node Yarn: 3.2.4 - /usr/local/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm Watchman: 2023.03.27.00 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4 IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: 14.3/14E222b - /usr/bin/xcodebuild npmPackages: react: 18.2.0 => 18.2.0 react-native: 0.71.6 => 0.71.6

[vinodsptharsha]

I figured out that the problem is coming from the BottomNavigation component.

[vinodsptharsha]

I tried replacing both BottomNavigation and BottomNavigationTab, with TabBar and Tab respectively and it works as expected. The only indicator is at the wrong position. What might be causing BottomNavigation to behave differently?

[ateebplayz]

Same Issue. Below is my code, any updates? `import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { TabBar, Tab, Layout, Text } from '@ui-kitten/components';

const { Navigator, Screen } = createBottomTabNavigator();

const UsersScreen = () => ( <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

USERS

);

const OrdersScreen = () => ( <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

ORDERS

);

const BottomTabBar = ({ navigation, state }) => ( <BottomNavigation selectedIndex={state.index} onSelect={index => navigation.navigate(state.routeNames[index])}>

<BottomNavigationTab title='ORDERS'/>

);

const TabNavigator = () => ( <Navigator tabBar={props => <BottomTabBar {...props} />}>

); export const AppNavigator = () => ( );`

[vinodsptharsha]

As a temporary solution, I have replaced BottomNavigation with the TabBar component.

[vinodsptharsha]

Tried with the latest code after clearing the npm cache and node modules but the issue still persists with the BottomNavigation.