0

Component Init is hiding behind Navigation Bar after implementing Drawer to NavBar. Without Drawer I could easily add some paddingTop to Route (root) component and the problem would get solved.

<Router renderLeftButton={this.navBarButton}>
    <Scene
      key="drawer"
      component={DrawerComponent}
      open={false}
    >
      <Scene key="main" >
        <Scene key="index" component={Init} title="First page!"  />
        <Scene key="counter" component={Counter} title="Counter" />
        <Scene key="posts" component={Posts} title="Posts" />
      </Scene>
    </Scene>
  </Router>

Component hidden behind

If I add paddingTop on root for global padding, it gives back extra padding on both Navbar and Coponent. enter image description here

I do get the desired result by adding paddingTop to each children Scenes but that would be hectic. e.g. <Scene key="index" component={Init} title="First page!" sceneStyle={{paddingTop: 64}} />

Ank
  • 168
  • 1
  • 2
  • 11

1 Answers1

0

I have yet to see a solution that does not use any type of paddingTop to solve this issue. However, instead of adding the styles to each scene, you can add it to the Router that will apply to every scene. 

<Router renderLeftButton={this.navBarButton} sceneStyle={{ paddingTop: 65 }}>
  <Scene />
  <Scene />   
</Router>
davidhu
  • 9,523
  • 6
  • 32
  • 53
  • Hi, I did tried adding the padding on Router but it renders an unusual padding on both NavigationBar AND component... You can see the effect on second screenshot on the above question. For reference I've uploaded a repo for this, please take a look: https://github.com/akusany2/RNBoiler/blob/master/src/Router.js – Ank Feb 05 '17 at 03:53
  • Had the same problem, I set sceneStyle prop to every scene now :( – binchik Feb 05 '17 at 05:46