Как заставить весь рендеринг всего приложения при смене языка приложения с i18n и Expo?

Question

Мое приложение предназначено как для арабского, так и для английского языка, и я пытаюсь изменить весь язык приложения и заставить все приложение обновляться, включая FormattedProvider, который помогает мне включать в приложение как арабские, так и английские цифры, я использую его теги в качестве оболочкив моем основном компоненте приложения App.js, как показано здесь:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 
'react-native';
import * as Expo from 'expo';
import { Constants } from 'expo';
import { FormattedProvider } from 'react-native-globalize';
import InnerApp from './src/App';
import i18n from './src/i18n';    

export default class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {}
    }

    async componentWillMount() {
        await Expo.Font.loadAsync({
            'Roboto': require('native-base/Fonts/Roboto.ttf'),
            'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
            'Ionicons': require('@expo/vector-icons/fonts/Ionicons.ttf'),
            'FontAwesome': require('@expo/vector-icons/fonts/FontAwesome.ttf'),
            'Foundation': require('@expo/vector-icons/fonts/Foundation.ttf'),
            'SimpleLineIcons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf'),
            'EvilIcons': require('@expo/vector-icons/fonts/EvilIcons.ttf'),
            'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
            'FontAwesome5_Regular': require('@expo/vector-icons/fonts/FontAwesome5_Regular.ttf')
       });
    }

    render() {
        return (
            <FormattedProvider locale={this.props.language}>
                <InnerApp />
            </FormattedProvider>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
    },
    paragraph: {
        margin: 24,
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#34495e',
    },
});

, и я хочу, чтобы весь язык приложения менялся, когда пользователь выбирает другой язык, любая помощь будет оценена.

Answer 1

Попробуйте что-нибудь об этом:

     constructor(props){
        super(props);
            this.state = {
               language: "en"
            }
}

componentWillReceiveProps(nextProps){
   if (this.props.language != nextProps.language)
       this.setState({language: nextProps.language})
}

render() {
    return (
        <FormattedProvider locale={this.state.language}>
            <InnerApp />
        </FormattedProvider>
    )
}
}

По сути, просто попробуйте прочитать язык из состояния, чтобы дерево отображалось при его изменении.