@tolgee/i18next withTolgee not working with React Native

[Fifaldi]

@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",

[stepan662]

Hey, do you have your translations in correct namespace?

[Fifaldi]

Yes, I have my translations inside 'translation' namespace: