changing the language of react native app does not change the language for already opened routes

Question

if i change the language from my setting screen inside my app, it does not change the language for already opened routes in my application. the language change is only reflect on unopened routes. i used react-native-localize and i18n-js. Given below my code

index.js

import * as RNLocalize from 'react-native-localize';
import I18n from 'i18n-js';
import memoize from 'lodash.memoize'; 


import {I18nManager,
        AsyncStorage} from 'react-native';

import en from './en';
import am from './am';
import or from './or';
import tg from './tg';
import sl from './sl';


const locales = RNLocalize.getLocales();
if (Array.isArray(locales)) {
  I18n.locale = locales[0].languageTag;
}


I18n.fallbacks = true;
I18n.translations = {
  default: en,
  'en-US': en,
  en,
  am,
  or,
  tg,
  sl,
};

export default I18n;

My SettingScreen where i can change the language is:

SettingScreen.js

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 = () => {
    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 (
      <SafeAreaView style={styles.container}>

      <View style={styles.headerContainer}>
        <TouchableOpacity
          style={styles.backArrowTouchable}
          onPress={() => this.backToMain()}>
          <Image style={styles.backArrow} source={backArrow} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>{I18n.t('setting.setting_title')}</Text>
      </View>

      <View style={styles.containerLangSelect}>
          <Text style={styles.sectionDescription}>{I18n.t('setting.select_language')}</Text>
      </View>   

      <View style={styles.containerDropdown}>
        <DropdownLanguage language={languageSelected} onChangeLanguage={this.onChangeLanguage.bind(this)}></DropdownLanguage>
      </View>
    </SafeAreaView>
    );
  }
}
class DropdownLanguage extends React.Component {
  constructor(props) {
    super(props)  
  }

  render() {
    return (

    <View style={styles.dropdownLanguage}>

            {/* <Text style={{width:10,}}>{I18n.t('setting.select_language')}: </Text>   */}
              <Picker
                mode="dropdown"
                iosHeader={''} 
                style={{ width: width,
                         }}
                selectedValue={this.props.language}
                onValueChange={this.props.onChangeLanguage.bind(this)}
              >
                {listLanguage.map((languageItem, i) => {
                    return <Picker.Item key={i} value={languageItem.key} label= {languageItem.label} />
                })}
              </Picker>
            </View>
    )
  }
}