integrate i18next with redux - react-native

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

Answer 1

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;