[NavigationExperimental] Best way to dynamically change content of overlay from scene?

I want to control / update content of overlay from the scene component. For example, I want to dynamically change nav bar title based on user interactions inside a scene without doing any navigation.

Afaik, the following is a simplified version of how scene and overlay are rendered inside a AnimatedView or CardStack.

<AnimatedView>
  {scene}
  {overlay}
</AnimatedView>

Correct me if I am wrong, but currently, it seems the only way to trigger rerendering of overlay from the scene is to update navigationState. That means we need to use a reducer to create a new navigationState, which will cause rerendering of scene as well as overlay. It sounds like an overkill and too heavy work for such a trivial task.

Another way I can think of is to expose a new API via context that can override overlayProps. Here’s a simplified code snippet for the concept:

class ContainerWithContext extends Component {
  getChildContext() {
    return {
      setOverlayProps: (overlayProps) => this.setState({overlayProps})
    };
  }
  renderOverlay() {
    return this.props.renderOverlay({
      ...this.props,
      ...this.state.overlayProps,
    });
  }
  render() {
    return (
      <View>
        {this.renderScene()}
        {this.renderOverlay()}
      </View>
    );
  }
}

const Overlay = ({title}) => <View><Text>{title}</Text></View>;

class Scene extends Component {
  static contextTypes = { setOverlayProps: PropTypes.func }

  updateNavTitle(title) {
    this.context.setOverlayProps(title);
  }
}

I can help with PR if you think this is a good idea. What are your thoughts on this?

[jmurzy]

It would be overkill to use context here. There seems to be multiple ways to approach this. But I’m not convinced this belongs within NavigationExperimental. The low level nature of NavigationExperimental enables greater abstractions to be built up in higher layers.

Also, NavigationAnimatedView is deprecated. As for NavigationTransitioner, renderScene and renderOverlay are also deprecated. NavigationTransitioner now delegates the rendering of all its children to a user provided render function. This addresses the issue discussed here. A nice side effect of this is that it allows full control over both the scene and overlay components.

That means you can just pass in a ref (to your overlay) in props to your scenes and just call a function directly on your overlay component to mutate its internal state. Let me know if this doesn’t make sense and I’ll put together an example. Oh and then there is Redux 😆

🍺

[RichardLindhout]

@jmurzy What can I do to reference my header in e.g. my scenes?

I can’t find examples for this. I need to send scrollY positions to my header component to do animation.