bottom tab navigator added & multi language added

navigation.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import Splash from './src/screens/Splash';
 import Home from './src/screens/Home';
 import Login from './src/screens/Login';
@@ -10,16 +11,51 @@ import Products from './src/screens/Products';
 import ShoppingCart from './src/screens/ShoppingCart';
 import QR from './src/screens/QR/index';
 import {connect} from 'react-redux';
+import i18n from "./src/services/i18n";
+import {useTranslation} from "react-i18next";
+import Profile from "./src/screens/Profile";
 
 const mapStateToProps = state => {
 	return {
 		profile: state.profile,
+		config: state.config,
 	};
 };
 
 const Stack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator();
+
+function BottomTab(props) {
+
+	const {t} = useTranslation('translation', {keyPrefix: 'main'});
+
+	return (
+		<Tab.Navigator>
+			<Tab.Screen name={'Home'} component={Home} options={{
+				title: t('home')
+			}} />
+			<Tab.Screen name={'Product'} component={Product} options={{
+				title: t('books')
+			}} />
+			<Tab.Screen name={'Videos'} component={Product} options={{
+				title: t('videos')
+			}} />
+			<Tab.Screen name={'Exams'} component={Product} options={{
+				title: t('exams')
+			}} />
+			<Tab.Screen name={'Profile'} component={Profile} options={{
+				title: t('profile')
+			}} />
+		</Tab.Navigator>
+	)
+}
 
 function Navigator(props) {
+
+	React.useEffect(() => {
+		i18n.changeLanguage(props.config.lan)
+	}, [props.config])
+
 	return (
 		<NavigationContainer>
 			<Stack.Navigator>
@@ -28,21 +64,17 @@ function Navigator(props) {
 					name="Splash"
 					component={Splash}
 				/>
-				<>
+				<Stack.Screen
-					<Stack.Screen
+					name="Login"
-						name="Login"
+					component={Login}
-						component={Login}
+					options={{headerShown: false}}
-						options={{headerShown: false}}
+				/>
-					/>
+				<Stack.Screen
-					<Stack.Screen
+					name="Otp"
-						name="Otp"
+					component={Otp}
-						component={Otp}
+					options={{headerShown: false}}
-						options={{headerShown: false}}
+				/>
-					/>
+				<Stack.Screen name="Home" component={BottomTab} options={{headerShown: false}}/>
-				</>
-				<>
-					<Stack.Screen name="Home" component={Home}/>
-				</>
 				<Stack.Screen
 					name="Product"
 					component={Product}

package-lock.json

@@ -1501,6 +1501,16 @@
       "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz",
       "integrity": "sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ=="
     },
+    "@react-navigation/bottom-tabs": {
+      "version": "6.0.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.0.9.tgz",
+      "integrity": "sha512-uRoq6Zd7lPNnLqNQkKC28eR62tpqcDeuakZU1sO8N46FtvrcTuNLoIlssrGty3GF7ALBIxCypn4A93t3nbmMrQ==",
+      "requires": {
+        "@react-navigation/elements": "^1.2.1",
+        "color": "^3.1.3",
+        "warn-once": "^0.1.0"
+      }
+    },
     "@react-navigation/core": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.1.0.tgz",
@@ -4406,6 +4416,14 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "requires": {
+        "void-elements": "3.1.0"
+      }
+    },
     "html-tags": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
@@ -4450,6 +4468,14 @@
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true
     },
+    "i18next": {
+      "version": "21.5.3",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.5.3.tgz",
+      "integrity": "sha512-9R8127a0/N5okiD7eeo6XBPQsHgHsLr1GdQEa35Pcw305ArC9KZDLs9kbgdn3xuVUNYlVu8+gWzz73eVkna0gA==",
+      "requires": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7612,6 +7638,15 @@
         }
       }
     },
