React-native-router-flux: Dynamic changing title tabbar

[hoangdoan267]

Version

Tell us which versions you are using:

• react-native-router-flux v3.37?.?
• react-native v0.40.0

I try to change the title of tabbar using props/state when click my button, but nothing happened. What should I do?

[damir-sirola]

Try calling Actions.refresh() after you set new title

[SoldierCorp]

I'm using the following code to set a dynamic title of my navbar:

ComponentOne.js

<TouchableNativeFeedback
        background={TouchableNativeFeedback.SelectableBackground()}
        onPress={() => Actions.componenttwo({title: 'Food'})}
      >
      <View>
          .......
      </View>
</TouchableNativeFeedback>

In my Router.js where I have my Scenes

<Scene
    key="componenttwo"
    component={ComponentTwo}
    backTitle={'Component One'}
    getTitle={props.title} //this is the one
  />

Hope it helps!

[hoangdoan267]

@SoldierCorp Thanks for your great example. But how can I do if I want to use react-native-router-flux with redux? I stored the titles of tabs in my reducers.

[borgand]

I'm using redux too and in my case the rightTitle is a username that is stored in the global redux state. There are several ways this username can change - a user action, a API call, redux-persist dehydrating the store (i.e. changing from null to a value).

In all cases the router should refresh the title in the navbar, but it doesn't and I could not figure out the correct way to hook in the Actions.refresh() too.

BTW, by using Reactotron, I can see that my React component NavigationRouter does receive the props, so I tried even this:

  componentWillReceiveProps (newProps) {
    console.tron.display({preview: "Received new props", value: newProps})
    Actions.refresh()
  }

But that only messed with the navigation flow when the user changed the username, but did not refresh the right title.

How can I make the navbar more reactive on the props?

[denghejun]

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