integrate i18next with redux

Question

I am trying to detect the locale from one of this 2 options: 1. if user selected one - application opened at least once 2. if app opens for the very 1st time - use device locale.

I tried using this guide and this bit of code i18next-react-native-language-detector. but with no help. my i18n.js file looks like:

import i18next from 'i18next';
import { AsyncStorage } from 'react-native';
(*) // import i18nextReactNative from 'i18next-react-native-language-detector';  
import locale from 'react-native-locale-detector';
import en from './en';
import de from './de';

const languageDetector = {
    init: Function.prototype,
    type: 'languageDetector',
    async: true, // flags below detection to be async
    detect: () => AsyncStorage.getItem('APP:lnag')
      .then((savedDataJSON) => {
        const savedLocal = JSON.parse(savedDataJSON);
        const selectLanguage = savedLocal || locale;
        return selectLanguage;
    }),
    cacheUserLanguage: Function.prototype,
};

let translate;
i18next
    (*)//.use(i18nextReactNative)
    (**).use(languageDetector)
    .init({
        fallbackLng: 'en',
        resources: {
            en,
            de,
        },
        react: {
            wait: true,
        },
        // have a common namespace used around the full app
        ns: ['common'],
        defaultNS: 'common',
        debug: true,
        interpolation: {
            escapeValue: false, // not needed for react!!
            formatSeparator: ',',
            format(value, format) {
                if (format === 'uppercase') return value.toUpperCase();
                return value;
            },
        },
    }, (err, t) => {
        translate = t;
    });
export { translate as t };
export default i18next;

But I getting an error: TypeError: (0, _18n.t) is not a function.

When I use default languageDetector, remove comment from lines (*) and comment the custom languageDetector it works fine but not as I want - always takes device locale

b-asaf b-asaf · Accepted Answer · 2018-04-03T06:14:32

I found a solution:

import i18next from 'i18next';
import { AsyncStorage } from 'react-native';
import locale from 'react-native-locale-detector';
import en from './en';
import de from './de';

const languageDetector = {
    init: Function.prototype,
    type: 'languageDetector',
    async: true, // flags below detection to be async
    detect: async (callback) => {
        const savedDataJSON = await AsyncStorage.getItem(STORAGE_KEY);
        const lng = (savedDataJSON) ? JSON.parse(savedDataJSON): null;
        const selectLanguage = lng || locale;
        console.log('detect - selectLanguage:', selectLanguage);
        callback(selectLanguage);
    },
    cacheUserLanguage: () => {}
}

let translate;
i18next
    .use(languageDetector)
    .init({
        fallbackLng: 'en',
        resources: { en, de},
        react: { wait: false },
        // have a common namespace used around the full app
        ns: ['common'],
        defaultNS: 'common',
        debug: true,
        interpolation: {
            escapeValue: false, // not needed for react!!
            formatSeparator: ',',
            format(value, format) {
            if (format === 'uppercase') return value.toUpperCase();
                return value;
            },
       },
    }, (err, t) => {
        translate = t;
});
export { translate as t };
export default i18next;

integrate i18next with redux

1 Answers