react-native-router-flux tabbar position top

Question

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>

Answer 1

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