React-native-router-flux: Question: is there any easy way to set a navigation title based on a component or a redux state?

Created on 4 Jul 2016  路  4Comments  路  Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

  • react-native-router-flux v3.30.0
  • react-native v0.28.0

Expected behaviour

Set the navigation title either based on component's internal state, or a redux value. the ideal case would be something like:

componentWillReceiveProps(nextProps) {
  this.context.navBar.setTitle(nextProps.whatever.name);
  // or
  this.props.navBar.setTitle(nextProps.whatever.name);
}

Actual behaviour

In NavBar.js implementation there's:

renderTitle(childState, index:number) {
    const title = this.props.getTitle ? this.props.getTitle(childState) : childState.title;

As far as I understand, when the navigation is rendering it looks for getTitle() or a static title being set on <Scene />, I have no idea how to connect that to a component's internal state / props (which can change asynchrony) or a redux store.

Most helpful comment

componentWillReceiveProps(nextProps) {
Actions.refresh({title: nextProps.whatever.name})
}

All 4 comments

Real world example, if I pass an id to a component Actions.showPost({ id: 123 }) it renders the scene for <Post />, then the component will fetch the post from network, and then I want to update the navigation title to show the post's title up there...

componentWillReceiveProps(nextProps) {
Actions.refresh({title: nextProps.whatever.name})
}

@sarovin thank you!

or in your Actions[scene]() call works as well, on the previous component:
Actions.details({title:getDisplayName()})

Was this page helpful?
0 / 5 - 0 ratings