+    "react-i18next": {
+      "version": "11.14.3",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.14.3.tgz",
+      "integrity": "sha512-Hf2aanbKgYxPjG8ZdKr+PBz9sY6sxXuZWizxCYyJD2YzvJ0W9JTQcddVEjDaKyBoCyd3+5HTerdhc9ehFugc6g==",
+      "requires": {
+        "@babel/runtime": "^7.14.5",
+        "html-parse-stringify": "^3.0.1"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -9451,6 +9486,11 @@
       "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
       "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="
     },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

package.json

@@ -12,9 +12,12 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.15.9",
     "@react-native-community/async-storage": "^1.12.1",
+    "@react-navigation/bottom-tabs": "^6.0.9",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.2.4",
+    "i18next": "^21.5.3",
     "react": "17.0.2",
+    "react-i18next": "^11.14.3",
     "react-native": "0.66.0",
     "react-native-awesome-alerts": "^1.5.2",
     "react-native-device-info": "^8.4.5",

src/actions/actionTypes.js

@@ -1 +1,2 @@
-export const PROFILE_RECORD = 'PROFILE_RECORD';
+export const PROFILE_RECORD = 'PROFILE_RECORD';
+export const APP_CONFIG = 'APP_CONFIG';

src/reducers/index.js

@@ -6,6 +6,9 @@ const allReducers = combineReducers({
   profile: DefaultReducer(action.PROFILE_RECORD, {
     isLogin: false,
   }),
+  config: DefaultReducer(action.APP_CONFIG, {
+    lan: 'fa',
+  }),
 });
 
 export default allReducers;

src/screens/Home/components/carousel.js

@@ -31,7 +31,8 @@ const styles = StyleSheet.create({
   container: {
     minHeight: 300,
     borderRadius: 10,
-    margin: 5
+    margin: 5,
+    overflow: 'hidden'
   },
   child: {
     width,
@@ -43,7 +44,7 @@ const styles = StyleSheet.create({
     width,
     flex: 1,
     justifyContent: "center",
-    borderRadius: 10
+    borderRadius: 10,
   }
 });
 

src/services/i18n/index.js

@@ -0,0 +1,14 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import resources from './locales'
+
+i18n.use(initReactI18next).init({
+  resources: resources,
+  lng: "fa",
+  fallbackLng: "fa",
+  interpolation: {
+    escapeValue: false
+  }  
+});
+
+export default i18n;

src/services/i18n/locales/en/translation.json

@@ -0,0 +1,28 @@
+{
+  "main": {
+    "home": "Home",
+    "settings": "Settings",
+    "profile": "Profile",
+    "filter": "filter"
+  },
+  "filter": {
+    "newest": "newest",
+    "oldest": "oldest"
+  },
+  "profile": {
+    "first name": "first name",
+    "last name": "last name",
+    "birthday": "birthday",
+    "gender": "gender",
+    "addresses": "addresses",
+    "day": "day",
+    "month": "month",
+    "year": "year",
+    "male": "male",
+    "female": "female",
+    "submit changes": "submit changes"
+  },
+  "settings": {
+    "language": "language"
+  }
+}

src/services/i18n/locales/fa/translation.json

@@ -0,0 +1,29 @@
+{
+  "main": {
+    "home": "صفحه اصلی",
+    "books": "کتاب ها",
+    "videos": "ویدئوها",
+    "exams": "آزمون ها",
+    "profile": "حساب کاربری"
+  },
+  "filter": {
+    "newest": "جدیدترین",
+    "oldest": "قدیمی ترین"
+  },
+  "profile": {
+    "first name": "نام",
+    "last name": "نام خانوادگی",
+    "birthday": "تاریخ تولد",
+    "gender": "جنسیت",
+    "addresses": "آدرس ها",
+    "day": "روز",
+    "month": "ماه",
+    "year": "سال",
+    "male": "آقا",
+    "female": "خانم",
+    "submit changes": "ثبت تغییرات"
+  },
+  "settings": {
+    "language": "زبان"
+  }
+}

src/services/i18n/locales/index.js

@@ -0,0 +1,11 @@
+import en from './en/translation.json';
+import fa from './fa/translation.json';
+
+export default {
+  en: {
+    translation: en
+  },
+  fa: {
+    translation: fa
+  }
+}