Replace react-native-i18n for react-native-localize.

Author: ferrannp

android/app/build.gradle

@@ -143,7 +143,7 @@ dependencies {
     implementation project(':react-native-gesture-handler')
     implementation project(':bugsnag-react-native')
     implementation project(':realm')
-    implementation project(':react-native-i18n')
+    implementation project(':react-native-localize')
     implementation project(':react-native-vector-icons')
 }
 

android/app/src/main/java/com/fnp/dziku/MainApplication.java

@@ -2,8 +2,8 @@
 
 import android.app.Application;
 
-import com.AlexanderZaytsev.RNI18n.RNI18nPackage;
 import com.facebook.react.ReactApplication;
+import com.reactcommunity.rnlocalize.RNLocalizePackage;
 import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
 import com.bugsnag.BugsnagReactNative;
 import com.facebook.react.ReactNativeHost;
@@ -29,11 +29,11 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
-            new RNGestureHandlerPackage(),
-            BugsnagReactNative.getPackage(),
-            new RealmReactPackage(),
-            new RNI18nPackage(),
-            new VectorIconsPackage()
+          new RNGestureHandlerPackage(),
+          BugsnagReactNative.getPackage(),
+          new RealmReactPackage(),
+          new RNLocalizePackage(),
+          new VectorIconsPackage()
       );
     }
 

android/settings.gradle

@@ -5,8 +5,8 @@ include ':bugsnag-react-native'
 project(':bugsnag-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/bugsnag-react-native/android')
 include ':realm'
 project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
-include ':react-native-i18n'
-project(':react-native-i18n').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-i18n/android')
+include ':react-native-localize'
+project(':react-native-localize').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-localize/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 

config/setupTests.js

@@ -13,3 +13,6 @@ jest.mock('realm');
 jest.mock('react-navigation-backhandler', () => ({
   AndroidBackHandler: ({ children }) => children,
 }));
+jest.mock('react-native-localize', () => ({
+  findBestAvailableLanguage: () => 'en',
+}));

ios/Dziku.xcodeproj/project.pbxproj

@@ -15,14 +15,15 @@
   "dependencies": {
     "bugsnag-react-native": "^2.10.2",
     "dziku-exercises": "^0.2.0",
+    "i18n-js": "^3.2.1",
     "left-pad": "^1.3.0",
     "lodash": "^4.17.11",
     "moment": "^2.22.1",
     "react": "16.6.3",
     "react-native": "^0.58.6",
     "react-native-calendars": "^1.21.0",
     "react-native-gesture-handler": "^1.0.16",
-    "react-native-i18n": "^2.0.15",
+    "react-native-localize": "^1.0.4",
     "react-native-paper": "^2.11.1",
     "react-native-vector-icons": "^4.6.0",
     "react-navigation": "^3.3.2",

package.json

@@ -13,6 +13,7 @@ import {
   getFirstAndLastMonthDay,
   getFirstAndLastWeekday,
 } from '../date';
+import { clearTranslateCache } from '../i18n';
 
 beforeEach(() => {
   moment.locale('en');
@@ -76,6 +77,7 @@ describe('getDatePrettyFormat', () => {
 
     moment.locale('es');
     I18nJs.locale = 'es';
+    clearTranslateCache();
     expect(
       getDatePrettyFormat(
         '2018-05-04T00:00:00.000Z',

src/utils/__tests__/date.test.js

@@ -1,12 +1,36 @@
 /* @flow */
 
-import I18n from 'react-native-i18n';
+import * as RNLocalize from 'react-native-localize';
+import i18nJS from 'i18n-js';
+import memoize from 'lodash/memoize';
 import { en, es } from './locales';
 
-I18n.fallbacks = true;
-I18n.translations = {
+const translate = memoize(
+  (key, config) => i18nJS.t(key, config),
+  (key, config) => (config ? key + JSON.stringify(config) : key)
+);
+
+// fallback if no available language fits
+const fallback = { languageTag: 'en', isRTL: false };
+
+const { languageTag } =
+  RNLocalize.findBestAvailableLanguage(['en', 'es']) || fallback;
+
+// clear translation cache
+translate.cache.clear();
+
+// set i18n-js config
+i18nJS.fallbacks = true;
+i18nJS.translations = {
   en,
   es,
 };
+i18nJS.locale = languageTag;
+
+export const clearTranslateCache = () => translate.cache.clear();
+
+const i18n = {
+  t: translate,
+};
 
-export default I18n;
+export default i18n;

src/utils/i18n.js

@@ -3474,10 +3474,10 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-i18n-js@3.0.11:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/i18n-js/-/i18n-js-3.0.11.tgz#f9e96bdb641c5b9d6be12759d7c422089987ef02"
-  integrity sha512-v7dG3kYJTQTyox3NqDabPDE/ZotWntyMI9kh4cYi+XlCSnsIR+KBTS2opPyObL8WndnklcLzbNU92FP/mLge3Q==
+i18n-js@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/i18n-js/-/i18n-js-3.2.1.tgz#26cea8e327207bebccf1030baa761c5245ceb63b"
+  integrity sha512-AN8Ol+7QMcRml338l5W7JeNsJgXZqXHOwF+e2iKu6gqRM87bmbxk3g2CAfapo7+5ASKOhl+0PiH+YP8OjN+rXg==
 
 [email protected]:
   version "0.4.19"
@@ -6228,12 +6228,10 @@ react-native-gesture-handler@^1.0.16, react-native-gesture-handler@~1.0.14:
     invariant "^2.2.2"
     prop-types "^15.5.10"
 
-react-native-i18n@^2.0.15:
-  version "2.0.15"
-  resolved "https://registry.yarnpkg.com/react-native-i18n/-/react-native-i18n-2.0.15.tgz#09b5a9836116fa7dbd0054c46e2d1014c1ef3c65"
-  integrity sha512-V8VwUP0TLda3oJvgt5tdnFaOV7WXPhTjCTLO7sXI3C2SHggSbD4bCUryMzNJhesimJidH21V2Owvj4zAylHoQQ==
-  dependencies:
-    i18n-js "3.0.11"
+react-native-localize@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-1.0.4.tgz#4fd3c492ded717c1eb15b2c1f744c8c167e12473"
+  integrity sha512-KZg0ZZTbZWor3an6SvQz84swBBj0z8kJX1tk4xGN3rE2Ox/uM/dl056qjBrjtyy4j5f78L05aY17TtOh+vW8Ww==
 
 react-native-paper@^2.11.1:
   version "2.11.1"