CODEWITHSUNDEEP
react-nativetabbarreact-native-router-flux
Saravanabalagi Ramachandran
Saravanabalagi Ramachandran

Reputation: 8899

react-native-router-flux tabbar position top

How to change the position of the tabbar? I hope for many apps, there needs to be a tabbar on top rather than having that at bottom...

I'm expecting something like this:

<Router createReducer={reducerCreate}>
    <Scene key="somekey" tabs={true} 
        tabBarStyle={{position:'top'}}>         <==  How do I do this?

             # My tabs here as scenes

    </Scene>
</Router>

Upvotes: 2

Views: 3033

Answers (2)

Eliran Azulay
Eliran Azulay

Reputation: 231

You can also use the property:

tabBarPosition='top'

<Scene tabBarPosition='top' tabs={true} key="myTabBar" >

see the doc https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#tabs-tabs-or-scene-tabs

Upvotes: 3

Gui Herzog
Gui Herzog

Reputation: 5615

Because the tabBar has an absolute positioning. You have to set the top attribute.

tabBarStyle={{top:0}}

You have to consider the Status Bar's height and NavBar's height, in order to have a correct positioning.

p.s: I don't know if you are aware of this, but avoid using inline-styles. If it was only for the sake of the example, dismiss my advice. :P

Upvotes: 7

Related Questions