setup language

.vscode/.react/debuggerWorker.js

-
-// Initialize some variables before react-native code would access them
-var onmessage=null, self=global;
-// Cache Node's original require as __debug__.require
-global.__debug__={require: require};
-// Prevent leaking process.versions from debugger process to
-// worker because pure React Native doesn't do that and some packages as js-md5 rely on this behavior
-Object.defineProperty(process, "versions", {
-    value: undefined
-});
-// TODO: Replace by url.fileURLToPath method when Node 10 LTS become deprecated
-function fileUrlToPath(url) {
-  if (process.platform === 'win32') {
-      return url.toString().replace('file:///', '');
-  } else {
-    return url.toString().replace('file://', '');
-  }
-}
-function getNativeModules() {
-    var NativeModules;
-    try {
-        // This approach is for old RN versions
-        NativeModules = global.require('NativeModules');
-    } catch (err) {
-        // ignore error and try another way for more recent RN versions
-        try {
-            var nativeModuleId;
-            var modules = global.__r.getModules();
-            var ids = Object.keys(modules);
-            for (var i = 0; i < ids.length; i++) {
-              if (modules[ids[i]].verboseName) {
-                 var packagePath = new String(modules[ids[i]].verboseName);
-                 if (packagePath.indexOf('Libraries/BatchedBridge/NativeModules.js') > 0 || packagePath.indexOf('Libraries\\BatchedBridge\\NativeModules.js') > 0) {
-                   nativeModuleId = parseInt(ids[i], 10);
-                   break;
-                 }
-              }
-            }
-          if (nativeModuleId) {
-            NativeModules = global.__r(nativeModuleId);
-          }
-        }
-        catch (err) {
-            // suppress errors
-        }
-    }
-    return NativeModules;
-}
-// Originally, this was made for iOS only
-var vscodeHandlers = {
-    'vscode_reloadApp': function () {
-        var NativeModules = getNativeModules();
-        if (NativeModules && NativeModules.DevMenu) {
-            NativeModules.DevMenu.reload();
-        }
-    },
-    'vscode_showDevMenu': function () {
-        var NativeModules = getNativeModules();
-        if (NativeModules && NativeModules.DevMenu) {
-            NativeModules.DevMenu.show();
-        }
-    }
-};
-process.on("message", function (message) {
-    if (message.data && vscodeHandlers[message.data.method]) {
-        vscodeHandlers[message.data.method]();
-    } else if(onmessage) {
-        onmessage(message);
-    }
-});
-var postMessage = function(message){
-    process.send(message);
-};
-if (!self.postMessage) {
-    self.postMessage = postMessage;
-}
-var importScripts = (function(){
-    var fs=require('fs'), vm=require('vm');
-    return function(scriptUrl){
-        scriptUrl = fileUrlToPath(scriptUrl);
-        var scriptCode = fs.readFileSync(scriptUrl, 'utf8');
-        // Add a 'debugger;' statement to stop code execution
-        // to wait for the sourcemaps to be processed by the debug adapter
-        vm.runInThisContext('debugger;' + scriptCode, {filename: scriptUrl});
-    };
-})();
-
-// Worker is ran as nodejs process, so console.trace() writes to stderr and it leads to error in native app
-// To avoid this console.trace() is overridden to print stacktrace via console.log()
-// Please, see Node JS implementation: https://github.com/nodejs/node/blob/master/lib/internal/console/constructor.js
-console.trace = (function() {
-    return function() {
-        try {
-            var err = {
-                name: 'Trace',
-                message: require('util').format.apply(null, arguments)
-                };
-            // Node uses 10, but usually it's not enough for RN app trace
-            Error.stackTraceLimit = 30;
-            Error.captureStackTrace(err, console.trace);
-            console.log(err.stack);
-        } catch (e) {
-            console.error(e);
-        }
-    };
-})();
-
-// As worker is ran in node, it breaks broadcast-channels package approach of identifying if it’s ran in node:
-// https://github.com/pubkey/broadcast-channel/blob/master/src/util.js#L64
-// To avoid it if process.toString() is called if will return empty string instead of [object process].
-var nativeObjectToString = Object.prototype.toString;
-Object.prototype.toString = function() {
-    if (this === process) {
-        return '';
-    } else {
-        return nativeObjectToString.call(this);
-    }
-};
-
-
-"use strict";
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/* global __fbBatchedBridge, self, importScripts, postMessage, onmessage: true */
-
-/* eslint no-unused-vars: 0 */
-onmessage = function () {
-  var visibilityState;
-
-  var showVisibilityWarning = function () {
-    var hasWarned = false;
-    return function () {
-      // Wait until `YellowBox` gets initialized before displaying the warning.
-      if (hasWarned || console.warn.toString().includes('[native code]')) {
-        return;
-      }
-
-      hasWarned = true;
-      console.warn('Remote debugger is in a background tab which may cause apps to ' + 'perform slowly. Fix this by foregrounding the tab (or opening it in ' + 'a separate window).');
-    };
-  }();
-
-  var messageHandlers = {
-    executeApplicationScript: function (message, sendReply) {
-      for (var key in message.inject) {
-        self[key] = JSON.parse(message.inject[key]);
-      }
-
-      var error;
-
-      try {
-        importScripts(message.url);
-      } catch (err) {
-        error = err.message;
-      }
-
-      sendReply(null
-      /* result */
-      , error);
-    },
-    setDebuggerVisibility: function (message) {
-      visibilityState = message.visibilityState;
-    }
-  };
-  return function (message) {
-    if (visibilityState === 'hidden') {
-      showVisibilityWarning();
-    }
-
-    var object = message.data;
-
-    var sendReply = function (result, error) {
-      postMessage({
-        replyID: object.id,
-        result: result,
-        error: error
-      });
-    };
-
-    var handler = messageHandlers[object.method];
-
-    if (handler) {
-      // Special cased handlers
-      handler(object, sendReply);
-    } else {
-      // Other methods get called on the bridge
-      var returnValue = [[], [], [], 0];
-      var error;
-
-      try {
-        if (typeof __fbBatchedBridge === 'object') {
-          returnValue = __fbBatchedBridge[object.method].apply(null, object.arguments);
-        } else {
-          error = 'Failed to call function, __fbBatchedBridge is undefined';
-        }
-      } catch (err) {
-        error = err.message;
-      } finally {
-        sendReply(JSON.stringify(returnValue), error);
-      }
-    }
-  };
-}();
-
-//# sourceMappingURL=debuggerWorker.js.map
-// Notify debugger that we're done with loading
-// and started listening for IPC messages
-postMessage({workerLoaded:true});
\ No newline at end of file

android/app/src/main/java/com/invest/MainApplication.java

@@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.reactnativecommunity.netinfo.NetInfoPackage;
 import com.zoontek.rnbootsplash.RNBootSplashPackage;
 import com.zoontek.rnbootsplash.RNBootSplashPackage;
 import com.BV.LinearGradient.LinearGradientPackage;

android/settings.gradle

 rootProject.name = 'Invest'
+include ':@react-native-community_netinfo'
+project(':@react-native-community_netinfo').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/netinfo/android')
 include ':react-native-bootsplash'
 project(':react-native-bootsplash').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bootsplash/android')
 include ':react-native-bootsplash'

ios/Invest.xcodeproj/project.pbxproj

@@ -903,7 +903,7 @@
 				CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 21;
+				CURRENT_PROJECT_VERSION = 23;
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -936,7 +936,7 @@
 				CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 21;
+				CURRENT_PROJECT_VERSION = 23;
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				INFOPLIST_FILE = Invest/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";

ios/Podfile

@@ -87,6 +87,8 @@ target 'Invest' do
 
   pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
 
+  pod 'react-native-netinfo', :path => '../node_modules/@react-native-community/netinfo'
+
   target 'InvestTests' do
     inherit! :complete
     # Pods for testing

ios/Podfile.lock

@@ -124,6 +124,15 @@ PODS:
     - GoogleUtilities/Logger
   - GoogleUtilities/UserDefaults (6.7.2):
     - GoogleUtilities/Logger
+  - libwebp (1.2.0):
+    - libwebp/demux (= 1.2.0)
+    - libwebp/mux (= 1.2.0)
+    - libwebp/webp (= 1.2.0)
+  - libwebp/demux (1.2.0):
+    - libwebp/webp
+  - libwebp/mux (1.2.0):
+    - libwebp/demux
+  - libwebp/webp (1.2.0)
   - nanopb (1.30906.0):
     - nanopb/decode (= 1.30906.0)
     - nanopb/encode (= 1.30906.0)
@@ -298,6 +307,8 @@ PODS:
     - React-cxxreact (= 0.62.2)
     - React-jsi (= 0.62.2)
   - React-jsinspector (0.62.2)
+  - react-native-netinfo (6.0.0):
+    - React-Core
   - react-native-safe-area-context (3.1.9):
     - React-Core
   - react-native-webview (11.2.5):
@@ -371,6 +382,10 @@ PODS:
     - React-Core
   - RNCMaskedView (0.1.10):
     - React
+  - RNFastImage (8.3.4):
+    - React-Core
+    - SDWebImage (~> 5.8)
+    - SDWebImageWebPCoder (~> 0.6.1)
   - RNFBApp (7.3.1):
     - Firebase/CoreOnly (~> 6.25.0)
     - React
