React Native - I18Next with react-navigation and typescript - react-native

Question

I have this RN project I started. I need localization in it, and I tried numerous solution for it. I18Next looks like it could really well suit my needs. I'm not sure how to define it in its own file and call it in App.tsx. I used a useEffect but I doubt it's wise - even more without any dependencies. Here is what I tried :
i18n.ts:
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as Localization from 'expo-localization';
import en from './en.json';
import fr from './fr.json';
const resources = {en: { translation: en }, fr: { translation: fr }};
i18next
// .use(languageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
resources,
lng: Localization.locale.slice(0, 2),
});
export default i18next;
And the code in App.tsx:
// ...
import i18next from './src/locales/i18n';
export default function App(): React.ReactElement {
useEffect(() => {
i18next
.init()
.then(() => {
// TODO - dispatch to redux when this is ready
})
.catch(error => console.warn(error));
});
return (
<Provider store={store}>
<PersistGate loading={<SplashScreen />} persistor={persistor}>
<StatusBar hidden />
<MainNavigation />
</PersistGate>
</Provider>
);
}
I get a warning i18next: init: i18next is already initialized. You should call init just once!. Indeed, I'm calling .init() twice - in the main file and again in the useEffect. But I don't see how to do it otherwise.
Also, is my useEffect alright?
[EDIT] I found https://react.i18next.com/latest/i18nextprovider in the doc and using it and deleting the useEffect, the warning is gone - although I'm not sure if it's a good idea since the docs states You will only need to use the provider in scenarios for SSR (ServerSideRendering) or if you need to support multiple i18next instances - eg. if you provide a component library.

Answer 1

Actually I just needed to init it once indeed, and didn't need to use the provider either. Finally nailed it like this:
const onBeforeLift = async () => {
await initI18Next();
};
export default function App(): React.ReactElement {
return (
<Provider store={store}>
<PersistGate
loading={<SplashScreen />}
persistor={persistor}
onBeforeLift={onBeforeLift}
>
<StatusBar hidden />
<MainNavigation />
</PersistGate>
</Provider>
);
}
And in i18n.ts:
const resources = {
en: { translation: en },
fr: { translation: fr },
he: { translation: he },
};
export const init = () => {
const lng = store.getState().user.language
? store.getState().user.language
: Localization.locale.slice(0, 2);
return (
i18next
.use(initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
resources,
lng,
})
);
};
export default i18next;