React-native-router-flux: Custom/Dynamic screen title in NavBar

[wzywno]

Hi,
I want to change title in NavBar dynamically based an what I get from server after the Component is constructed.

Is there any easy way to do that?
I tried using static renderNavigationBar(props) in my screen but still this not support changing title after Component in created.

The only solution that I am thinking about is to set hideNavbar={true} for my screen and add custom header.

Version

• react-native-router-flux v3.1.5
• react-native v0.2.2

[Elyx0]

I'm currently using static renderNavigationBar(props) in my classes with Redux.

  static renderNavigationBar(props) {
    return <Header title="DefaultTitle" connectStore='myComponentStore' />;
  }

Header.js has a custom mapStateToProps that connects the given store using the connectStore prop.

function mapStateToProps(state, ownProps) {
  return { [ownProps.connectStore]: state[ownProps.connectStore] };
}

This way my static header can react to changes dispatched via redux after the server has given me the info and use the values as the title.

For simple cases though, the main component could simply do some Actions.refresh({title:'newTitle'}) I think it would get passed to renderNavigationBar,

[paulwcy]

Had the same issue in our app. Child screen titles are not always known ahead of time. Found a solution/workaround on version 2.3.1.

Define sub-screen with title = ""
<Route name='VideoScreen' component={VideoScreen} schema='sub' title='' type='push'/>

And when segueing to VideoScreen above, pass in title:
Actions.VideoScreen({title:"New dynamic title"})

[greatwitenorth]

I'm trying to dynamically render the right button. I have the following in my scene I'm navigating to:

  _renderRightButton(){
    return (
      <Text>{'right'}</Text>
    )
  }

  componentDidMount(){
    Actions.refresh({renderRightButton: this._renderRightButton()})
  }

But nothing seems to render. Is there any way to dynamically render the right button from within the scene?

[aksonov]

You may use now rightButton/leftButton as React components, check latest release.

[burgalon]

I'm encountering a similar issue where I need the navigation bar to pass props from the scene component state, and so I'm not sure how to go about this.
For example: A search button on the NavigationBar button needs to route into the SearchScreen scene and pass the current search state (no Redux)

[aksonov]

@burgalon have you tried Actions.searchScreen({searchText}) or Actions.refresh({searchText}) from your navbar title?

[burgalon]

@aksonov When invoking Actions from within the component - passing props works well.
However since the Navigation bar is definer inside the Router, I'm not seeing a way to pass props from within the current component

[aksonov]

renderTitle function come with state param, you can get information about current navigationState

[burgalon]

As @aksonov suggested:
It seems like the way around it is to push the state outwards and use Actions.refresh({someState} and keep using Actions.refresh() instead of this.setState. This was the NavigationBar will be able to access the props.

[burgalon]

I guess we can close this

[greatwitenorth]

In the event I want to change the title of a previous page when using Action.pop() how would I do this? I tried doing Actions.pop({title: 'my new title' }) but it doesn't work.

[aksonov]

@greatwitenorth You have to do pop and then refresh. Putting it together would be nice addition (and different issue, btw), PR is welcome

[greatwitenorth]

@aksonov ahh got it. Didn't realize that I could do the refresh right after the pop. Sorry didn't mean to hijack this thread.

[infacq]

how do I dynamically render title as component