@@ -380,6 +395,8 @@ PODS:
     - RNFBApp
   - RNGestureHandler (1.10.3):
     - React-Core
+  - RNI18n (2.0.15):
+    - React
   - RNImageCropPicker (0.36.0):
     - React-Core
     - React-RCTImage
@@ -395,6 +412,12 @@ PODS:
     - React-Core
   - RNVectorIcons (8.1.0):
     - React-Core
+  - SDWebImage (5.11.0):
+    - SDWebImage/Core (= 5.11.0)
+  - SDWebImage/Core (5.11.0)
+  - SDWebImageWebPCoder (0.6.1):
+    - libwebp (~> 1.0)
+    - SDWebImage/Core (~> 5.7)
   - TOCropViewController (2.6.0)
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
@@ -439,6 +462,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -457,9 +481,11 @@ DEPENDENCIES:
   - "RNCCheckbox (from `../node_modules/@react-native-community/checkbox`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
+  - RNFastImage (from `../node_modules/react-native-fast-image`)
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNI18n (from `../node_modules/react-native-i18n`)
   - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -488,10 +514,13 @@ SPEC REPOS:
     - FlipperKit
     - GoogleDataTransport
     - GoogleUtilities
+    - libwebp
     - nanopb
     - OpenSSL-Universal
     - PromisesObjC
     - Protobuf
+    - SDWebImage
+    - SDWebImageWebPCoder
     - TOCropViewController
     - YogaKit
     - YoutubePlayer-in-WKWebView
@@ -529,6 +558,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-netinfo:
+    :path: "../node_modules/@react-native-community/netinfo"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-webview:
@@ -563,12 +594,16 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
+  RNFastImage:
+    :path: "../node_modules/react-native-fast-image"
   RNFBApp:
     :path: "../node_modules/@react-native-firebase/app"
   RNFBMessaging:
     :path: "../node_modules/@react-native-firebase/messaging"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNI18n:
+    :path: "../node_modules/react-native-i18n"
   RNImageCropPicker:
     :path: "../node_modules/react-native-image-crop-picker"
   RNReanimated:
@@ -607,6 +642,7 @@ SPEC CHECKSUMS:
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   GoogleDataTransport: f56af7caa4ed338dc8e138a5d7c5973e66440833
   GoogleUtilities: 7f2f5a07f888cdb145101d6042bc4422f57e70b3
+  libwebp: e90b9c01d99205d03b6bb8f2c8c415e5a4ef66f0
   nanopb: 59317e09cf1f1a0af72f12af412d54edf52603fc
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
   PromisesObjC: 3113f7f76903778cf4a0586bd1ab89329a0b7b97
@@ -621,6 +657,7 @@ SPEC CHECKSUMS:
   React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161
   React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da
   React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
+  react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d
   react-native-safe-area-context: b6e0e284002381d2ff29fa4fff42b4d8282e3c94
   react-native-webview: e994346d13f4d8b240347bc5be043a860452e4b6
   React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
@@ -638,18 +675,22 @@ SPEC CHECKSUMS:
   RNCCheckbox: d1749e6a92178ce5dbc31e63becd1f34f0c76bbd
   RNCClipboard: 245417a78ab585e0d4d83926c28907e7b2bc24bd
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
+  RNFastImage: d4870d58f5936111c56218dbd7fcfc18e65b58ff
   RNFBApp: cd70a6c061bc485994e28c7d58ab760538850f0e
   RNFBMessaging: c32b623b46dbbabf19079f801f053be75f428398
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNI18n: e2f7e76389fcc6e84f2c8733ea89b92502351fd8
   RNImageCropPicker: e641bf83ac47324994cac139bde74635ec52c17c
   RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
   RNScreens: f0d7a2a440a8ba9f4574ca1ddb3368f473891be4
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
+  SDWebImage: 7acbb57630ac7db4a495547fb73916ff3e432f6b
+  SDWebImageWebPCoder: d0dac55073088d24b2ac1b191a71a8f8d0adac21
   TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
   Yoga: 3ebccbdd559724312790e7742142d062476b698e
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
   YoutubePlayer-in-WKWebView: cfbf46da51d7370662a695a8f351e5fa1d3e1008
 
-PODFILE CHECKSUM: cc64089dac6461c6a9751457c1e7a22a0aea274d
+PODFILE CHECKSUM: d813a7a529c04f4ed02dcce2852a84914d3c82d8
 
 COCOAPODS: 1.10.1

package.json

@@ -14,6 +14,7 @@
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/checkbox": "^0.5.7",
     "@react-native-community/masked-view": "^0.1.10",
+    "@react-native-community/netinfo": "^6.0.0",
     "@react-native-firebase/app": "^7.1.0",
     "@react-native-firebase/messaging": "^7.1.0",
     "@react-navigation/bottom-tabs": "^5.11.7",
@@ -31,7 +32,9 @@
     "react-native-bootsplash": "^3.2.0",
     "react-native-confirmation-code-field": "^6.5.1",
     "react-native-datepicker": "^1.7.2",
+    "react-native-fast-image": "^8.3.4",
     "react-native-gesture-handler": "^1.9.0",
+    "react-native-i18n": "^2.0.15",
     "react-native-image-crop-picker": "^0.36.0",
     "react-native-indicators": "^0.17.0",
     "react-native-linear-gradient": "^2.5.6",

src/Reducers/index.js

@@ -3,13 +3,14 @@ import {combineReducers} from 'redux';
 import ModalLoadingReducer from './ModalLoading';
 import SnackReducer from './SnackReducer';
 import ScreenInitReducer from './ScreenInit';
-
+import languageReducer from './languageReducer';
 // @ts-ignore
 const rootReducer = combineReducers({
   userReducer,
   ModalLoadingReducer,
   SnackReducer,
   ScreenInitReducer,
+  languageReducer,
 });
 
 export default rootReducer;

src/Reducers/languageReducer.js

+import {CHANGE_LANGUAGE} from './../actions/actionTypes';
+
+var initialState = {
+  language: 'vi',
+};
+
+var languageReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case CHANGE_LANGUAGE: {
+      return {language: action.language};
+    }
+    default:
+      return state;
+  }
+};
+
+export default languageReducer;

src/RootView.js

@@ -6,17 +6,22 @@ import StackNavigation from './routers/StackNavigation';
 import Modal from 'react-native-modal';
 import {SkypeIndicator} from 'react-native-indicators';
 import {enableScreens} from 'react-native-screens';
+import NoInternetComponent from './components/NoInternet';
 
 enableScreens();
 
 const RootView = (props) => {
   return (
-    <View style={{flex: 1}}>
-      <Modal isVisible={props.loadingModal.isVisible}>
-        <SkypeIndicator color={'white'} />
-      </Modal>
-      <StackNavigation />
-    </View>
+    <>
+      <View style={{flex: 1}}>
+        <Modal isVisible={props.loadingModal.isVisible}>
+          <SkypeIndicator color={'white'} />
+        </Modal>
+
+        <StackNavigation />
+      </View>
+      <NoInternetComponent />
+    </>
   );
 };
 

src/Screens/Account/AccountView.js

@@ -3,6 +3,7 @@ import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
 import HeaderDrawer from '../../components/Header/HeaderDrawer';
 import {WIDTHXD, HEIGHTXD} from '../../Config/Functions';
 import R from '../../assets/R';
