Dynamic Title

[digitalhobo]

Hello,
Thanks for the great module - Is their any way to dynamically change the sate of a title and navbar.

For example.
<Route key="UserCredentials" name="UserCredentials" hideNavBar={this.state.UserCredentialsNavBar} component={UserCredentials} initial={ false } title={this.state.title} schema="withoutAnimation" />

And then I would have a listener which would change the state this.state.UserCredentialsNavBar 'true' or 'false' and this.state.title 'Some title' or 'Some other title'.

I tried but didn't get any where.

Thanks in advance.
:0)

[aksonov]

I've just added support to set properties without navigator transition using Actions.refresh(props), please try it (version 2.3.1)

[digitalhobo]

Thanks aksonov.
I may not be understanding you properly.
So, for instance if I wanted to change the state of the title. I would call
Actions.refresh({title: 'Some other title'})
Many thanks for getting back to me.
:0)

[digitalhobo]

My bad, its all working great. Thanks very much for your help aksonov. Much appreciated. :0)

[shaharz]

I'm running into an issue that seems like a bug here with setting the title dynamically. It seems like Actions.refresh sets it for all routes, overriding their static titles.

In my case, I have a master-detail setup where the master route has a title prop and the detail route title is only set dynamically. When I'm in the detail route and the title changes what happens is that both the title and the back button change to the same text. When going back to the master, the dynamic title stays on (rather than going back to its schema title).

I'm new to React Native so I'm not sure if this is by design or not...?

Thanks!

[greatwitenorth]

Is there a way to set it for a specific scene even if I'm not currently on that scene? ie

Actions.refresh({key: 'home', title: 'My new title'})

[JuHwon]

@greatwitenorth whats your exact use case?
e.g. if you are navigating to a view with the key view2 you can set the title with the props like this

Actions.view2({ title: 'My New Title' })

[greatwitenorth]

My issue was that I wasn't navigating to the scene that needed it's title updated. My screen updated the user's address, but the address was displayed as a title on a completely seperate screen.

[edencakir]

@greatwitenorth I ran into same problem. How to change the title without navigating to a new route with changed title?

[edencakir]

OK, I should have read the documentation better, it's simply
Actions.refresh({title: 'new title'})

[JeroenNelen]

@greatwitenorth did you find any decent solution?
I'm fetching the title from the state, so whenever the state changes, I want a specific view to have that value as a title. Sometimes people change the title and navigate via the back button, in that case I can't seem to define the {title: } parameter (and pass the state-value in the back action), or am I missing something?

Refreshing in one of the lifecycle methods of the component (or in render), makes the app crash as it probably gets into an infinite loop due to changing state properties.

Kind regards,

[jondbm]

@JeroenNelen I had a similar issue and solved it by putting the refresh in ComponentDidMount and setting the state in Redux reducers - I tie a Redux action into every user action that changes the title, update the app state, and the props the refresh reads update too.

So basically something like this line in ComponentDidMount:

Actions.refresh({title: this.props.state.myapp.myvalue})

[JeroenNelen]

@jondbm thanks for the suggestion, but we've decided to switch to a different navigator.

Kind regards,

[edencakir]

@JeroenNelen which navigator are you using right now? (If you don't mind sharing)

[jaynakus]

Why below setup is not refreshing right button? console.log writes the new value, but the right title never gets refreshed?

const RouterWithRedux = connect()(Router);

export class App extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    let title = '(' + this.props.basket.length + ')';
    console.log(title);
    return (
      <RouterWithRedux rightTitle={title} onRight={() => alert('All right')}>
        <Scene key="root">
          <Scene key="home" component={Main} title="Main"/>
          <Scene key="page1" component={SomePage} title="SomePage"/>
        </Scene>
      </RouterWithRedux>
    );
  }
}
App.propTypes = {
  dispatch: PropTypes.func.isRequired
};

// Wrap the component to inject dispatch and state into it
export default connect(
  state => {
    return {basket: state.basket.items}
  }
)(App);