Floating:true not working. being styled as standard tab instead.
suraj-ingle opened this issue · 1 comments
suraj-ingle commented
Here's the configuration I've done for styling my bottom tab nav
<Tabs.Navigator
// default configuration from React Navigation
tabBarOptions={{
activeBackgroundColor: colors.secondary,
activeTintColor: colors.white,
inactiveTintColor: colors.black,
tabStyle: {
bottom: keyboard.keyboardShown ? -100 : -10,
},
keyboardHidesTabBar: true,
dotCornerRadius: 10,
}}
appearence={{
floating: true,
topPadding: 5,
bottomPadding: 5,
horizontalPadding: 5,
dotCornerRadius: 10,
dotSize: 'small'
}}
initialRouteName="Feed"
tabBar={(props) => <FloatingTabBar {...props} />}
>
It used to work perfectly but i had to restart my project (npx react-native init
and copy paste all the js files).
I am unable to use @react-native-community/masked-view. Instead I am using @react-native-masked-view/masked-view. Wonder if that's what is causing this.
here's a screenshot of current results
suraj-ingle commented
Oopsy daisy.
Didn't read the doc about appearance
- appearence
error
Changing appearence
to appearance
solved my issue.
Thanks for creating such beautiful component for us devs ;D