expo / ex-navigation

Route-centric navigation for React Native
997 stars 201 forks source link

Change the tabBar style in react-native #399

Open KakarN opened 7 years ago

KakarN commented 7 years ago

I am using ex-navigation for navigating inside my app. Everything works fine, except I want to change the white color line that's above the tabBar.

rsz_whatsapp_image_2017-01-25_at_111255_pm

export default class TabEntry extends React.Component {
    render() {
        return (
            <NavigationProvider router={Router}>
                <TabNavigation id="main" navigatorUID="main" initialTab="home"
                               tabBarColor="#22313F" tabBarHeight={48}>

                    <TabNavigationItem id="notification">
                        <StackNavigation id="notification" navigatorUID="notification" initialRoute={Router.getRoute('notification')}/>
                    </TabNavigationItem>

                    <TabNavigationItem id="home">
                        <StackNavigation id="home" navigatorUID="home" initialRoute={Router.getRoute('home')}/>
                    </TabNavigationItem>

                </TabNavigation>
            </NavigationProvider>
        )
    }
}

I have tried changing the style of the tabBar by applying borderWidth and BorderColor like the below but it didn't help me:

<TabNavigation id="main" navigatorUID="main" initialTab="home"
               tabBarColor="#22313F" tabBarHeight={48}
               tabBarStyle={{borderWidth: 1, borderColor: 'red'}}>

What am I missing somethig? Could you please help me.

anhtuank7c commented 7 years ago

@KakarN They already have props tabBarStyle

<TabNavigation 
    id="tabbar"
    tabBarStyle={{ borderTopWidth: 5, borderTopColor: 'green' }}
/>