[NavigationExperimental] Render overlay first in NavigationAnimatedView

At the moment, the overlay is the last element rendered in the AnimationAnimatedView: https://github.com/facebook/react-native/blob/master/Libraries/NavigationExperimental/NavigationAnimatedView.js#L165

The drawback of this approach is you have to position the overlay in absolute to get it on top and then you have to manually add a marginTop to your scene if the overlay is not a true overlay, like the navigation header.

Given RN flexbox implementation does not support order property, we cannot re arrange it to be first. I dont think there is any drawback to actually renderer it first so that we can naturally leverage flexbox if needed.

@ericvicenti any though ?

Thanks

[ericvicenti]

Yeah I think we can close this issue now, as we are about to deprecate NavigationAnimatedView.

NavigationTransitioner isn’t just a better name for NavigationAnimatedView, its a simpler implementation that avoids issues like this entirely. As @jmurzy said, you are now responsible for rendering all of the scenes as well as the header/footer/underlay. Instead of renderScene, renderOverlay and renderUnderlay, you just have render.

Instead of this:

<NavigationAnimatedView
  renderScene={this._renderScene}
  renderOverlay={this._renderOverlay}
  navigationState={ns}
/>

We have this:

<NavigationTransitioner
  render={(props) => (
    <View>
      {props.scenes.map(scene => this._renderScene({ scene }))}
      {this._renderOverlay(props)}
    </View>
  )}
  navigationState={ns}
/>

So hopefully this will enable people to make more creative views that allow crazy integrations between the header and scenes. We can also build better tools and abstractions by having a more flexible interface and allowing the transitioner to do what it does best.

[ide]

Closing this based on @jmurzy’s comment. Thanks for helping out with all the Navigation diffs & issues btw 😃