title: How to make react native app save the selected language when i restart the app
body: <p>I want my app contain a setting screen so that i can change the language from the picker. I want language change is reflected on the whole app and i want the app to remember last selected language. Given below my index.js that import my key value pair language for en, am, or, tg, </p>
  
  <p>index.js </p>
  
  <pre><code>import * as RNLocalize from 'react-native-localize';
  import I18n from 'i18n-js';
  import memoize from 'lodash.memoize'; 
  
  import en from './en';
  import am from './am';
  import or from './or';
  import tg from './tg';
  
  const locales = RNLocalize.getLocales();
  if (Array.isArray(locales)) {
    I18n.locale = locales[0].languageTag;
  }
  
  I18n.translations = {
    default: en,
    'en-US': en,
    en,
    am,
    or,
    tg,
  
  };
  
  I18n.fallbacks = true;
  export default I18n;
  </code></pre>
  
  <p>I want to change language of the app from my SettingScreen. where i prepared a picker to choose language from. given below my setting screen code. </p>
  
  <p>SettingScreen.js</p>
  
  <pre><code>import I18n from './../i18n/locales';
  
  const width = Dimensions.get('window').width;
  const height = Dimensions.get('window').height;
  
  const listLanguage = [
    {key:'en', label:'En'}, {key:'am', label:'Am'} ,{key:'or', label: 'OR'}, {key:'tg', label:'TG'},] 
  
  export default class SettingsScreen extends React.Component {
    constructor(props) {
      super(props);
      this.state = { visible: true ,
                    languageSelected: 'en'
      };
    }
  
    backToMain() {
      this.props.navigation.navigate('LocationTrackingScreen', {});
    }
  
    handleBackPress = () =&gt; {
      this.props.navigation.navigate('LocationTrackingScreen', {});
      return true;
    };
  
    hideSpinner() {
      this.setState({ visible: false });
    }
  
    componentDidMount() {
      BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    }
  
    componentWillUnmount() {
      BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
    }
  
    onChangeLanguage(languageSelected){
      this.setState({
        languageSelected
      })
         I18n.locale = languageSelected 
    }
  
    render() {
      const {languageSelected} = this.state
  
      return (
        &lt;SafeAreaView style={styles.container}&gt;
  
        &lt;View style={styles.containerDropdown}&gt;
                &lt;DropdownLanguage language={languageSelected} onChangeLanguage={this.onChangeLanguage.bind(this)}&gt;&lt;/DropdownLanguage&gt;
  
        &lt;/View&gt;
      &lt;/SafeAreaView&gt;
      );
    }
  }
  class DropdownLanguage extends React.Component {
    constructor(props) {
      super(props)  
    }
  
    render() {
      return (
  &lt;View style={styles.dropdown}&gt;
                &lt;Picker
                  mode="dropdown"
                  iosHeader={''} 
                  style={{ width: width,height:70,}}
                  selectedValue={this.props.language}
                  onValueChange={this.props.onChangeLanguage.bind(this)}
                &gt;
                  {listLanguage.map((languageItem, i) =&gt; {
                      return &lt;Picker.Item key={i} value={languageItem.key} label= {languageItem.label} /&gt;
                  })}
                &lt;/Picker&gt;
  
              &lt;/View&gt;
  )
    }
  }
  </code></pre>