[REACT NATIVE] i18n prevents page rendering when I use async-storage

[batu0b]

i18n prevents page rendering when I use async-storage

index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import mocks from './mocks';
import axios from 'axios';
import config from './config';
import './src/lang/i18n';
axios.defaults.baseURL = config.API_URL;

if (window.server) {
  window.server.shutdown();
}
window.server = mocks.dataServer();

AppRegistry.registerComponent(appName, () => App);

When this happens, the ui is not rendered for some reason

const languageDetector = {
  type: 'languageDetector',
  async: true,
  init: () => {},
  detect: callback => {
    return get('lng').then(res => {
      const lng = res ? res : RNLocalize.getLocales()[0].languageCode;
      return callback(lng);
    });
  },

  cacheUserLanguage: () => {},
};

i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    debug: true,
    fallbackLng: 'en',
    resources: {
      en: {
        ...en,
      },
      tr: {
        ...tr,
      },
    },
  });

export default i18n;

but when I use it like this, it works successfully.

const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: callback => {
    callback(RNLocalize.getLocales()[0].languageCode);
  },
  cacheUserLanguage: () => {},
  init: Function.prototype,
};

i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    debug: true,
    fallbackLng: 'en',
    resources: {
      en: {
        ...en,
      },
      tr: {
        ...tr,
      },
    },
  });

export default i18n;

Environments

• runtime version: node v18^ ,
• i18next version: 23.8.2
• react-i18next version: 14.0.5
• os: Windows
• emulator: Android
• react: "18.2.0",
• react-native: "0.73.4",
• @react-native-async-storage/async-storage: "^1.21.0"

[adrai]

Can you reproduce it with this example? https://github.com/i18next/react-i18next/tree/master/example/ReactNativeProject