We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tab bar offset is wrong on iOS devices except for iPhone SE - the bar is not considering the safe zones.
Steps to reproduce the behavior:
The example in the docs:
https://akveo.github.io/react-native-ui-kitten/docs/components/bottom-tabs/overview#bottomnavigation
https://snack.expo.dev/@mirkokiefer/playground?platform=web
"@eva-design/eva": "^2.2.0", "@ui-kitten/components": "^5.3.1", "@ui-kitten/eva-icons": "^5.3.1",
The text was updated successfully, but these errors were encountered:
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
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
Sorry, something went wrong.
No branches or pull requests
馃悰 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
The text was updated successfully, but these errors were encountered: