search

torgeadelin / react-native-animated-nav-tab-bar

A simple and customisable React Native component that implements an animated bottom tab bar for React Navigation.
MIT License
889 stars 102 forks source link

Floating:true not working. being styled as standard tab instead. #108

Closed suraj-ingle closed 2 years ago

suraj-ingle commented 2 years ago

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 2 years ago

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