Re-render component on change language

[IronTony]

Hi,

sorry for the question, but how can I re-render the translated strings based on language switcher? I am using this method I18n.t('greeting')

[IronTony]

I have found the problem of the solution, I forgot to use this.props.setLocale. But I have another question, I am using redux-persistent, and the i18n isn't persistent, any hint? Now I can change the locale on the fly, but if I restart the app the main locale is the one specified at the start I18n.locale = 'en'.

[matthieupinte]

Hi,

You can set your local in the callback of your redux-persist, when it's rehydrated... no ? https://github.com/rt2zz/redux-persist#persiststorestore-config-callback

persistStore(store, [config, callback])

[IronTony]

Hi, thank you for the answer. Unfortunately I have some problem implementing it. Following the examples in the project page, I did this:

_components/index.js_
........
<Text>{i18n.t('myTitle')}</Text>
.......
.......
<Button onPress={() => this.props.setLocale('en')} title="en" />
<Button onPress={() => this.props.setLocale('de')} title="de" />

_i18n/index.js_
import I18n from 'react-native-redux-i18n';
import translations from './translations';

I18n.fallbacks = true;
I18n.translations = translations;

console.log('Locale', I18n);  <---- This log always prints the device language
export default I18n;

_reducers/index.js_
import { reducer as i18n } from 'react-native-redux-i18n';

const reducers = {
   i18n,
  .....,
  .....,
};

export default reducers;

_store/index.js_
......
......

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistCombineReducers(persistConfig, reducers);
const sagaMiddleware = createSagaMiddleware();
const enhancers = compose(applyMiddleware(sagaMiddleware));
const store = createStore(persistedReducer, enhancers);
const persistor = persistStore(store, null, () => {....... what should I pass here ......?});
sagaMiddleware.run(rootSagas);
export { store, persistor };

Hope in some help, please. Thank you in advance

[matthieupinte]

• First you need to use the Loc component :

  
  _components/index.js_

... <Button onPress={() => this.props.setLocale('en')} title="en" />

- Second you need to use the `setLocale` action directly in your persist callback :

store/index.js

... const store = createStore(...) const persistor = persistStore(store, null, () => { const { i18n } = store.getState()

setLocale(i18n.locale) })

Maybe later, I can try to work directly with `redux-persist` to handle `REHYDRATE` action in my i18n reducer...

[matthieupinte]

I will close this issue, because it's not directly related to react-native-redux-i18n

[IronTony]

Maybe later, I can try to work directly with redux-persist to handle REHYDRATE action in my i18n reducer...

Thanks for the help, and yes it would be great!