CODEWITHSUNDEEP
javascriptreact-nativeinternationalizationmultilingual
Heril Muratovic
Heril Muratovic

Reputation: 2018

React native multi-language issue

I have small react native app where I'm trying to implement multi-language that reload components in real time when I change language.

I'm using react-native-i18n library. I have my Language component and here is the code: 

constructor(props) {
  super(props);
  this.state = { selected: 'sr_ME' };
}

async componentDidMount() {
  let currentLanguage = await this.getLocalKey('lang', 'sr_ME');
  this.setState({ selected: currentLanguage });
}

getLocalKey = async (key, defaultValue) => {
  try {
    let value = await AsyncStorage.getItem(key);
    return value != null ? value : defaultValue;
  } catch (e) {
    return defaultValue;
  }
}

storeLocalKey = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (e) { 
    // handle error if necessary...
  }
};

onValueChange(value) {
  I18n.locale = value; 
  this.setState({ selected: value }, () => this.storeLocalKey('lang', value));
  this.props.updateParentState({ 'lang': value });
}
...

The component above I'm importing on another screen like this: 

static navigationOptions = {
  header: null
};

state = {};

updateState(data) {
  I18n.locale = data.lang;
}

render() {
   return (
      <Container style={styles.container}>
        <Header style={styles.header}>
          <Left>
            <Text style={styles.headerTitle}>{I18n.t('home')}</Text>
          </Left>
          <Right>
            <LanguageButton updateParentState={this.updateState.bind(this)}/>
          </Right>
        </Header>
      </Container>);
    }

I'm trying to achieve that every change of language in Language component updates the locale and reloads the parent component and apply language to other components too.

This, for now, only translates title in navigation header but content stay unchanged.

Does anyone knows how to fix this? Thank you in advance.

Upvotes: 0

Views: 2789

Answers (1)

Vishal Dhanotiya
Vishal Dhanotiya

Reputation: 2638

You can use the following npm react-native-localization for multilingual application. You can define multiple languages into a string js file.

 // ES6 module syntax

import LocalizedStrings from 'react-native-localization';

let strings = new LocalizedStrings({

 en:{

   how:"How do you want your egg today?",

   boiledEgg:"Boiled egg",

  softBoiledEgg:"Soft-boiled egg",

   choice:"How to choose the egg"

 },

 it: {

   how:"Come vuoi il tuo uovo oggi?",

   boiledEgg:"Uovo sodo",

   softBoiledEgg:"Uovo alla coque",

   choice:"Come scegliere l'uovo"

 }

});

For change language, you can use this function on your code form where you want to change the language force a particular language use something like this:

 import RNRestart from 'react-native-restart';

_onSetLanguageToItalian() {

 strings.setLanguage('it');

  this.setState({});

RNRestart.Restart()

}

react-native-restart npm is used to restart the app and reflect language change into the whole app

Upvotes: 1

Related Questions