how to place tab in the top of the page

[madevlb]

As title?

[s-mikulich]

Hello! I have the same question.

[jcteague]

I did this by absolute positioning the tab bar:

const styles = Object.assign({},appStyle,StyleSheet.create({
  tabBar:{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    marginTop:5,
    ...
  },

<TabNavigator tabBarStyle={styles.tabBar}>

[joncursi]

This only works for iOS. For Android, changing the positioning of the tab bar will visually place it there, but physically the tab bar still occupies the same space in the component tree.

Ideas?

[joncursi]

Is there some sort of container component that tabBarStyle is applied within? My guess is that tabBarStyle is not being applied on the top-level View container, which is the white strip being left behind when the tab bar position is changed.

[joncursi]

This guy: https://github.com/exponentjs/react-native-tab-navigator/blob/6d961151405a1adacc21997e44edc6f3e0e75357/TabNavigator.js#L88

We ought to have the ability to change the styles on it. tabBarStyle is being applied to its child, rather than the top-most parent itself.

[joncursi]

Looks like there is an undocumented prop style that can be applied on this top-most container element. I tried setting the color of this container to transparent, the height to 0, all to no avail. However, it does respond to margin. So, here's my hack to work around this:

      <TabNavigator
        tabBarStyle={ ... }
        style={{
          marginBottom: -50,
        }}
      >

The negative value on marginBottom will shift it down, off the screen, so that it is no longer visible.

[rk-forfuns]

thanks

[ptomasroos]

Will close since this issue is more than a year, feel free to a open a new if this is still a issue.