React-native-router-flux: Dynamic Title

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

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)

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

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!

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'})

@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' })

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.

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

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

@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,

@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})

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

Kind regards,

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

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);

@jaynakus righttitle or right button?

The Title!

I would suggest using custom navbar, with whatever you want to be in it.

@jaynakus try putting your rightTitle and onRight into your Scene component instead of at the top RouterWithRedux level, that might work.

@jondbm putting them to root scene didn't resolve, but calling Actions.refresh() in componentWillReceiveProps did the trick ;)

const RouterWithRedux = connect()(Router);

export class App extends Component {

  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.basket.length !== nextProps.basket.length) {
      console.log(nextProps.basket.length);
      let title = '(' + nextProps.basket.length + ')';
      Actions.refresh({rightTitle: title});
    }
  }

  render() {
    let title = '(' + this.props.basket.length + ')';
    return (
      <RouterWithRedux>
        <Scene key="root" rightTitle={title} onRight={() => alert('All right')}>
          <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);

look here: https://github.com/aksonov/react-native-router-flux/issues/1922

This is awesome, is there a clean way to fade in/out the title when it switches? In my case I have the title switching when the user scrolls over 100px. It would be nice to fade the transition. Cheers.

@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

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

How can we access it in setup file?

If I have a configuration like this:

<Router>
                    <Scene key="root" navBar={NavBar}>
                        <Scene
                            hideNavBar
                            key="login"
                            component={Login}
                            initial
                        />

                        <Scene drawer
                               drawerPosition="right" drawerWidth={300}
                               key="task"
                               contentComponent={DrawerView}
                               drawerIcon={drawerIcon}
                               rightButtonImage="menu"
                               onRight={() => {
                                   Actions.drawerOpen()
                               }} hideNavBar
                        >

                            <Scene key="taskInner"
                                   leftButtonImage="arrow-back"
                                   component={TaskView}
                                   onLeft={() => {
                                       Actions.popTo('tasksList')
                                   }}
                            />
                        </Scene>

                    </Scene>
</Router>

Then Actions.task({ title: 'My New Title' }) or Actions.refresh({title: "My New Title"}) does not work. How to set title or send some properties when having a drawer?