+import AppText from '../../components/AppText';
 import {useNavigation} from '@react-navigation/native';
 import {
   USERINFOR,
@@ -19,47 +20,47 @@ const AccountView = (props) => {
 
   return (
     <View>
-      <HeaderDrawer title={'Tài khoản'} />
+      <HeaderDrawer title={'Account'} />
       <View style={styles.container}>
         <TouchableOpacity
           onPress={() => navigate.navigate(PROFILE)}
           style={styles.containerItem}>
           <Image source={R.images.iconUser} style={styles.imgIcon} />
-          <Text>Thông tin cá nhân</Text>
+          <AppText i18nKey={'MyProfile'}>Thông tin cá nhân</AppText>
         </TouchableOpacity>
         <TouchableOpacity
           onPress={() => navigate.navigate(AccountVerification)}
           style={styles.containerItem}>
           <Image source={R.images.iconUserAccuracy} style={styles.imgIcon} />
-          <Text>Xác thực tài khoản</Text>
+          <AppText i18nKey={'VerifyAccount'}>Xác thực tài khoản</AppText>
         </TouchableOpacity>
 
         <TouchableOpacity
           onPress={() => navigate.navigate(PAYMENTS)}
           style={styles.containerItem}>
           <Image source={R.images.iconList} style={styles.imgIcon} />
-          <Text>Các khoản thanh toán</Text>
+          <AppText i18nKey={'Payments'}>Các khoản thanh toán</AppText>
         </TouchableOpacity>
 
         <TouchableOpacity
           onPress={() => navigate.navigate(ROSE)}
           style={styles.containerItem}>
           <Image source={R.images.iconRose} style={styles.imgIcon} />
-          <Text>Hoa hồng</Text>
+          <AppText i18nKey={'Rose'}>Hoa hồng</AppText>
         </TouchableOpacity>
 
         <TouchableOpacity
           onPress={() => navigate.navigate(BONUSTEAM)}
           style={styles.containerItem}>
           <Image source={R.images.iconWallet} style={styles.imgIcon} />
-          <Text>Tiền thưởng đội nhóm</Text>
+          <AppText i18nKey={'TeamBonus'}>Tiền thưởng đội nhóm</AppText>
         </TouchableOpacity>
 
         <TouchableOpacity
           onPress={() => navigate.navigate(MYGROUP)}
           style={styles.containerItem}>
           <Image source={R.images.moneyteam} style={styles.imgIcon} />
-          <Text>Đối tác của tôi</Text>
+          <AppText i18nKey={'MyPartner'}>Đối tác của tôi</AppText>
         </TouchableOpacity>
       </View>
     </View>

src/Screens/Account/Contract.js

@@ -9,7 +9,7 @@ const Contract = (props) => {
   console.log(props.user);
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} title={'Hợp đồng'} />
+      <HeaderBack isWhite={true} title={'Contract'} />
 
       <WebView
         androidHardwareAccelerationDisabled={true}

src/Screens/Account/PacrtCQG/PacketCQG.js

@@ -136,7 +136,7 @@ const PacketCQG = (props) => {
 
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Mở tài khoản CQG'} />
+      <HeaderBack title={'OpenAccountCQG'} />
       <ScrollView showsVerticalScrollIndicator={false}>
         <View style={styles.container}>
           <Text style={styles.txtNote}>

src/Screens/AccountVerification/AccountVerificationView.js

@@ -20,7 +20,7 @@ import {connect} from 'react-redux';
 const AccountVerificationView = (props) => {
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} title={'Xác minh tài khoản'} />
+      <HeaderBack isWhite={true} title={'AccountVerify'} />
       <Tab.Navigator
         initialRouteName="GeneralInfor"
         tabBarOptions={{

src/Screens/Action/Deposit/ChooseMethod.js

@@ -26,7 +26,7 @@ const MethodPayView = (props) => {
 
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Chọn phương thức thanh toán'} />
+      <HeaderBack title={'SelectPaymentMethod'} />
       <View style={{flex: 1}}>
         <FlatList
           keyExtractor={(item) => item.id}

src/Screens/Action/Deposit/DepositView.js

@@ -7,7 +7,7 @@ import {WebView} from 'react-native-webview';
 const DepositView = (props) => {
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} title={'Nạp tiền'} />
+      <HeaderBack isWhite={true} title={'Deposit'} />
       <WebView
         androidHardwareAccelerationDisabled={true}
         source={{uri: props.urlCheckout}}

src/Screens/Action/History/DetailHistory.js

@@ -7,7 +7,7 @@ import {WebView} from 'react-native-webview';
 const DetailHistory = (props) => {
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} title={'Nạp tiền'} />
+      <HeaderBack isWhite={true} title={'Deposit'} />
       <WebView
         androidHardwareAccelerationDisabled={true}
         source={{

src/Screens/Action/History/HistoryView.js

@@ -10,36 +10,36 @@ import {
 import HeaderBack from '../../../components/Header/HeaderBack';
 import Item from './Item';
 import {getFontXD} from '../../../Config/Functions';
+import AppText from '../../../components/AppText';
 
 const Fillters = [
   {
     id: '1',
-    name: 'Tất cả',
+    name: 'All',
     value: 'ALL',
   },
   {
     id: '2',
-    name: 'Nạp tiền',
+    name: 'Deposit',
     value: 'DEPOSIT',
   },
   {
     id: '3',
-    name: 'Rút tiền',
+    name: 'Withdraw',
     value: 'WITHDRAW',
   },
   {
     id: '4',
-    name: 'Chuyển khoản',
+    name: 'Withdraw',
     value: 'TRANSFER',
   },
 ];
-
 const HistoryView = (props) => {
   const {isRefresh, onRefresh, onLoadMore, data, selected, setSelected} = props;
 
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} title={'Lịch sử'} />
+      <HeaderBack isWhite={true} title={'History'} />
       <View style={{flex: 1}}>
         <View style={styles.headerContainer}>
           <ScrollView horizontal showsHorizontalScrollIndicator={false}>
@@ -51,13 +51,14 @@ const HistoryView = (props) => {
                   styles.itemFillter,
                   selected == e.value ? {borderColor: '#1473E6'} : null,
                 ]}>
-                <Text
+                <AppText
+                  i18nKey={e.name}
                   style={[
                     styles.txtFillter,
                     selected == e.value ? {color: '#1473E6'} : {},
                   ]}>
                   {e.name}
-                </Text>
+                </AppText>
               </TouchableOpacity>
             ))}
           </ScrollView>
@@ -66,13 +67,14 @@ const HistoryView = (props) => {
         {data.length == 0 ? (
           <View
             style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
-            <Text
+            <AppText
+              i18nKey={'NoData'}
               style={{
-                fontSize: getFontXD(46),
+                fontSize: 18,
                 fontWeight: 'bold',
               }}>
-              Không có giao dịch nào!
-            </Text>
+              Không có dữ liệu!
+            </AppText>
           </View>
         ) : (
           <FlatList

src/Screens/Action/Transfer/TransferView.js

@@ -8,7 +8,7 @@ import {HEIGHTXD} from '../../../Config/Functions';
 const TransferView = (props) => {
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Chuyển khoản'} />
+      <HeaderBack title={'Transfer'} />
       <View
         style={{
           flex: 1,

src/Screens/Action/Wallet/Tab/Success.js

@@ -3,6 +3,7 @@ import {View, Text, FlatList} from 'react-native';
 import HeaderBack from '../../../../components/Header/HeaderBack';
 import Item from './Item';
 import {getListTransaction} from '../../../../apis/Functions/Widthdraw';
+import AppText from '../../../../components/AppText';
 
 const Success = (props) => {
   const [page, setPage] = useState(1);
@@ -69,13 +70,14 @@ const Success = (props) => {
     <View style={{flex: 1}}>
       {data.length == 0 ? (
         <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
-          <Text
+          <AppText
+            i18nKey={'NoData'}
             style={{
               fontSize: 18,
               fontWeight: 'bold',
             }}>
-            Không có thông báo nào!
-          </Text>
+            Không có dữ liệu!
+          </AppText>
         </View>
       ) : (
         <FlatList

src/Screens/Action/Wallet/Tab/Watting.js

@@ -4,6 +4,7 @@ import HeaderBack from '../../../../components/Header/HeaderBack';
 import Item from './Item';
 import {getListTransaction} from '../../../../apis/Functions/Widthdraw';
 import {useNavigation} from '@react-navigation/native';
+import AppText from '../../../../components/AppText';
 const Watting = (props) => {
   const [page, setPage] = useState(1);
   const [data, setData] = useState([]);
@@ -74,13 +75,14 @@ const Watting = (props) => {
     <View style={{flex: 1}}>
       {data.length == 0 ? (
         <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
-          <Text
+          <AppText
+            i18nKey={'NoData'}
             style={{
               fontSize: 18,
               fontWeight: 'bold',
             }}>
-            Không có thông báo nào!
-          </Text>
+            Không có dữ liệu!
+          </AppText>
         </View>
       ) : (
         <FlatList

src/Screens/Action/Wallet/Wallet.js

@@ -14,7 +14,7 @@ const Wallet = (props) => {
   const navigate = useNavigation();
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} title={'Ví tiền'} />
+      <HeaderBack isWhite={true} title={'Transfer'} />
 
       <View style={{flex: 1, backgroundColor: 'red'}}>
         <Tab.Navigator

src/Screens/Action/Wallet/WalletDeposit.js

@@ -59,7 +59,7 @@ const WalletDeposit = (props) => {
   };
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Nạp tiền đầu tư'} />
+      <HeaderBack title={'InvestmentDeposit'} />
       <View style={styles.container}>
         <View style={styles.wrapTop}>
           <View style={styles.itemTop}>

src/Screens/Action/Wallet/WalletWithdraw.js

@@ -116,7 +116,7 @@ const WalletWithdraw = (props) => {
       keyboardVerticalOffset={-50}>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={{flex: 1}}>
-          <HeaderBack title={'Rút tiền'} />
+          <HeaderBack title={'Withdraw'} />
           <View style={styles.container}>
             <View style={styles.wrapTop}>
               <View style={styles.itemTop}>

src/Screens/Action/Withdraw/WithdrawView.js

@@ -26,7 +26,7 @@ const WithdrawView = (props) => {
 
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Chọn phương thức thanh toán'} />
+      <HeaderBack title={'SelectPaymentMethod'} />
       <View style={{flex: 1}}>
         <FlatList
           keyExtractor={(item) => item.id}

src/Screens/Authen/ConfirmEmail.js

@@ -45,7 +45,7 @@ const ConfirmEmail = (props) => {
 
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Quên mật khẩu'} />
+      <HeaderBack title={'ForgotPassword'} />
       <View style={styles.container}>
         <View style={styles.wrap}>
           <View style={styles.containerCode}>

src/Screens/Authen/ConfirmOTP.js

@@ -66,7 +66,7 @@ const ConfirmOTP = (propsa) => {
 
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Xác thực OTP'} />
+      <HeaderBack title={'VerifyOTP'} />
 
       <View style={styles.container}>
         <View style={{height: 20}} />

src/Screens/Authen/NewPassWord.js

@@ -59,7 +59,7 @@ const NewPassword = (props) => {
 
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Thay đổi mật khẩu mới'} />
+      <HeaderBack title={'ChangeNewPassword'} />
 
       <View style={styles.container}>
         <View style={styles.wrap}>

src/Screens/Exchange/ExchangeView.js

@@ -4,26 +4,27 @@ import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
 import HeaderSearch from '../../components/Header/HeaderSearch';
 import {getFontXD} from '../../Config/Functions';
 import Item from './Item';
+import AppText from '../../components/AppText';
 
 const Fillters = [
   {
     id: '1',
-    name: 'Tất cả',
+    name: 'All',
     value: 'all',
   },
   {
     id: '2',
-    name: 'Nạp tiền',
+    name: 'Deposit',
     value: 'deposit',
   },
   {
     id: '3',
-    name: 'Rút tiền',
+    name: 'Withdraw',
     value: 'withdraw',
   },
   {
     id: '4',
-    name: 'Chuyển khoản',
+    name: 'Withdraw',
     value: 'exchange',
   },
 ];
@@ -99,13 +100,14 @@ const ExchangeView = (props) => {
                 styles.itemFillter,
                 selected == item.id ? {borderColor: '#1473E6'} : null,
               ]}>
-              <Text
+              <AppText
+                i18nKey={e.name}
                 style={[
                   styles.txtFillter,
                   selected == item.id ? {color: '#1473E6'} : {},
                 ]}>
                 {item.name}
-              </Text>
+              </AppText>
             </TouchableOpacity>
           )}
         />

src/Screens/Feedback/FeedbackView.js

@@ -62,7 +62,7 @@ const FeedbackView = (props) => {
       keyboardVerticalOffset={-50}>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={{flex: 1}}>
-          <HeaderBack isWhite={true} title={'Gửi phản hồi'} />
+          <HeaderBack isWhite={true} title={'SendFeedback'} />
           <View style={styles.container}>
             <Text style={styles.txt}>Đánh giá dịch vụ của DCV Invest</Text>
 

src/Screens/Home/Footer.js

@@ -3,7 +3,7 @@ import {View, Text, StyleSheet, Image} from 'react-native';
 import Icon from 'react-native-vector-icons/AntDesign';
 import R from '../../assets/R';
 import {WIDTHXD, HEIGHTXD, getFontXD, toPriceVnd} from '../../Config/Functions';
-
+import AppText from '../../components/AppText';
 const Footer = (props) => {
   return (
     <View style={{marginHorizontal: 20, marginTop: 10}}>
@@ -12,7 +12,9 @@ const Footer = (props) => {
           <Image source={R.images.moneyteam} style={styles.imgIcon} />
         </View>
         <View style={{flex: 1, paddingHorizontal: 15}}>
-          <Text style={styles.txt}>Doanh thu của đội</Text>
+          <AppText i18nKey={'RevenueTeam'} style={styles.txt}>
+            Doanh thu của đội
+          </AppText>
           <Text style={styles.txtMoney}>0 Đ</Text>
         </View>
         <View style={{justifyContent: 'center', alignItems: 'center'}}>
@@ -25,7 +27,9 @@ const Footer = (props) => {
           <Image source={R.images.moneysupport} style={styles.imgIcon} />
         </View>
         <View style={{flex: 1, paddingHorizontal: 15}}>
-          <Text style={styles.txt}>Doanh thu nhà tài trợ</Text>
+          <AppText i18nKey={'RevenueDonors'} style={styles.txt}>
+            Doanh thu nhà tài trợ
+          </AppText>
           <Text style={styles.txtMoney}> 0 Đ</Text>
         </View>
         <View style={{justifyContent: 'center', alignItems: 'center'}}>
@@ -38,7 +42,9 @@ const Footer = (props) => {
           <Image source={R.images.moneyinvest} style={styles.imgIcon} />
         </View>
         <View style={{flex: 1, paddingHorizontal: 15}}>
-          <Text style={styles.txt}>Đầu tư</Text>
+          <AppText i18nKey={'Invset'} style={styles.txt}>
+            Đầu tư
+          </AppText>
           <Text style={styles.txtMoney}>0 Đ</Text>
         </View>
         <View style={{justifyContent: 'center', alignItems: 'center'}}>

src/Screens/Home/HomeView.js

@@ -10,6 +10,8 @@ import HeaderHome from '../../components/Header/HeaderHome';
 import Footer from './Footer';
 import {HEIGHT, HEIGHTXD, toPriceVnd, getFontXD} from '../../Config/Functions';
 import R from '../../assets/R';
+import AppText from '../../components/AppText';
+
 const HomeView = (props) => {
   const {total_deposit, total_withdraw} = props.data;
   return (
@@ -23,7 +25,9 @@ const HomeView = (props) => {
           <View style={styles.row}>
             <View style={styles.row}>
               <View style={styles.itemMenu}>
-                <Text style={styles.txtTitle}>Nạp tiền</Text>
+                <AppText i18nKey={'Deposit'} style={styles.txtTitle}>
+                  Nạp tiền
+                </AppText>
                 <Text style={styles.txtMoney}>
                   {' '}
                   {total_deposit == 0 ? 0 : toPriceVnd(total_deposit)} Đ{' '}
@@ -33,7 +37,9 @@ const HomeView = (props) => {
                 style={{width: 0.5, backgroundColor: R.colors.borderGray}}
               />
               <View style={styles.itemMenu}>
-                <Text style={styles.txtTitle}>Rút tiền</Text>
+                <AppText i18nKey={'Withdraw'} style={styles.txtTitle}>
+                  Rút tiền
+                </AppText>
                 <Text style={styles.txtMoney}>
                   {' '}
                   {total_withdraw == 0 ? 0 : toPriceVnd(total_withdraw)} Đ{' '}
@@ -44,17 +50,20 @@ const HomeView = (props) => {
           <View style={{height: 0.5, backgroundColor: R.colors.borderGray}} />
           <View style={styles.row}>
             <View style={styles.itemMenu}>
-              <Text style={styles.txtTitle}>Hoa hồng</Text>
+              <AppText i18nKey={'Rose'} style={styles.txtTitle}>
+                Hoa hồng
+              </AppText>
               <Text style={styles.txtMoney1}>0 Đ </Text>
             </View>
             <View style={{width: 0.5, backgroundColor: R.colors.borderGray}} />
             <View style={styles.itemMenu}>
-              <Text style={styles.txtTitle}>Lợi nhuận</Text>
+              <AppText i18nKey={'Profit'} style={styles.txtTitle}>
+                Lợi nhuận
+              </AppText>
               <Text style={styles.txtMoney1}>0 Đ</Text>
             </View>
           </View>
         </View>
-
         <Footer />
       </ScrollView>
     </ImageBackground>

src/Screens/LegalDocument/Business.js

@@ -9,7 +9,7 @@ const Business = (props) => {
   const navigate = useNavigation();
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Kinh doanh chung'} />
+      <HeaderBack title={'GeneralBusiness'} />
       <View style={styles.container}>
         <Text
           style={{

src/Screens/LegalDocument/Customer.js

@@ -9,7 +9,7 @@ const Customer = (props) => {
   const navigate = useNavigation();
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Khách hàng'} />
+      <HeaderBack title={'Customer'} />
       <View style={styles.container}>
         <Text
           style={{

src/Screens/LegalDocument/Partner.js

@@ -9,7 +9,7 @@ const Partner = (props) => {
   const navigate = useNavigation();
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Quan hệ đối tác'} />
+      <HeaderBack title={'Partnership'} />
       <View style={styles.container}>
         <Text
           style={{

src/Screens/Menu/BonusTeam/BonusTeam.js

@@ -7,7 +7,7 @@ import PickerSearch from '../../../components/Picker/PickerSearch';
 const BonusTeam = (props) => {
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Tiền thưởng đội nhóm'} />
+      <HeaderBack title={'TeamBonus'} />
       <View
         style={{
           flex: 1,

src/Screens/Menu/MyGroup/MyGroup.js

@@ -7,7 +7,7 @@ import {connect} from 'react-redux';
 const MyGroup = (props) => {
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} title={'Đối tác của tôi'} />
+      <HeaderBack isWhite={true} title={'MyPartner'} />
       <WebView
         androidHardwareAccelerationDisabled={true}
         source={{

src/Screens/Menu/Payments/Payments.js

 import React from 'react';
 import {View, FlatList, Text} from 'react-native';
-import HeaderSearch from '../../../components/Header/HeaderBack';
+import HeaderBack from '../../../components/Header/HeaderBack';
 import Item from './Item';
 
 const data = [
@@ -22,7 +22,7 @@ const data = [
 const Payments = (props) => {
   return (
     <View style={{flex: 1}}>
-      <HeaderSearch isWhite={false} title={'Các khoản thanh toán'} />
+      <HeaderBack isWhite={false} title={'Payments'} />
 
       <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
         <Text

src/Screens/Menu/Profile/ProfileView.js

@@ -16,7 +16,7 @@ const Tab = createMaterialTopTabNavigator();
 const ProfileView = (props) => {
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} title={'Thông tin cá nhân'} />
+      <HeaderBack isWhite={true} title={'MyProfile'} />
 
       <Tab.Navigator
         initialRouteName="GeneralInfor"

src/Screens/Menu/Rose/Rose.js

 import React, {useState} from 'react';
-import {View, Text, FlatList} from 'react-native';
+import {View, Text, FlatList, TouchableOpacity} from 'react-native';
 import HeaderSB from '../../../components/Header/HeaderSB';
 import Item from './Item';
 import TextMoney from '../../../components/Input/InputMoney';
 import {toPriceVnd, numberFormat} from '../../../Config/Functions';
+import {changeLanguage} from '../../../actions/language';
+import {connect} from 'react-redux';
 const data = [
   {
     id: '1',
@@ -57,11 +59,18 @@ const data = [
   },
 ];
 
+import AppText from '../../../components/AppText';
+
 const Rose = (props) => {
   const [text, setText] = useState('');
   return (
     <View style={{flex: 1}}>
-      <HeaderSB title={'Hoa hồng'} />
+      <HeaderSB title={'Rose'} />
+      <TouchableOpacity onPress={() => props.changeLanguage('en')}>
+        <Text>Change</Text>
+      </TouchableOpacity>
+
+      <AppText i18nKey={'SetLanguage'}></AppText>
 
       <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
         <Text
@@ -84,4 +93,10 @@ const Rose = (props) => {
   );
 };
 
-export default Rose;
+const mapStateToProps = (state) => {
+  return {
+    loadingModal: state.ModalLoadingReducer,
+  };
+};
+
+export default connect(mapStateToProps, {changeLanguage})(Rose);

src/Screens/MethodPay/AddMethod.js

@@ -96,7 +96,7 @@ const AddMethodPay = (props) => {
       keyboardVerticalOffset={-50}>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={{flex: 1}}>
-          <HeaderBack title={'Thêm phương thức thanh toán'} />
+          <HeaderBack title={'AddPaymentMethod'} />
           <View style={styles.container}>
             <View style={{flex: 1}}>
               <Text style={styles.txtTitle}>Chọn ngân hàng </Text>

src/Screens/MethodPay/MethodPayDetail.js

@@ -100,7 +100,7 @@ const MethodPayDetail = (props) => {
       keyboardVerticalOffset={-50}>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <View style={{flex: 1}}>
-          <HeaderBack title={'Chi tiết phương thức'} />
+          <HeaderBack title={'DetailMethod'} />
           <View style={{flex: 1}}>
             <View style={styles.container}>
               <BankInfor

src/Screens/MethodPay/MethodPayView.js

@@ -15,7 +15,7 @@ const MethodPayView = (props) => {
 
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Cài đặt phương thức thanh toán'} />
+      <HeaderBack title={'PaymentSetting'} />
       <View style={{flex: 1}}>
         <FlatList
           keyExtractor={(item) => item.method}

src/Screens/NewFeed/DetailNew.js

@@ -9,7 +9,7 @@ const DepositView = (props) => {
   console.log(props.route);
   return (
     <View style={{flex: 1}}>
-      <HeaderBack isWhite={true} title={'Chi tiết'} />
+      <HeaderBack isWhite={true} title={'Detail'} />
       <WebView
         androidHardwareAccelerationDisabled={true}
         domStorageEnabled={false}

src/Screens/NewFeed/Media/MediaDetail.js

@@ -67,7 +67,7 @@ const MediaDetail = (props) => {
   };
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Chi tiết video'} />
+      <HeaderBack title={'DetailVideo'} />
       {data ? (
         <View style={{flex: 1}}>
           <YouTube

src/Screens/NewFeed/NewFeed.js

@@ -6,6 +6,7 @@ import Tab2 from './Tab2/Tab2';
 import Media from './Media/Media';
 import Trading from './Tradding/Tradding';
 import Calendar from './Calendar/Calendar';
+import I18n from '../../helper/i18/i18n';
 
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 const Tab = createMaterialTopTabNavigator();
@@ -14,7 +15,7 @@ import HeaderDrawer from '../../components/Header/HeaderDrawer';
 const NewFeed = (props) => {
   return (
     <View style={{flex: 1}}>
-      <HeaderDrawer title={'Tin tức'} isWhite={true} />
+      <HeaderDrawer title={'News'} isWhite={true} />
       <View style={{flex: 1, backgroundColor: 'white'}}>
         <Tab.Navigator
           initialRouteName="GeneralInfor"
@@ -29,7 +30,7 @@ const NewFeed = (props) => {
           <Tab.Screen
             name="Tab1"
             component={Tab1}
-            options={{tabBarLabel: 'Tin tức'}}
+            options={{tabBarLabel: I18n.t('News')}}
           />
           <Tab.Screen
             name="Tab2"
@@ -39,17 +40,17 @@ const NewFeed = (props) => {
           <Tab.Screen
             name="Tab3"
             component={Tab2}
-            options={{tabBarLabel: 'Bảng giá'}}
+            options={{tabBarLabel: I18n.t('PriceTable')}}
           />
           <Tab.Screen
             name="Tab4"
             component={Trading}
-            options={{tabBarLabel: 'Biểu đồ'}}
+            options={{tabBarLabel: I18n.t('Chart')}}
           />
           <Tab.Screen
             name="CALENDAR"
             component={Calendar}
-            options={{tabBarLabel: 'Lịch thị trường'}}
+            options={{tabBarLabel: I18n.t('Calendar')}}
           />
         </Tab.Navigator>
       </View>

src/Screens/Notification/NotificaitonView.js

@@ -11,26 +11,27 @@ import {
 import HeaderDrawer from '../../components/Header/HeaderDrawer';
 import Item from './Item';
 import {getFontXD} from '../../Config/Functions';
+import AppText from '../../components/AppText';
 
 const Fillters = [
   {
     id: '1',
-    name: 'Tất cả',
+    name: 'All',
     value: 'ALL',
   },
   {
     id: '2',
-    name: 'Nạp tiền',
+    name: 'Deposit',
     value: 'DEPOSIT',
   },
   {
     id: '3',
-    name: 'Rút tiền',
+    name: 'Withdraw',
     value: 'WITHDRAW',
   },
   {
     id: '4',
-    name: 'Chuyển khoản',
+    name: 'Transfer',
     value: 'TRANSFER',
   },
 ];
@@ -40,7 +41,7 @@ const NotificaitonView = (props) => {
 
   return (
     <View style={{flex: 1}}>
-      <HeaderDrawer isWhite={true} title={'Thông báo'} />
+      <HeaderDrawer isWhite={true} title={'Notification'} />
 
       <View style={styles.headerContainer}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
@@ -52,13 +53,14 @@ const NotificaitonView = (props) => {
                 styles.itemFillter,
                 fillter == e.value ? {borderColor: '#1473E6'} : null,
               ]}>
-              <Text
+              <AppText
+                i18nKey={e.name}
                 style={[
                   styles.txtFillter,
                   fillter == e.value ? {color: '#1473E6'} : {},
                 ]}>
                 {e.name}
-              </Text>
+              </AppText>
             </TouchableOpacity>
           ))}
         </ScrollView>
@@ -66,13 +68,14 @@ const NotificaitonView = (props) => {
 
       {data.length == 0 ? (
         <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
-          <Text
+          <AppText
+            i18nKey={'NoData'}
             style={{
               fontSize: 18,
               fontWeight: 'bold',
             }}>
-            Không có thông báo nào!
-          </Text>
+            Không có dữ liệu!
+          </AppText>
         </View>
       ) : (
         <FlatList

src/Screens/ServiceCustomer/ServiceCustomerView.js

@@ -6,7 +6,7 @@ import HeaderBack from '../../components/Header/HeaderBack';
 const ServiceCustomerView = (props) => {
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Liên hệ vơi chúng tôi'} />
+      <HeaderBack title={'CustomerCare'} />
       <View
         style={{
           flex: 1,

src/Screens/Setting/SettingView.js

@@ -19,12 +19,10 @@ const dataTest = [
 const SettingView = (props) => {
   const [isEnabled, setIsEnabled] = useState(true);
   const toggleSwitch = () => setIsEnabled((previousState) => !previousState);
-
   const [language, setLanguage] = useState(dataTest[0].name);
-
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Cài đặt'} />
+      <HeaderBack title={'Setting'} />
       <View style={{flex: 1, padding: 10}}>
         <View style={styles.row}>
           <Text style={styles.txtTitle}>Bật thông báo</Text>

src/actions/actionTypes.js

@@ -20,3 +20,4 @@ export const SAVENAVIGATE = 'SAVENAVIGATE';
 
 export const NEW_SCREEN = 'NEW_SCREEN';
 export const CLEAR_SCREEN = 'CLEAR_SCREEN';
+export const CHANGE_LANGUAGE = 'CHANGE_LANGUAGE';

src/actions/language.js

+import {CHANGE_LANGUAGE} from './actionTypes';
+
+export const changeLanguage = (language) => {
+  return {
+    type: CHANGE_LANGUAGE,
+    language,
+  };
+};

src/assets/images.js

@@ -66,6 +66,7 @@ const images = {
   bgLogin: require('./images/bgLogin.png'),
   iconPaper: require('./images/iconPaper.png'),
   iconNote: require('./images/iconNote.png'),
+  bg_cannot_connect: require('./images/bg_cannot_connect.png'),
 };
 
 export default images;

src/components/AppText.js

+import React, {PureComponent} from 'react';
+import {Text} from 'react-native';
+
+import {connect} from 'react-redux';
+import I18n from '../helper/i18/i18n';
+
+class AppText extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      i18n: I18n,
+    };
+  }
+
+  componentWillMount() {
+    const {language} = this.props;
+    if (language) this.setMainLocaleLanguage(language);
+  }
+
+  componentWillReceiveProps = (nextProps) => {
+    const {language} = nextProps;
+    if (language) this.setMainLocaleLanguage(language);
+  };
+
+  setMainLocaleLanguage = (language) => {
+    let i18n = this.state.i18n;
+    i18n.locale = language;
+    this.setState({i18n});
+  };
+
+  render() {
+    const {i18nKey, style} = this.props;
+    const {i18n} = this.state;
+    return (
+      <Text style={style}>
+        {i18nKey ? i18n.t(i18nKey) : this.props.children}
+      </Text>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    language: state.languageReducer.language,
+  };
+};
+
+export default connect(mapStateToProps, null)(AppText);

src/components/Header/Drawer.js

@@ -18,48 +18,49 @@ import {
 } from '../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 import {connect} from 'react-redux';
+import AppText from '../AppText';
 
 const menus = [
   {
     id: '1',
-    title: 'Xác minh tài khoản',
+    title: 'AccountVerify',
     icon: R.images.iconUserCheck,
     screen: AccountVerification,
   },
   {
     id: '6',
-    title: 'Hợp đồng',
+    title: 'Contract',
     icon: R.images.iconContract,
     screen: CONTRACT,
   },
 
   {
     id: '2',
-    title: 'Cài đặt phương thức thanh toán',
+    title: 'PaymentSetting',
     icon: R.images.iconMethodPay,
     screen: METHODPAY,
   },
   {
     id: '3',
-    title: 'Liên hệ với dịch vụ khách hàng',
+    title: 'CustomerCare',
     icon: R.images.iconPhone,
     screen: SERVICECUSTOMER,
   },
   {
     id: '4',
-    title: 'Phản hồi',
+    title: 'Feedback',
     icon: R.images.iconMess,
     screen: FEEDBACK,
   },
   {
     id: '7',
-    title: 'Giấy tờ pháp lý',
+    title: 'LegalDocument',
     icon: R.images.iconPaper,
     screen: LEGALDOCUMENT,
   },
   {
     id: '5',
-    title: 'Cài đặt',
+    title: 'Setting',
     icon: R.images.iconSetting,
     screen: SETTING,
   },
@@ -97,7 +98,9 @@ const Drawer = (props) => {
             key={e.id}
             style={styles.containerItem}>
             <Image source={e.icon} style={styles.imgIcon} />
-            <Text style={styles.txtTitle}>{e.title}</Text>
+            <AppText i18nKey={e.title} style={styles.txtTitle}>
+              {e.title}
+            </AppText>
           </TouchableOpacity>
         ))}
       </View>
@@ -113,7 +116,9 @@ const Drawer = (props) => {
         }}
         style={styles.footer}>
         <Icon name={'logout'} size={25} color={'#F81515'} />
-        <Text style={styles.txtTitle}>Đăng xuất</Text>
+        <AppText i18nKey={'Logout'} Logout style={styles.txtTitle}>
+          Đăng xuất
+        </AppText>
       </TouchableOpacity>
     </View>
   );

src/components/Header/HeaderBack.js

@@ -19,6 +19,8 @@ import {connect} from 'react-redux';
 import {HEIGHTXD} from '../../Config/Functions';
 import {useNavigation} from '@react-navigation/native';
 import SnackBar from '../SnackBar';
+import AppText from '../AppText';
+
 const HeaderHome = (props) => {
   const {title, isWhite} = props;
   const navigate = useNavigation();
@@ -35,8 +37,9 @@ const HeaderHome = (props) => {
           onPress={() => navigate.goBack()}>
           <Image source={R.images.iconBack} style={styles.imgIcon} />
         </TouchableOpacity>
-
-        <Text style={styles.txtTitle}>{title}</Text>
+        <AppText i18nKey={title} style={styles.txtTitle}>
+          {title}
+        </AppText>
         <View style={{width: 35, height: 30}} />
       </View>
     </ImageBackground>

src/components/Header/HeaderDrawer.js

@@ -20,6 +20,8 @@ import {HEIGHTXD} from '../../Config/Functions';
 import Modal from 'react-native-modal';
 import Drawer from './Drawer';
 import SnackBar from '../SnackBar';
+import AppText from '../AppText';
+
 const HeaderDrawer = (props) => {
   const {title, isWhite} = props;
   const [isModalVisible, setModalVisible] = useState(false);
@@ -41,7 +43,9 @@ const HeaderDrawer = (props) => {
           <Image source={R.images.iconMenu} style={styles.imgIcon} />
         </TouchableOpacity>
 
-        <Text style={styles.txtTitle}>{title}</Text>
+        <AppText i18nKey={title} style={styles.txtTitle}>
+          {title}
+        </AppText>
         <View style={{width: 35, height: 30}} />
       </View>
       <Modal

src/components/Header/HeaderHome.js

@@ -19,6 +19,9 @@ import {HEIGHTXD, toPriceVnd} from '../../Config/Functions';
 import Clipboard from '@react-native-clipboard/clipboard';
 import SnackBar from '../SnackBar';
 import {useNavigation} from '@react-navigation/native';
+import I18n from '../../helper/i18/i18n';
+import AppText from '../../components/AppText';
+
 import {
   WITHDRAW,
   DEPOSIT,
@@ -37,7 +40,9 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
     return (
       <View style={{flex: 1, flexDirection: 'row'}}>
         <View style={styles.containerWallet}>
-          <Text style={styles.txtWallet}>Tài khoản ví</Text>
+          <AppText i18nKey={'AccountWallet'} style={styles.txtWallet}>
+            Tài khoản ví
+          </AppText>
           <View style={{flexDirection: 'row'}}>
             <Text style={styles.txtMoney}>
               {current_money == 0 ? 0 : toPriceVnd(current_money)}
@@ -47,7 +52,9 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
         </View>
         <View style={{width: 1, backgroundColor: '#EDEDF1', height: '100%'}} />
         <View style={styles.containerWallet}>
-          <Text style={styles.txtWallet}>Tài khoản CQG</Text>
+          <AppText i18nKey={'AccountCQG'} style={styles.txtWallet}>
+            Tài khoản CQG
+          </AppText>
           <View style={{flexDirection: 'row'}}>
             <Text style={styles.txtMoney}>
               {current_cqg_money == 0 ? 0 : toPriceVnd(current_cqg_money)}
@@ -61,7 +68,9 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
     return (
       <View style={{flex: 1, flexDirection: 'row'}}>
         <View style={styles.containerWallet}>
-          <Text style={styles.txtWallet}>Tài khoản ví</Text>
+          <AppText i18nKey={'AccountWallet'} style={styles.txtWallet}>
+            Tài khoản ví
+          </AppText>
           <View style={{flexDirection: 'row'}}>
             <Text style={styles.txtMoney}>
               {current_money == 0 ? 0 : toPriceVnd(current_money)}
@@ -71,9 +80,11 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
         </View>
         <View style={{width: 1, backgroundColor: '#EDEDF1', height: '100%'}} />
         <View style={styles.containerWallet}>
-          <Text style={[styles.txtWhite, {color: '#FFB721'}]}>
-            Chờ mờ TK CQG
-          </Text>
+          <AppText
+            i18nKey={'WaitOpenCQG'}
+            style={[styles.txtWhite, {color: '#FFB721'}]}>
+            Chờ mở TK CQG
+          </AppText>
         </View>
       </View>
     );
@@ -81,7 +92,9 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
     return (
       <View style={{flex: 1, flexDirection: 'row'}}>
         <View style={styles.containerWallet}>
-          <Text style={styles.txtWallet}>Tài khoản ví</Text>
+          <AppText i18nKey={'AccountWallet'} style={styles.txtWallet}>
+            Tài khoản ví
+          </AppText>
           <View style={{flexDirection: 'row'}}>
             <Text style={styles.txtMoney}>
               {' '}
@@ -98,7 +111,9 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
               navigate.navigate(PACKETCQG);
             }}
             style={styles.btn}>
-            <Text style={styles.txtWhite}>Mở tài khoản thật</Text>
+            <AppText i18nKey={'OpenAccountCQG'} style={styles.txtWhite}>
+              Mở tài khoản CQG
+            </AppText>
           </TouchableOpacity>
         </View>
       </View>
@@ -119,9 +134,19 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
             alignItems: 'center',
           }}
           source={R.images.iconBtnGreen}>
-          <Text style={{fontSize: getFontXD(52), color: 'white'}}>
-            {status == 2 ? 'Chờ xác minh' : 'Xác minh tài khoản'}
-          </Text>
+          {status == 2 ? (
+            <AppText
+              i18nKey={'WaitVerification'}
+              style={{fontSize: getFontXD(52), color: 'white'}}>
+              Chờ xác minh
+            </AppText>
+          ) : (
+            <AppText
+              i18nKey={'AccountVerify'}
+              style={{fontSize: getFontXD(52), color: 'white'}}>
+              Xác minh tài khoản
+            </AppText>
+          )}
         </ImageBackground>
       </TouchableOpacity>
     </View>
@@ -129,9 +154,24 @@ const renderWallet = (status, current_money, current_cqg_money, contract) => {
 };
 
 const renderLabel = (status) => {
-  if (status == 1) return <Text style={{color: '#E3434F'}}>Chưa xác minh</Text>;
-  if (status == 2) return <Text style={{color: '#FFB721'}}>Chờ xác minh</Text>;
-  if (status == 3) return <Text style={{color: '#17B217'}}>Đã xác minh</Text>;
+  if (status == 1)
+    return (
+      <AppText i18nKey={'NotVerified'} style={{color: '#E3434F'}}>
+        Chưa xác minh
+      </AppText>
+    );
+  if (status == 2)
+    return (
+      <AppText i18nKey={'Verified'} style={{color: '#FFB721'}}>
+        Chờ xác minh
+      </AppText>
+    );
+  if (status == 3)
+    return (
+      <AppText i18nKey={'WaitVerification'} style={{color: '#17B217'}}>
+        Đã xác minh
+      </AppText>
+    );
 };
 
 const HeaderHome = (props) => {
@@ -193,26 +233,26 @@ const HeaderHome = (props) => {
               onPress={() => navigate.navigate(CHOOSEMETHOD)}
               style={styles.wraper}>
               <Image style={styles.imgIcon} source={R.images.iconRecharge} />
-              <Text style={styles.txt}>Nạp tiền</Text>
+              <AppText i18nKey={'Deposit'} style={styles.txt} />
             </TouchableOpacity>
 
             <TouchableOpacity
               onPress={() => navigate.navigate(WALLETWITHDRAW)}
               style={styles.wraper}>
               <Image style={styles.imgIcon} source={R.images.iconWithdrawal} />
-              <Text style={styles.txt}>Rút tiền</Text>
+              <AppText i18nKey={'Withdraw'} style={styles.txt} />
             </TouchableOpacity>
             <TouchableOpacity
               onPress={() => navigate.navigate(TRANSFER)}
               style={styles.wraper}>
               <Image style={styles.imgIcon} source={R.images.iconTransfer} />
-              <Text style={styles.txt}>Chuyển khoản</Text>
+              <AppText i18nKey={'Transfer'} style={styles.txt} />
             </TouchableOpacity>
             <TouchableOpacity
               onPress={() => navigate.navigate(HISTORY)}
               style={styles.wraper}>
               <Image style={styles.imgIcon} source={R.images.iconHistory} />
-              <Text style={styles.txt}>Lịch sử</Text>
+              <AppText i18nKey={'History'} style={styles.txt} />
             </TouchableOpacity>
           </View>
         </View>

src/components/Header/HeaderNewFeed.js

@@ -19,6 +19,7 @@ import {connect} from 'react-redux';
 import {HEIGHTXD} from '../../Config/Functions';
 import Modal from 'react-native-modal';
 import Drawer from './Drawer';
+import AppText from '../../components/AppText';
 
 const HeaderHome = (props) => {
   const [isModalVisible, setModalVisible] = useState(false);
@@ -38,7 +39,9 @@ const HeaderHome = (props) => {
           <Image source={R.images.iconMenu} style={styles.imgIcon} />
         </TouchableOpacity>
 
-        <Text style={styles.txtTitle}>Tài khoản</Text>
+        <AppText i18nKey={'Account'} style={styles.txtTitle}>
+          Tài khoản
+        </AppText>
         <View style={styles.imgIcon} />
       </View>
       <Modal

src/components/Header/HeaderSB.js

@@ -22,6 +22,8 @@ import SnackBar from '../SnackBar';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {useNavigation} from '@react-navigation/native';
 
+import AppText from '../AppText';
+
 const HeaderSearch = (props) => {
   const {title, isWhite} = props;
 
@@ -55,7 +57,9 @@ const HeaderSearch = (props) => {
             value={txtSearch}
           />
         ) : (
-          <Text style={styles.txtTitle}>{title ? title : ''} </Text>
+          <AppText i18nKey={title} style={styles.txtTitle}>
+            {title ? title : ''}{' '}
+          </AppText>
         )}
         <TouchableOpacity onPress={toggleSearch}>
           {openSearch ? (

src/components/Header/HeaderSearch.js

@@ -57,7 +57,9 @@ const HeaderSearch = (props) => {
             value={txtSearch}
           />
         ) : (
-          <Text style={styles.txtTitle}>{title ? title : ''} </Text>
+          <AppText i18nKey={title} style={styles.txtTitle}>
+            {title}
+          </AppText>
         )}
         <TouchableOpacity onPress={toggleSearch}>
           {openSearch ? (

src/components/Input/InputIcon.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {View, Text, TextInput, StyleSheet, Image} from 'react-native';
 import R from '../../assets/R';
 import {WIDTHXD, HEIGHTXD, getFontXD} from '../../Config/Functions';
+import AppText from '../AppText';
 
 const InputIcon = (props) => {
   const {
@@ -18,7 +19,7 @@ const InputIcon = (props) => {
     <View style={container}>
       <Image source={icon} style={iconImg} />
       <View style={wrapRight}>
-        <Text>{title}</Text>
+        <AppText i18nKey={title}>{title}</AppText>
         <TextInput
           maxLength={maxLength}
           autoCapitalize="none"

src/components/NoInternet.js

+import React, {useEffect, useState} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import NetInfo from '@react-native-community/netinfo';
+import FastImage from 'react-native-fast-image';
+import R from '../assets/R';
+
+const NoInternetComponent = (props) => {
+  const [isConnected, setConnect] = useState(true);
+
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      console.log(state);
+      setConnect(state.isConnected);
+    });
+    return unsubscribe;
+  }, []);
+
+  return !isConnected ? (
+    <View style={styles.offlineContainer}>
+      <FastImage
+        source={R.images.bg_cannot_connect}
+        style={styles.imageStyle}
+      />
+      <Text style={styles.textStyle}>Không có kết nốt Internet</Text>
+      <Text style={styles.subTextStyle}>Kiểm tra lại đường truyền!</Text>
+      <TouchableOpacity
+        onPress={() => {
+          setTimeout(() => {
+            NetInfo.fetch().then((state) => {
+              setConnect(state.isConnected);
+            });
+          }, 3000);
+        }}>
+        <Text style={{alignSelf: 'center', color: 'blue'}}>Thử lại</Text>
+      </TouchableOpacity>
+    </View>
+  ) : (
+    <View style={{width: 0, height: 0}} />
+  );
+};
+
+const styles = StyleSheet.create({
+  offlineContainer: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+  },
+  offlineText: {
+    color: R.colors.white100,
+  },
+  textStyle: {
+    fontSize: 20,
+    color: 'black',
+    marginTop: 30,
+  },
+  subTextStyle: {
+    fontSize: 16,
+    color: R.colors.borderC,
+    marginVertical: 10,
+  },
+  imageStyle: {
+    width: '80%',
+    height: 200,
+  },
+});
+
+export default NoInternetComponent;

src/helper/FirebaseNotification.js

@@ -77,7 +77,6 @@ const FirebaseNotification = (props) => {
     }
   };
   const getFcmToken = async () => {
-    console.log('Chay vao day');
     let fcmToken = await AsyncStorage.getItem(KEY.FIREBASE);
     console.log('fcmToken save', fcmToken);
     if (!fcmToken) {

src/helper/i18/i18n.js

+import I18n from 'react-native-i18n';
+
+import en from './locales/en';
+import vi from './locales/vn';
+
+I18n.translations = {
+  en,
+  vi,
+};
+
+export default I18n;

src/helper/i18/locales/en.js

+export default {
+  greeting: 'Hi!',
+  home: 'Home',
+  contact: 'Contact',
+  setting: 'Setting',
+  SetLanguage: ' Set language',
+  MyProfile: 'My Profile',
+  VerifyAccount: 'Verify account',
+  Payments: 'Payments',
+  Rose: 'Rose',
+  TeamBonus: 'Team bonus',
+  MyPartner: 'My partner',
+  Account: 'Account',
+  Notification: 'Notification',
+  News: 'News',
+  Deposit: 'Deposit',
+  Withdraw: 'Withdraw',
+  Transfer: 'Transfer',
+  History: 'History',
+  NotVerified: 'Not verified',
+  Verified: 'Verified',
+  WaitVerification: 'Waiting verification',
+  AccountWallet: 'Account wallet',
+  Wallet: 'Wallet',
+  AccountCQG: 'Account CQG',
+  WaitOpenCQG: 'Wait open CQG',
+  OpenAccountCQG: 'Open account CQG',
+  AccountVerify: 'Account verify',
+  Profit: 'Profit',
+  RevenueTeam: 'Revenue team',
+  RevenueDonors: 'Revenue donors',
+  Invset: 'Invest',
+  Contract: 'Contract',
+  PaymentSetting: 'Payment method setting',
+  CustomerCare: 'Customer care',
+  Feedback: 'Feedback',
+  LegalDocument: 'Legal document',
+  Setting: 'Setting',
+  Logout: 'Logout',
+  SelectPaymentMethod: 'Select Payment Method',
+  InvestmentDeposit: 'Investment deposit',
+  ForgotPassword: 'Forgot password',
+  VerifyOTP: 'Verify OTP',
+  ChangeNewPassword: 'Change new password',
+  SendFeedback: 'Send feedback',
+  GeneralBusiness: 'General business',
+  Customer: 'Customer',
+  LegalDocuments: 'Legal documents',
+  Partnership: 'Partnership',
+  AddPaymentMethod: 'Add payment method',
+  DetailMethod: 'Detail method',
+  Detail: 'Detail',
+  DetailVideo: 'Detail video',
+  NoData: 'No data!',
+  All: 'All',
+  PriceTable: 'Price table',
+  Chart: 'Chart',
+  Calendar: 'Calendar',
+};

src/helper/i18/locales/vn.js

+export default {
+  greeting: 'Xin chào!',
+  home: 'Trang chủ',
+  contact: 'Liên hệ',
+  setting: 'Cài đặt',
+  SetLanguage: 'Chọn ngôn ngữ',
+  MyProfile: 'Thông tin cá nhân',
+  VerifyAccount: 'Xác thực tài khoản',
+  Payments: 'Các khoản thanh toán',
+  Rose: 'Hoa hồng',
+  TeamBonus: 'Tiền thưởng đội nhóm',
+  MyPartner: 'Đối tác của tôi',
+  Account: 'Tài khoản',
+  Notification: 'Thông báo',
+  News: 'Tin tức',
+  Deposit: 'Nạp tiền',
+  Withdraw: 'Rút tiền',
+  Transfer: 'Chuyển khoản',
+  History: 'Lịch sử',
+  NotVerified: 'Chưa xác minh',
+  Verified: 'Đã xác minh',
+  WaitVerification: 'Chờ xác minh',
+  AccountWallet: 'Tài khoản ví',
+  AccountCQG: 'Tài khoản CQG',
+  WaitOpenCQG: 'Chờ mở TK CQG',
+  OpenAccountCQG: 'Mở tài khoản CQG',
+  AccountVerify: 'Xác minh tài khoản',
+  Profit: 'Lợi nhuận',
+  RevenueTeam: 'Doanh thu của đội',
+  RevenueDonors: 'Doanh thu nhà tài trợ',
+  Invset: 'Đầu tư',
+  Contract: 'Hợp đồng',
+  PaymentSetting: 'Cài đặt phương thức thanh toán',
+  CustomerCare: 'Chăm sóc khách hàng',
+  Feedback: 'Phản hồi',
+  LegalDocument: 'Giấy tờ pháp lý',
+  Setting: 'Cài đặt',
+  Logout: 'Đăng xuất',
+  Wallet: 'Ví',
+  SelectPaymentMethod: 'Chọn phương thức thanh toán',
+  InvestmentDeposit: 'Nạp tiền đầu tư',
+  ForgotPassword: 'Quên mật khẩu',
+  VerifyOTP: 'Xác minh OTP',
+  ChangeNewPassword: 'Thay đổi mật khẩu mới',
+  SendFeedback: 'Gửi phản hồi',
+  GeneralBusiness: 'Kinh doanh chung',
+  Customer: 'Khách hàng',
+  LegalDocuments: 'Giấy tờ pháp lý',
+  Partnership: 'Quan hệ đối tác',
+  AddPaymentMethod: 'Thêm phương thức thanh toán',
+  DetailMethod: 'Chi tiết phương thức',
+  Detail: 'Chi tiết',
+  DetailVideo: 'Chi tiết video',
+  NoData: 'Không có dữ liệu!',
+  All: 'Tất cả',
+  PriceTable: 'Bảng giá',
+  Chart: 'Biểu đồ',
+  Calendar: 'Lịch thị trường',
+};

src/routers/PlussModal.js

@@ -22,6 +22,7 @@ import {
   WALLET,
   WALLETWITHDRAW,
 } from '../routers/ScreenNames';
+import AppText from '../components/AppText';
 
 const PlussModal = (props) => {
   const [isModalVisible, setModalVisible] = useState(false);
@@ -53,7 +54,9 @@ const PlussModal = (props) => {
               }}
               style={styles.wraper1}>
               <Image style={styles.imgIcon} source={R.images.iconWallet1} />
-              <Text style={styles.txt}>Ví tiền</Text>
+              <AppText i18nKey={'Wallet'} style={styles.txt}>
+                Ví tiền
+              </AppText>
             </TouchableOpacity>
             <TouchableOpacity
               onPress={() => {
@@ -62,7 +65,9 @@ const PlussModal = (props) => {
               }}
               style={styles.wraper1}>
               <Image style={styles.imgIcon} source={R.images.iconRecharge} />
-              <Text style={styles.txt}>Nạp tiền</Text>
+              <AppText i18nKey={'Deposit'} style={styles.txt}>
+                Nạp tiền
+              </AppText>
             </TouchableOpacity>
             <TouchableOpacity
               onPress={() => {
@@ -71,7 +76,9 @@ const PlussModal = (props) => {
               }}
               style={styles.wraper1}>
               <Image style={styles.imgIcon} source={R.images.iconWithdrawal} />
-              <Text style={styles.txt}>Rút tiền</Text>
+              <AppText i18nKey={'Withdraw'} style={styles.txt}>
+                Rút tiền
+              </AppText>
             </TouchableOpacity>
             <TouchableOpacity
               onPress={() => {
@@ -80,7 +87,9 @@ const PlussModal = (props) => {
               }}
               style={styles.wraper1}>
               <Image style={styles.imgIcon} source={R.images.iconTransfer} />
-              <Text style={styles.txt}>Chuyển khoản</Text>
+              <AppText i18nKey={'Transfer'} style={styles.txt}>
+                Chuyển khoản
+              </AppText>
             </TouchableOpacity>
           </View>
         </View>

src/routers/TabNavigation.js

@@ -16,6 +16,7 @@ import Notification from '../Screens/Notification/Notification';
 import Test from '../Screens/NewFeed/Test';
 import {useNavigation} from '@react-navigation/native';
 import {AccountVerification, PACKETCQG} from '../routers/ScreenNames';
+import I18n from '../helper/i18/i18n';
 const Tab = createBottomTabNavigator();
 
 const PayScreenComponent = () => {
@@ -79,7 +80,7 @@ const TabNavigator = (props) => {
           name="Screen2"
           component={Account}
           options={{
-            tabBarLabel: 'Tài khoản',
+            tabBarLabel: I18n.t('Account'),
             tabBarIcon: ({color, size}) => (
               <Icon name="user-tie" size={size} color={color} />
             ),
@@ -98,7 +99,7 @@ const TabNavigator = (props) => {
           name="Screen3"
           component={Notification}
           options={{
-            tabBarLabel: 'Thông báo',
+            tabBarLabel: I18n.t('Notification'),
             tabBarIcon: ({color, size}) => (
               <Ionicons
                 name="ios-notifications-outline"
@@ -112,7 +113,7 @@ const TabNavigator = (props) => {
           name="Screen4"
           component={NewFeed}
           options={{
-            tabBarLabel: 'Tin tức',
+            tabBarLabel: I18n.t('News'),
             tabBarIcon: ({color, size}) => (
               <Ionicons name="newspaper-outline" size={size} color={color} />
             ),

yarn.lock

@@ -1496,6 +1496,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz"
   integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==
 
+"@react-native-community/netinfo@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-6.0.0.tgz#2a4d7190b508dd0c2293656c9c1aa068f6f60a71"
+  integrity sha512-Z9M8VGcF2IZVOo2x+oUStvpCW/8HjIRi4+iQCu5n+PhC7OqCQX58KYAzdBr///alIfRXiu6oMb+lK+rXQH1FvQ==
+
 "@react-native-firebase/app-types@6.7.2":
   version "6.7.2"
   resolved "https://registry.yarnpkg.com/@react-native-firebase/app-types/-/app-types-6.7.2.tgz#d2e1530af5702e00578914b41468898c10d3289c"
@@ -4054,6 +4059,11 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+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==
+
 iconv-lite@0.4.24, iconv-lite@^0.4.17:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -6612,6 +6622,11 @@ react-native-datepicker@^1.7.2:
   dependencies:
     moment "^2.22.0"
 
+react-native-fast-image@^8.3.4:
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-8.3.4.tgz#79edca177e30311b19d59ff335625bcbe22650d7"
+  integrity sha512-LpzAdjUphihUpVEBn5fEv5AILe55rHav0YiZroPZ1rumKDhAl4u2cG01ku2Pb7l8sayjTsNu7FuURAlXUUDsow==
+
 react-native-gesture-handler@^1.9.0:
   version "1.10.3"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz"
@@ -6623,6 +6638,13 @@ react-native-gesture-handler@^1.9.0:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
+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-image-crop-picker@^0.36.0:
   version "0.36.0"
   resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.36.0.tgz"
@@ -6753,13 +6775,6 @@ react-native@0.62.2:
     use-subscription "^1.0.0"
     whatwg-fetch "^3.0.0"
 
-react-number-format@^4.5.5:
-  version "4.5.5"
-  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.5.5.tgz#563807ee142a03857111115806d39767bc698797"
-  integrity sha512-3NGqgSbMUwRwgJ4852RH24UFkW89yx/e0P78Hwmf3TajLMKCOJ7DPJCcl/6z+2+HpJ8AG7je/J8na3ykWx8acg==
-  dependencies:
-    prop-types "^15.7.2"
-
 react-redux@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz"