How to get current locale with React-Native and i18n-js?

Question

I'm trying to get current locale from the device of the user. For now, I have 2 versions of my app : french and english. It works fine when I change the fallback language I do have the two versions of the app. But I can't manage to change the language directly from the device...

I used RNlocalize as seen in many pages but it doesn't work for me... my App.js:

import React, { Component } from "react";
import I18n from "./src/i18n/I18n";
import * as RNLocalize from "react-native-localize";

async handleLocales() {
  this.locales = RNLocalize.getLocales();
}

getLocale() {
  if (this.locales) {
    if (Array.isArray(this.locales)) {
      return this.locales[0];
    }
  }
  return null;
}
class App extends Component {
  render() {
    return (
      <View>
        <Text>{I18n.t("hello")}</Text>
      </View>
    );
  }
}
export default App;

My i18n.js file :

import I18n from "i18n-js";
import * as RNLocalize from "react-native-localize";

import en from "./locales/en";
import fr from "./locales/fr";

const locales = RNLocalize.getLocales();

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

I18n.fallbacks = true;
I18n.translations = {
  en,
  fr
};

export default I18n;

I tried it in a test folder. The error I've got is

SyntaxError: C:\Users\Administrateur\Desktop\App.js: Unexpected token, expected "=>" (5:19)

  3 | import * as RNLocalize from "react-native-localize";
  4 | 
> 5 | async handleLocales() {
    |                    ^
  6 |   this.locales = RNLocalize.getLocales();
  7 | }
  8 |

Answer 1

Try this:

import { NativeModules, Platform } from 'react-native';

const locale =
  Platform.OS === 'ios'
    ? NativeModules.SettingsManager.settings.AppleLocale
    : NativeModules.I18nManager.localeIdentifier;

Answer 2

I guess I had something wrong in my locale. Correcting this way everything works:

import i18n from "i18next";
import detector from "i18next-browser-languagedetector";
import { reactI18nextModule } from "react-i18next";
import { NativeModules, Platform } from 'react-native';

import en from '../public/locales/en/translation.js';
import fr from '../public/locales/fr/translation.js';

// the translations
const resources = {
  en: {
    translation: en
  },
  fr: {
    translation: fr
  }
};
const locale =
  Platform.OS === 'ios'
    ? NativeModules.SettingsManager.settings.AppleLocale
    : NativeModules.I18nManager.localeIdentifier;
console.log(locale.substring(0, 2));
      i18n.locale = locale

i18n
  .use(detector)
  .use(reactI18nextModule) // passes i18n down to react-i18next
  .init({
    resources,
    lng: locale.substring(0, 2),
    fallbackLng: "en", // use en if detected lng is not available

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

export default i18n;