CODEWITHSUNDEEP
reactjsreact-nativereact-reduxreact-native-router-flux
1110
1110

Reputation: 6839

How to change navigation bar title when view loads

I need to read one value and use it to set title in navigation bar.
I am using react-native-router-flux and I also use redux.
I navigate to view where I set language and fire redux action.
All views receive new state and in render() method I can call:

console.log(this.props.language.language)

This is set through redux. And I want to change navigation bar title like:

Actions.refresh({title: I18n.t('main', {locale: this.props.language.language})})

But this slows down application and don't work.
But don't know where to put it if not in render method.

Upvotes: 5

Views: 1876

Answers (5)

Bishnu Pada Chanda
Bishnu Pada Chanda

Reputation: 5416

You can change navigation title by setting navigation params as follows:

this.props.navigation.setParams({
    title: 'YOUR_DESIRED_TITLE_HERE',
});

Upvotes: 1

eden
eden

Reputation: 6103

I guess what you're missing is the key of the component, where your keys are defined in Router > Scene tree.

Actions.refresh({key: 'somekey', title: I18n.t('main', {locale: this.props.language.language})})

However, it may just not about it, and from my experiences, I can help you with a sneaky hack. This is a workaround I discovered when Actions doesn't work even though component has already been mounted.

Just wrap your action with a timeout, and it works. This workaround originally inspired from the fact that firing two Action commands consecutively will omit the first one.

Place it in componentDidMount(){} or in componentWillReceiveProps(){} if you like Redux to trigger this function as well.

setTimeout(() => {
   Actions.refresh({key: 'somekey', title: I18n.t('main', {locale: this.props.language.language})}, 200); // give him some space!
});

Hope this is really the case.

Upvotes: 0

Alex Shtromberg
Alex Shtromberg

Reputation: 837

If I clearly understand your question you should use React Lifecycle method componentWillReceiveProps()

componentWillReceiveProps(nextProps){
    let { language } = nextProps.language;
    if (language && language != this.props.language.language) {
      Actions.refresh({title: I18n.t('main', {locale: language})})
    }
}

Upvotes: 0

grizzthedj
grizzthedj

Reputation: 7505

You could try storing the current language in a closure that is globally accessible throughout the application.

This will allow you to set the language state in the constructor of your components, which ensures that it will be present throughout the life cycle of the component.

// Settings.js
var Settings = (function() {
  var language = "EN"; // The default language

  var getLanguage = function() {
    return language;
  };
  var setLanguage = function(lang) {
    language = lang;
  };

  return {
    getLanguage: getLanguage,
    setLanguage: setLanguage
  }
})();

export default Settings;

When you want to get the current language, and set state in your component:

import Settings from './Settings';
... 
constructor(props) {
  super(props);
  this.state = {
    language: Settings.getLanguage()
  }
}

When you want to set or change the current language:

import Settings from './Settings';
... 
Settings.setLanguage('FR');

// Do something like reload here?

Upvotes: 0

Tom Walters
Tom Walters

Reputation: 15616

You shouldn't be modifying state in your render methods - this will result in an infinite loop of changing state causing re-renders.

Instead you should put this in a lifecycle method:

componentDidMount () {
  Actions.refresh(...)
}

Which will be fired when the component is first mounted.

Upvotes: 0

Related Questions