0xclpz/i18next-react-native-async-storage

i18n plugin to persist user's language in React Native's Async Storage

i18next React Native Async Storage

This plugin caches your user's language in React Native's Async storage

Getting Started

Install using:

yarn add i18next-react-native-async-storage

Then pass it to your i18n instance

import AsyncStoragePlugin from 'i18next-react-native-async-storage'

i18n
  .use(AsyncStoragePlugin())

Fallback mechanism

You can pass a fallback function or language to the plugin in case it fails to find the user's language in the local storage (typically on the app's first run):

// With a fallback language
i18n
  .use(AsyncStoragePlugin('en'))

// With a fallback function
const detectUserLanguage = (callback) => {
  return Expo
    .DangerZone
    .Localization
    .getCurrentLocaleAsync()
    .then(lng => { callback(lng.replace('_', '-')); })
}

i18n
  .use(AsyncStoragePlugin(detectUserLanguage))

i18next-react-native-async-storage's Issues

AsyncStorage undefined

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/i18next-react-native-async-storage/index.js b/node_modules/i18next-react-native-async-storage/index.js
index b41c113..9ecd088 100644
--- a/node_modules/i18next-react-native-async-storage/index.js
+++ b/node_modules/i18next-react-native-async-storage/index.js
@@ -1,3 +1,4 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 function requireIfAvailable (path) {
   try {
@@ -7,7 +8,7 @@ function requireIfAvailable (path) {
   }
 }
 
-const AsyncStorage = (requireIfAvailable('@react-native-async-storage/async-storage') || requireIfAvailable('@react-native-community/async-storage') || requireIfAvailable('react-native')).AsyncStorage
+// const AsyncStorage = (requireIfAvailable('@react-native-async-storage/async-storage') || requireIfAvailable('@react-native-community/async-storage') || requireIfAvailable('react-native')).AsyncStorage
 
 function callFallbackIfFunc(fallback, callback){
   if(typeof fallback === 'function'){

This issue body was partially generated by patch-package.

last language select does not come back

hi,
good package , but when I call it as you describe with the codes :
`
i18n.use(AsyncStoragePlugin());

i18n.use(initReactI18next).init({
/* lng - default language
fallbackLng - Fallback language in case key is not found for any translation.
resources - JSON file for various languages. */
compatibilityJSON: 'v3', // <--- add this line.
fallbackLng: 'fr',
//lng: 'fr',

//supportedLngs: ['en', 'fr', 'de'],
// have a initial namespace
ns: ['common', 'app'],
defaultNS: 'common',

resources: {
en: en,
de: de,
fr: fr,
},
interpolation: {
escapeValue: false, // react already safes from xss
},
});
`
if I stop my app in language 'de' , I reload this app and I always get the 'fr' language (may be the fallback choice that I need),
If I comment this : //fallbackLng: 'fr', I will get 'en'== the 1st of ressources ,

I would have expected to recover a 'de' language version ?

my stack :
"i18next": "^21.9.1",
"i18next-react-native-async-storage": "^1.0.4",
"react": "18.0.0",
"react-i18next": "^11.18.4",
"react-native": "0.69.4",
thanks

Async storage moved again :(

AsyncStorage is undefined

When using package I noticed that language is not persisted in async storage.
I investigated a problem a little and placing console.error in index.js Line 44 produces:

Cannot read properties of undefined (reading 'setItem')
at node_modules/i18next-react-native-async-storage/index.js:42:27 in cacheUserLanguage

Going on I placed another console.error in requireIfAvailable function at line 6 and this produced:

Dynamic require defined at line 4; not supported by Metro
at node_modules/i18next-react-native-async-storage/index.js:4:6 in requireIfAvailable

So it seems to be connected with facebook/metro#52

I fixed this on my project with patch-package by removing requireIfAvailable function and just require @react-native-async-storage/async-storage as I use this package in my project, but I'm not sure how to fix this to support deprecated async storage packages

What is this repos license?