[NavigationExperimental] Bug on navigation header title effect

In the first route, the navigation bar is hidden. In the second one, it’s visible and blue. When I swipe from one to another, you can see a rectangle with the background:

Important code:

_renderHeader(props) {
    const { scene: { route: { navigationBarHidden } } } = props;
    return navigationBarHidden ? null : <NavigationHeader style={{backgroundColor: '#3ec4e3'}}/>;
}

_renderScene(props) {
  const { scene: { route: { Component: SceneComponent, navigationBarHidden, passProps } } } = props;

  return (
    <View>
      {navigationBarHidden ? null : this._renderHeader(props)}
      <SceneComponent navigator={this} navigatorProps={props} {...passProps} />
    </View>
  );
}

In the first route, navigationBarHidden is true.

• React Native version: 0.32.0
• Platform(s) (iOS, Android, or both?): iOS
• Operating System (macOS, Linux, or Windows?): macOS 10.12

[davidruisinger]

@brunolemos besides the “bug” you have this already looks great. I wonder hwo you achieved this because I also don’t have a NavigationHeader on my first screen but when I’m sliding to go back from the second screen (where I do have a Navigation Header), the header is also visible on the first screen until the transition is completed…

My Code looks something like this:

const _renderHeader = navigatorProps => {
  if (navigatorProps.scene.index != 0) {
    return (
      <NavBar
        title={ navigatorProps.scene.route.title }
        onLeftPress={ popScreen }
        {...navigatorProps}
      />
    )
  }
  return false
}

I would really appreciate if you could share your code.

Thanks!

[davidruisinger]

@brunolemos I ended up hacking into the core components of NavigationExperimental to achieve the desired behavior. This is most likely not the way to go but it works for me for now. I uploaded the files that I used/modified to this Gist

Then I use the header like this:

  import NavigationCardStack from '..PATH_TO_MY_MODIFIED_FILES/NavigationCardStack'
  import NavBar from '..PATH_TO_MY_MODIFIED_FILES/NavBar'

  const _renderHeader = navigatorProps => (
    <NavBar
      onLeftPress={ popScreen }
      {...navigatorProps}
    />
  )

  <NavigationCardStack
    renderHeader={ _renderHeader }
    ... />

And then my initial route has a property hideNavBar

routes: [
  {
    key: 'home',
    title: 'Home',
    hideNavBar: true,
    ...
  },
]
...

NOTE: This is just something I came up quick and dirty. There are also some other modifications in the Gist that I used to further customize it to my needs. There are a lot of limitations with this (e.g. this only works if the first route has NO header, for routes coming up after you’d need to do some further tweaking). Take this as an inspiration do create your own 😉