Open Fifaldi opened 4 days ago
@tolgee/i18next withTolgee not working with React Native.
config:
import i18n, {ThirdPartyModule} from 'i18next'; import {initReactI18next} from 'react-i18next'; import AsyncStorage from '@react-native-async-storage/async-storage'; import {TOLGEE_API_URL, TOLGEE_API_KEY} from '@env'; import { withTolgee, Tolgee as Tolgee_i18n, I18nextPlugin, FormatSimple as FormatSimple_i18n, } from '@tolgee/i18next'; import {Tolgee, FormatSimple, DevTools as DevTools2} from '@tolgee/react'; export const tolgee = Tolgee().use(DevTools2()).use(FormatSimple()).init({ language: 'en', apiUrl: TOLGEE_API_URL, apiKey: TOLGEE_API_KEY, }); const tolgee_i18n = Tolgee_i18n().use(I18nextPlugin()).use(FormatSimple_i18n()).init({ apiUrl: TOLGEE_API_URL, apiKey: TOLGEE_API_KEY, }); const languageDetector = { type: 'languageDetector', async: true, // flags below detection to be async detect: async (callback: (x: string | void) => void) => { const currentLanguage = (await AsyncStorage.getItem('Language')) ?? 'en'; return callback(currentLanguage); }, // eslint-disable-next-line @typescript-eslint/no-empty-function init: () => {}, }; withTolgee(i18n, tolgee_i18n) .use(languageDetector as ThirdPartyModule) .use(initReactI18next) .init({ lng: 'en', compatibilityJSON: 'v3', }); export default i18n;
Provider is set in App.tsx:
import React from 'react'; import {TolgeeProvider} from '@tolgee/react'; import {tolgee} from './translation'; import './translation'; import Component from './Component'; const App = () => { return ( <TolgeeProvider tolgee={tolgee}> <Component /> </TolgeeProvider> ); }; export default App;
usage:
import {Text, SafeAreaView} from 'react-native'; import {useTranslation} from 'react-i18next'; import {useTranslate} from '@tolgee/react'; import React from 'react'; const Component = () => { const {t} = useTranslation(); const {t: tolgeeTranslate} = useTranslate(); return ( <SafeAreaView> <Text>Tolgee: {tolgeeTranslate('auth.backToLogin')}</Text> <Text>i18: {t('auth.backToLogin')}</Text> </SafeAreaView> ); }; export default Component;
result:
Package versions: "react-native": "^0.74.1", "@tolgee/i18next": "^5.28.4", "@tolgee/react": "^5.28.4", "i18next": "^23.11.5", "react-i18next": "^14.1.2",
Hey, do you have your translations in correct namespace?
Yes, I have my translations inside 'translation' namespace:
@tolgee/i18next withTolgee not working with React Native.
config:
Provider is set in App.tsx:
usage:
result:
Package versions: "react-native": "^0.74.1", "@tolgee/i18next": "^5.28.4", "@tolgee/react": "^5.28.4", "i18next": "^23.11.5", "react-i18next": "^14.1.2",