bottom tab navigator added & multi language added

master
hamed 3 years ago
parent ce1b2578cf
commit 40a2d527a0
  1. 62
      navigation.js
  2. 40
      package-lock.json
  3. 3
      package.json
  4. 3
      src/actions/actionTypes.js
  5. 3
      src/reducers/index.js
  6. 5
      src/screens/Home/components/carousel.js
  7. 14
      src/services/i18n/index.js
  8. 28
      src/services/i18n/locales/en/translation.json
  9. 29
      src/services/i18n/locales/fa/translation.json
  10. 11
      src/services/i18n/locales/index.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
name="Login"
component={Login}
options={{headerShown: false}}
/>
<Stack.Screen
name="Otp"
component={Otp}
options={{headerShown: false}}
/>
</>
<>
<Stack.Screen name="Home" component={Home}/>
</>
<Stack.Screen
name="Login"
component={Login}
options={{headerShown: false}}
/>
<Stack.Screen
name="Otp"
component={Otp}
options={{headerShown: false}}
/>
<Stack.Screen name="Home" component={BottomTab} options={{headerShown: false}}/>
<Stack.Screen
name="Product"
component={Product}

40
package-lock.json generated

@ -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",

@ -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",

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

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

@ -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,
}
});

@ -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;

@ -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"
}
}

@ -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": "زبان"
}
}

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