[Feature] [RN] Set up react-i18next for localisation

// Step 1: Install i18next and react-i18next. For react <= 0.58.6
yarn add i18next react-i18next@legacy

// Step 2: Install code below as localisation center.
import i18next from 'i18next';
import { reactI18nextModule } from 'react-i18next';
import enAU from './lang/enAU';
import viVN from './lang/viVN';

i18next.use(reactI18nextModule).init({
  lng: 'enAU',
  debug: true,
  resources: {
    enAU: {
      translation: enAU,
    },
    viVN: {
      translation: viVN,
    },
  },
});

export default i18next;

// Step 3: Import locationsation file in the header of index.js file and set up with withNamespace as a HOC componenents.
import 'src/locale';
import { withNamespaces } from 'react-i18next';

class App extends React.Component {
  static router = AppContainer.router;

  render() {
    const { t } = this.props;
    return (
      <View style={styles.container}>
        <AppContainer
          screenProps={{ t }}
          {...this.props}
          ref={(ref) => {
            NavigationService.setTopLevelNavigator(ref);
          }}
        />
      </View>
    );
  }
}

// Add with name spaces HOC and observe to the app.
export default withNamespaces('common', {
  bindI18n: 'languageChanged',
  bindStore: false,
  wait: false,
})(observer(App));

// The first node in json will be the namespace, you can specific withNamespaces('nameOfNameSpace') for your component. No specific will use all namespace.
  common: {
    action: {
      ok: 'OK',
      cancel: 'Cancel',
    },
    email: 'Email',
    password: 'Password',
  }
// So if you want to get ok, it will be common.action.ok

// Set localisation for the navigation options.
static navigationOptions = ({ navigation, screenProps }) => {
    const onPressLeft = navigation.getParam('onPressLeft');
    const { t } = screenProps;
    return {
      title: t('changeLanguage.title'),
      headerLeft: (
        <TouchableIcon
          onPress={onPressLeft}
          name='hambuger'
          iconStyle={styles.iconLeft}
          style={styles.buttonLeft}
        />
      ),
    };
  }

// Change language with i18n. Remember you need to wrap withNamespaces as HOC
const { i18n } = this.props;
i18n.changeLanguage('en_US')