awal

.expo-shared/assets.json

+{
+  "0cae4d70c6df3e5e96ee8b5c442b59d55c8ab8deb466992ab9abc523822f2a1b": true,
+  "e997a5256149a4b76e6bfd6cbf519c5e5a0f1d278a3d8fa1253022b03c90473b": true,
+  "af683c96e0ffd2cf81287651c9433fa44debc1220ca7cb431fe482747f34a505": true,
+  "e7fc0741cc6562975a990e3d9ef820571588dab20aba97032df9f00caa9cd57a": true
+}
\ No newline at end of file

.gitignore

+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/

.watchmanconfig

+{}

App.js

+import * as React from 'react';
+import Auth from './view/Auth';
+import { NavigationContainer } from '@react-navigation/native';
+import { persistStore, persistReducer } from 'redux-persist';
+import { AsyncStorage } from 'react-native';
+import { PersistGate } from "redux-persist/integration/react";
+import rootReducer from './redux/globalReducer';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import * as Localization from 'expo-localization';
+import i18n from 'i18n-js';
+import en from './lib/en';
+import id from './lib/id';
+
+export const lang = i18n.translations = {
+        en:en,
+        id:id
+    }
+
+  export const set_lang  =  i18n.locale = Localization.locale;
+  export const fallbacks = i18n.fallbacks =  true;
+
+
+const persistConfig = {
+  key: 'root',
+  storage: AsyncStorage,
+};
+
+const persistReducers = persistReducer(persistConfig, rootReducer)
+const store = createStore(persistReducers);
+const persistor = persistStore(store)
+i18n.locale = Localization.locale;
+export default function App() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <NavigationContainer>
+          <Auth />
+        </NavigationContainer>
+      </PersistGate>
+    </Provider>
+  );
+}

app.json

+{
+  "expo": {
+    "name": "Excelso_update",
+    "slug": "excelso-pro",
+    "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/excelso.png",
+    "splash": {
+      "image": "./assets/logo_splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "local.ravExcelso",
+      "buildNumber": "20200327"
+    },
+    "android": {
+      "package": "local.ravExcelso",
+      "versionCode": 20200327
+    },
+    "description": ""
+  }
+}

babel.config.js

+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

helper/AsynStorage.js

+import { AsyncStorage, Alert } from 'react-native';
+
+export async function setLogin(email, password) {
+    try {
+        await AsyncStorage.setItem('IS_LOGIN', '1')
+        await AsyncStorage.setItem('EMAIL',email)
+        await AsyncStorage.setItem('PASSWORD',password)
+        
+    } catch (error) {
+        console.log('Gagal Set Login : ' + error)
+    }
+}

lib/Language.js

+import  * as Localization from 'expo-localization';
+import i18n from 'i18n-js';
+import en from './en';
+import id from './id';
+
+export const lang = i18n.translations = {
+        en:en,
+        id:id
+    }
+    
+   export const set_lang  =  i18n.locale = Localization.locale;
+   export const fallbacks = i18n.fallbacks =  true;
+

lib/en.json

+{
+    "welcome": "Hello",
+    "welcome2":"hello2",
+    "password":"Password",
+    "password2":"Confirm Password",
+    "login":"Login",
+    "signin":"Sign in",
+    "register":"Register",
+    "forgotPassword":"Forgot Password",
+    "resetPassword":"Reset Password",
+    "name":"Name",
+    "dob":"Date of Birth",
+    "gender":"Gender",
+    "submit":"Submit",
+    "enterToken":"Enter Token",
+    "delivery":"Delivery",
+    "pickup":"Pickup",
+    "orderInfo" : "You Will Pickup Your Order At",
+    "orderNow" : "Order Now",
+    "yourCardNumber" : "Your Card Number",
+    "balance" : "Balance :",
+    "point" : "Points :",
+    "profile" : "Profile",
+    "upgradePremium" : "Upgrade Premium",
+    "cardActivation" : "Card Activation"
+
+
+
+}
\ No newline at end of file

lib/id.json

+{ 
+
+  "welcome": "Selamat datang",
+  "welcome2":"selamat datang 2",
+  "password":"Kata Sandi",
+  "password2":"Ulang Sandi",
+  "login":"Masuk",
+  "signin":"Masuk",
+  "register":"Daftar",
+  "forgotPassword":"Lupa Kata Sandi",
+  "resetPassword":"Atur Ulang Kata Sandi",
+  "name":"Nama",
+  "dob":"Tanggal Lahir",
+  "gender":"Jenis Kelamin",
+  "submit":"Kirim",
+  "enterToken":"Masukan Token",
+  "delivery":"Antar",
+  "pickup":"Ambil",
+  "orderInfo" : "Kamu Akan Ambil Pesanan Mu Di",
+  "orderNow" : "Pesan Sekarang",
+  "yourCardNumber" : "Nomor Kartu Mu",
+  "balance" : "Saldo :",
+  "point" : "Poin :",
+  "profile" : "Profil",
+  "upgradePremium" : "Tingkatkan Premium",
+  "cardActivation" : "Aktivasi Kartu"
+
+}
+
+
+
+

model/Base_Model.js

+export const BASE_URL_LOGIN = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/login';
+export const BASE_URL_REGISTER = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/register';
+export const BASE_URL_REGISTER_CONFIRM ='https://excelsocrm.ravintoladev.com/crm/v2/auth/register_confirm';
+export const BASE_URL_GET_ENUM = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/register_get_enum';
+export const BASE_URL_GET_CARAOUSEL = 'https://excelsocrm.ravintoladev.com/cms/v2/list/promotions-carousel';
+export const BASE_URL_RESET_PASSWORD = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/forgot_password';
+export const BASE_URL_CHANGE_PASSWORD = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/change_password';
+export const BASE_URL_NEW_PASSWORD = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/reset_password';
+// =======
+// export const BASE_URL_REGISTER = 'http://192.168.2.188:8000/crm/v2/auth/register';
+// export const BASE_URL_REGISTER_CONFIRM ='http://192.168.2.188:8000/crm/v2/auth/register_confirm';
+// export const BASE_URL_GET_ENUM = 'http://192.168.2.188:8000/crm/v2/auth/register_get_enum';
+// export const BASE_URL_GET_CARAOUSEL = 'http://192.168.2.188:8000/cms/v2/list/promotions-carousel';
+// export const BASE_URL_RESET_PASSWORD = 'http://192.168.2.188:8000/crm/v2/auth/forgot_password';
+// export const BASE_URL_CHANGE_PASSWORD = 'http://192.168.2.188:8000/crm/v2/auth/change_password';
+// // export const BASE_URL_NEW_PASSWORD = 'http://192.168.2.188:8000/crm/v2/auth/reset_password';
+// >>>>>>> b5ca15bca6f7d685a79d0bf93fb703568fc68c60
+
+
+// export const BASE_URL_LOGIN = 'https://192.168.2.187:8000/crm/v2/auth/login';
+// export const BASE_URL_REGISTER = 'https://192.168.2.187:8000/crm/v2/auth/register';
+// export const BASE_URL_REGISTER_CONFIRM ='https://192.168.2.187:8000/crm/v2/auth/register_confirm';
+// export const BASE_URL_GET_ENUM = 'https://192.168.2.188:8000/crm/v2/auth/register_get_enum';
+// export const BASE_URL_GET_CARAOUSEL = 'https://192.168.2.187:8000/cms/v2/list/promotions-carousel';
+// export const BASE_URL_RESET_PASSWORD = 'https://192.168.2.187:8000/crm/v2/auth/forgot_password';
+// export const BASE_URL_CHANGE_PASSWORD = 'https://192.168.2.187:8000/crm/v2/auth/change_password';
+// export const BASE_URL_NEW_PASSWORD = 'https://192.168.2.187:8000/crm/v2/auth/reset_password';
\ No newline at end of file

notif/Push_notif.js

+import { Notifications } from 'expo';
+import { connect } from 'redux';
+import * as Permissions from 'expo-permissions';
+import ActionType from '../redux/globalActionType';
+
+async function registerForPushNotificationsAsync() {
+    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
+    if (status !== 'granted') {
+        console.log('No permission');
+        return;
+    }
+
+    let fb_token = await Notifications.getExpoPushTokenAsync();
+    console.log(fb_token);
+
+    let SetPushNotif = {
+        fb_token: fb_token
+    }
+    this.props.setPushProps(SetPushNotif);
+}
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setPushNotif: (setPushProps) => dispatch({
+            type: ActionType.SET_PUSH_NOTIF,
+            data: {
+                fb_token:  setPushProps.fb_token
+            }
+        })
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {
+        fb_token: state.fb_token,
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(registerForPushNotificationsAsync);
+

package.json

+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/datetimepicker": "^2.2.2",
+    "@react-native-community/masked-view": "^0.1.5",
+    "@react-navigation/bottom-tabs": "^5.0.5",
+    "@react-navigation/native": "^5.0.5",
+    "@react-navigation/stack": "^5.0.5",
+    "@shankarmorwal/rn-viewpager": "^1.2.11",
+    "@valdio/react-native-scrollable-tabview": "^0.8.12",
+    "accordion-collapse-react-native": "^0.2.8",
+    "axios": "^0.19.2",
+    "expo": "~36.0.0",
+    "expo-camera": "~8.0.0",
+    "expo-constants": "^8.0.0",
+    "expo-device": "^2.0.0",
+    "expo-file-system": "~8.0.0",
+    "expo-font": "^8.0.0",
+    "expo-image-picker": "~8.0.1",
+    "expo-localization": "~8.0.0",
+    "expo-location": "^8.0.0",
+    "expo-permissions": "^8.0.0",
+    "i18n-js": "^3.5.1",
+    "native-base": "2.13.8",
+    "react": "~16.9.0",
+    "react-currency-format": "^1.0.0",
+    "react-dom": "~16.9.0",
+    "react-material-ui-form-validator": "^2.0.10",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native-date-picker": "^2.7.7",
+    "react-native-datepicker": "^1.7.2",
+    "react-native-device-info": "^5.5.3",
+    "react-native-elements": "^1.2.7",
+    "react-native-form-select-picker": "0.0.7",
+    "react-native-fs": "^2.16.6",
+    "react-native-geolocation-service": "^4.0.0",
+    "react-native-gesture-handler": "^1.5.6",
+    "react-native-i18n": "^2.0.15",
+    "react-native-image-base64": "^0.1.4",
+    "react-native-image-slider-box": "^1.0.12",
+    "react-native-loading-spinner-overlay": "^1.1.0",
+    "react-native-maps": "^0.26.1",
+    "react-native-multiple-select": "^0.5.5",
+    "react-native-picker-select": "^6.6.0",
+    "react-native-reanimated": "^1.4.0",
+    "react-native-render-html": "^4.2.0",
+    "react-native-safe-area-context": "^0.6.0",
+    "react-native-screens": "^2.2.0",
+    "react-native-scroll-into-view": "^1.0.3",
+    "react-native-scrollable-tab-view": "^1.0.0",
+    "react-native-shadow-cards": "^1.0.2",
+    "react-native-swiper": "^1.5.14",
+    "react-native-view-pager": "^0.2.3",
+    "react-native-view-shot": "3.0.2",
+    "react-native-web": "~0.11.7",
+    "react-native-webview": "^9.0.1",
+    "react-navigation": "^4.2.2",
+    "react-redux": "^7.2.0",
+    "react-redux-i18n": "^1.9.3",
+    "redux": "^4.0.5",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.3.0"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "~8.0.0",
+    "@babel/core": "^7.0.0"
+  },
+  "private": true
+}

redux/globalActionType.js

+//Action
+const ActionType = {
+    SET_LOGIN_INFO: 'SET_LOGIN_INFO',
+    SET_DEVICE_INFO: 'SET_DEVICE_INFO',
+    SET_PUSH_NOTIF: 'SET_PUSH_NOTIF',
+    SET_REGISTRATION:'SET_REGISTRATION',
+    SET_RESET_PASSWORD:'SET_RESET_PASSWORD',
+    SET_CHANGE_EMAIL:'SET_CHANGE_EMAIL',
+    SET_EMAIL_VERIFICATION:'SET_EMAIL_VERIFICATION',
+    SET_PAGE:'SET_PAGE',
+    SET_PROSES:'SET_PROSES',
+    SET_LOGOUT:'SET_LOGUT',
+    // SET_PROFIL:'SET_PROFIL',
+    SET_CARD:'SET_CARD',
+    SET_CHANGE_PROFIL:'SET_CHANGE_PROFIL',
+    SET_CHANGE_LANGUAGE:'SET_CHANGE_LANGUAGE',
+    SET_CHANGE_URI_SELFI:'SET_CHANGE_URI_SELFI',
+    SET_CHANGE_URI_ID:'SET_CHANGE_URI_ID',
+    SET_CHANGE_IMAGE_SELFI:'SET_CHANGE_IMAGE_SELFI',
+    SET_CHANGE_IMAGE_ID:'SET_CHANGE_IMAGE_ID',
+    SET_CHANGE_CAMERA:'SET_CHANGE_CAMERA',
+    SET_CHANGE_CAMERA_ID:'SET_CHANGE_CAMERA_ID',
+    SET_CHANGE_OUTLET:'SET_CHANGE_OUTLET',
+    SET_CHANGE_SHOP:'SET_CHANGE_SHOP',
+    
+}
+
+export default ActionType;
\ No newline at end of file

redux/globalReducer.js

+import ActionType from './globalActionType';
+
+const globalState = {
+
+    //Set login di set ketika init
+    email: '',
+    password: '',
+
+    //set register
+    full_name:'',
+    dob_day:'',
+    dob_month:'',
+    dob_year:'',
+    gender:'',
+
+    //Set device info di set ketika init
+    fb_token: '',
+    device_id: '',
+    os_name: '',
+    os_version: '',
+    app_version: '',
+    session_id:'',
+
+
+    //set change_profile
+    gender_display:'',
+
+    //set registration
+    validation_reg: false,
+
+    registration_id:'',
+    isEmailverif:false,
+    //set position
+    position: 'Home',
+    pageEmailConfirmation:false,
+    proses:'',
+
+    language:'id',
+    set_card: false,
+    URI:'',
+    URI_IDCARD:'',
+    id_card64: false,
+    img64: false,
+    selfie:false,
+    idcard:false,
+
+    BASE64_SELFIE:'',
+    BASE64_ID:'',
+
+    outlet_id:'',
+    name_outlet:'',
+
+    quantity:0,
+    orders :0,
+    cart_shop:[],
+}
+
+const rootReducer = (state = globalState, action) => {
+    switch (action.type) {
+        case ActionType.SET_LOGIN_INFO: {
+            return {
+                ...state,
+                email: action.data.email,
+                password: action.data.password,
+                session_id: action.data.session_id
+            }
+        }
+        case ActionType.SET_EMAIL_VERIFICATION :{
+            return{
+                ...state,
+                isEmailverif: action.data.isEmailverif,
+            }
+        }
+        case ActionType.SET_PAGE :{
+            return{
+                ...state,
+                pageEmailConfirmation: action.data.pageEmailConfirmation
+            }
+        }
+        case ActionType.SET_DEVICE_INFO: {
+            return {
+                ...state,
+
+                fb_token: action.data.fb_token,
+                device_id: action.data.device_id,
+                os_name: action.data.os_name,
+                os_version:action.data.os_version,
+                app_version: action.data.app_version,
+            }
+        }
+       
+        case ActionType.SET_REGISTRATION: {
+            return {
+                ...state,
+                full_name: action.data,
+                dob_day: action.dob_day,
+                dob_month:action.dob_month,
+                dob_year:action.dob_year,
+                gender:action.dob_year,
+                email: action.data.email,
+                validation_reg: action.data.validation_reg,
+                registration_id: action.data.registration_id
+            }
+        }
+
+        case ActionType.SET_CHANGE_LANGUAGE:{
+            return{
+                ...state,
+                language: action.data.language,
+            }
+        }
+        case ActionType.SET_CHANGE_PROFIL:{
+            return{
+                ...state,
+                full_name: action.full_name,
+                gender_display: action.gender_display
+            }
+        }
+        case ActionType.SET_RESET_PASSWORD:{
+            return{
+                ...state,
+                email:action.data.email,
+            }
+        }
+        case ActionType.SET_PROSES:{
+            return{
+                ...state,
+                proses:action.data.proses
+            }
+        }
+        case ActionType.SET_CHANGE_EMAIL:{
+            return{
+                ...state,
+                email:action.data.email,
+            }
+        }
+        case ActionType.SET_CHANGE_URI_SELFI:{
+            return{
+                ...state,
+                URI: action.data.URI,
+                BASE64_SELFIE: action.data.BASE64_SELFIE
+                // id_card64:action.data.id_card64,
+                // img64:action.data.img64
+
+            }
+        }
+
+        case ActionType.SET_CHANGE_URI_ID:{
+            return{
+                ...state,
+                URI_IDCARD: action.data.URI_IDCARD,
+                BASE64_ID: action.data.BASE64_ID
+                // id_card64:action.data.id_card64,
+                // img64:action.data.img64
+
+            }
+        }
+
+        case ActionType.SET_CHANGE_CAMERA:{
+            return{
+                ...state,
+                selfie: action.data.selfie,
+                idcard: false
+            }
+        }
+        case ActionType.SET_CHANGE_IMAGE_ID:{
+            return{
+                ...state,
+                idcard: action.data.idcard,
+                selfie: false
+            }
+        }
+        case ActionType.SET_CHANGE_IMAGE_SELFI:{
+            return{
+                ...state,
+                selfie: action.data.selfie
+            }
+        }
+        case ActionType.SET_CARD:{
+            return{
+                ...state,
+                set_card: action.data.set_card
+                
+            }
+        }
+        case ActionType.SET_CHANGE_OUTLET:{
+            return{
+                ...state,
+                outlet_id: action.data.outlet_id,
+                name_outlet: action.data.name_outlet
+                
+            }
+        }
+        case ActionType.SET_CHANGE_SHOP:{
+            let is_exists = cart_shop.find(item => item.id === action.data.id)
+
+            if (is_exists) {
+                // update
+            } else {
+                // add 
+
+            }
+
+            return{
+            }
+        }
+        case ActionType.SET_LOGOUT:{
+            return{
+                ...state,
+                session_id:action.data.session_id,
+            }
+        }
+        
+        
+        default:
+            return state;
+    }
+}
+
+export default rootReducer;

view/Auth.js

+import * as React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { connect } from 'react-redux';
+import { View, Text } from 'react-native';
+import ActionType from '../redux/globalActionType';
+import MenuSelection from './MenuSelection';
+import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import Home from './Home';
+import Login from './Login';
+import Register from './Register';
+import ResetPassword from './ResetPassword';
+import VerifyEmail from './VerifyEmail';
+import NewPassword from './NewPassword';
+import ChangeEmail from './ChangeEmail';
+import CardActivation from './CardActivation';
+import ConfirmMobile from './ConfirmMobile';
+import Balance from './Balance';
+import RedeemCode from './RedeemCode';
+import TransactionHistory from './TransactionHistory'
+import TransactionDetail from './TransactionDetail'
+import EmailConfirmation from './EmailConfirmation';
+import Renewal from './Renewal';
+import NewsDetail from './NewsDetail';
+import DeliveryAddress from './DeliveryAddrees';
+import PickupName from './PickupName';
+import MenuConfirmation from './MenuConfirmation';
+import AddressDetail from './AddreesDetail';
+import ShoppingCart from './ShoppingCart';
+import TransferBalance from './TransferBalance';
+import CardInfo from './CardInfo';
+import ChangeLanguage from './ChangeLanguage';
+import ChangePassword from './ChangePassword';
+import DateTime from './Date';
+import NewRegister from './New_Register';
+import ProfilePage from './ProfilePage';
+import ChangeProfile from './ChangeProfil';
+import i18n from 'i18n-js';
+import TopUpInfo from './TopUpInfo';
+import UpgradePremium from './UpgradePremium';
+import Account from './Account';
+import Cameras from './Camera';
+import OutletDetail from './OutletDetails';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { enableScreens } from 'react-native-screens';
+import MenuDetail from './MenuDetail';
+import OrderHistory from './OrderHistory'
+enableScreens();
+
+function Rewards() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>
+        Rewards !
+      </Text>
+
+    </View>
+  )
+
+}
+
+
+function Outlets() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>
+        Outlets !
+      </Text>
+
+    </View>
+  )
+
+}
+
+const Tab = createBottomTabNavigator();
+
+function HomePage() {
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        tabBarIcon: ({ focused, color, size }) => {
+          let iconName;
+
+          if (route.name === 'HOME') {
+            iconName = focused ? 'ios-home' : 'ios-home'
+          } else if (route.name === 'MENU') {
+            iconName = focused ? 'ios-paper' : 'ios-paper';
+          } else if (route.name === 'REWARDS') {
+            iconName = focused ? 'ios-gift' : 'ios-gift';
+          } else if (route.name === 'ORDER') {
+            iconName = focused ? 'md-cart' : 'md-cart';
+          } else if (route.name === 'OUTLETS') {
+            iconName = focused ? 'ios-cafe' : 'ios-cafe';
+          } else if (route.name === 'ACCOUNT') {
+            iconName = focused ? 'account' : 'account';
+            return <MaterialCommunityIcons name={iconName} size={size} color={color} />
+          }
+
+          // You can return any component that you like here!
+          return <Ionicons name={iconName} size={size} color={color} />;
+        },
+      })}
+
+      tabBarOptions={{ activeTintColor: 'cornflowerblue', inactiveTintColor: 'gray' }}
+
+    >
+      <Tab.Screen name="HOME" component={Home} />
+      <Tab.Screen name="MENU" component={MenuSelection} />
+      <Tab.Screen name="REWARDS" component={Rewards} />
+      <Tab.Screen name="ORDER" component={OrderHistory} />
+      <Tab.Screen name="OUTLETS" component={Outlets} />
+      <Tab.Screen name="ACCOUNT" component={Account} />
+    </Tab.Navigator>
+
+
+  );
+}
+const Stack = createStackNavigator();
+class Auth extends React.Component {
+  constructor(props) {
+    super(props);
+    i18n.locale = this.props.language;
+  }
+
+  render() {
+
+    return (
+      <Stack.Navigator>
+        {
+          this.props.session_id === '' ? (
+            <>
+              {/* <Stack.Screen name="Change language" component={ChangeLanguage} /> */}
+              <Stack.Screen name="Login" component={Login} />
+              <Stack.Screen name="Home" component={Home} />
+              <Stack.Screen name="Profile" component={ProfilePage} />
+              <Stack.Screen name="Change Profil" component={ChangeProfile} />
+              <Stack.Screen name="Register" component={Register} />
+              <Stack.Screen name="Email Confirmation" component={EmailConfirmation} />
+            </>
+          ) : this.props.pageEmailConfirmation === true ? (
+            <>
+              <Stack.Screen name="Email Confirmation" component={EmailConfirmation} />
+              <Stack.Screen name="Login" component={Login} />
+              <Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
+            </>
+          ) : (
+                <>
+                  <Stack.Screen name="Home" component={HomePage} options={{headerShown:false}}/>
+                  <Stack.Screen name="Profile" component={ProfilePage} />
+                  <Stack.Screen name="Change Profil" component={ChangeProfile} />
+                  <Stack.Screen name="Change language" component={ChangeLanguage} />
+                  <Stack.Screen name="Change password" component={ChangePassword} />
+                  <Stack.Screen name="Card Activation" component={CardActivation} />
+                  <Stack.Screen name="Renewal" component={Renewal} />
+                  <Stack.Screen name="Account" component={Account} />
+                  <Stack.Screen name="Login" component={Login} />
+                  <Stack.Screen name="Transfer Balance" component={TransferBalance} />
+                  <Stack.Screen name="Register" component={Register} />
+                  <Stack.Screen name="Email Confirmation" component={EmailConfirmation} />
+                  <Stack.Screen name="Upgrade Premium" component={UpgradePremium} />
+                  <Stack.Screen name="Camera" component={Cameras} />
+                  <Stack.Screen name="Delivery Address" component={DeliveryAddress}/>
+                  <Stack.Screen name="Address Detail" component={AddressDetail} />
+                  <Stack.Screen name="Menu Detail" component={MenuDetail} />
+                  <Stack.Screen name="Pickup Name" component={PickupName} options={{title:"PICKUP STORE",headerStyle:{backgroundColor:"#ccb46c"},headerTitleAlign:'center',headerTitleStyle:{color:'white',fontWeight:'bold'}}} />
+                  <Stack.Screen name="Outlet Detail" component={OutletDetail}/>
+                  <Stack.Screen name="Menu Select" component={MenuSelection} />
+                  <Stack.Screen name="Card Info" component={CardInfo} />
+                  <Stack.Screen name="Shopping Cart" component={ShoppingCart} />
+                  
+                </>
+              )
+
+
+        }
+
+        <Stack.Screen name="New Password" component={NewPassword} />
+        {/* <Stack.Screen name="Login" component={Login} /> */}
+        <Stack.Screen name="Reset Password" component={ResetPassword} />
+        <Stack.Screen name="Verify Email" component={VerifyEmail} />
+        <Stack.Screen name="Change Email" component={ChangeEmail} />
+        {/* <Stack.Screen name="Card Activation" component={CardActivation} /> */}
+        <Stack.Screen name="Confirm Mobile" component={ConfirmMobile} />
+        <Stack.Screen name="Balance" component={Balance} />
+        <Stack.Screen name="Redeem Code" component={RedeemCode} />
+        <Stack.Screen name="Transaction History" component={TransactionHistory} />
+        <Stack.Screen name="Transaction Detail" component={TransactionDetail} />
+        {/* <Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> */}
+
+        <Stack.Screen name="News Detail" component={NewsDetail} />
+        {/* <Stack.Screen name="Delivery Address" component={DeliveryAddress} /> */}
+        
+        <Stack.Screen name="Menu Confirmation" component={MenuConfirmation} />
+        
+       
+
+        {/* <Stack.Screen name="Card Info" component={CardInfo} /> */}
+        {/* <Stack.Screen name="Change password" component={ChangePassword} /> */}
+        <Stack.Screen name="Date Time" component={DateTime} />
+        <Stack.Screen name="New Register" component={NewRegister} />
+        <Stack.Screen name="TopUpInfo" component={TopUpInfo} />
+      </Stack.Navigator>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    session_id: state.session_id,
+    language: state.language,
+    pageEmailConfirmation: state.pageEmailConfirmation
+  }
+}
+
+export default connect(mapStateToProps)(Auth);
+
+
+
+

view/Balance.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
+
+export default class Balance extends React.Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', fontSize: 25 }}>Balance</Text>
+                </View>
+                <View style={styles.body}>
+                    <View style={styles.current_balance}>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }} >Current Balance</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }}>xxxxxxxxxxx</Text>
+                        </View>
+                    </View>
+                    <View style={styles.redeem}>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }} >Redeem</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }}>xxxxxxxxxxx</Text>
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Redeem" />
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    body: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    current_balance: {
+        flexDirection: 'row',
+    },
+
+    redeem: {
+        flexDirection: 'row'
+    },
+
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+})
\ No newline at end of file

view/Camera.js

+import React from 'react';
+import { StyleSheet, Text, View, TouchableOpacity, Platform, } from 'react-native';
+import { Camera } from 'expo-camera';
+import * as Permissions from 'expo-permissions';
+import { FontAwesome, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import * as ImagePicker from 'expo-image-picker';
+import * as FileSystem from 'expo-file-system';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+
+ class Cameras extends React.Component {
+  state = {
+    hasPermission: null,
+    cameraType: Camera.Constants.Type.back,
+  }
+
+  async componentDidMount() {
+    this.getPermissionAsync()
+  }
+
+  getPermissionAsync = async () => {
+    // Camera roll Permission 
+    if (Platform.OS === 'ios') {
+      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+      if (status !== 'granted') {
+        alert('Sorry, we need camera roll permissions to make this work!');
+      }
+    }
+    // Camera Permission
+    const { status } = await Permissions.askAsync(Permissions.CAMERA);
+    this.setState({ hasPermission: status === 'granted' });
+  }
+
+  handleCameraType = () => {
+    const { cameraType } = this.state
+
+    this.setState({
+      cameraType:
+        cameraType === Camera.Constants.Type.back
+          ? Camera.Constants.Type.front
+          : Camera.Constants.Type.back
+    })
+  }
+
+  capture(){
+    console.log('IS SELFIE : ' + this.props.selfie)
+    console.log('IS IDCARD : ' + this.props.idcard)
+    if (this.props.selfie === true) {
+      this.takePictureSelfie()
+      console.log('ini foto selfie');
+    } else {
+      this.takePictureIdCard()
+      console.log('ini foto ktp');
+    }
+  }
+
+  takePictureSelfie = async () => {
+    if (this.camera) {
+      let photo = await this.camera.takePictureAsync({skipProcessing:true});
+      let photo_img = photo.uri;
+      const base64 = await FileSystem.readAsStringAsync(photo_img, { encoding: 'base64' });
+      // var set_photo = photo.replace('uri','')
+      let UriProps = {
+        URI: photo_img,
+        // BASE64_SELFIE:photo
+      }
+      this.props.setUriSelfi(UriProps);
+      this.props.navigation.navigate("Upgrade Premium")
+      console.log(photo);
+      // console.log("ini sudah di pencet" + photo_img)
+    }
+  }
+
+  takePictureIdCard = async () => {
+    if (this.camera) {
+      let photo = await this.camera.takePictureAsync({skipProcessing:true});
+      let photo_img = photo.uri;
+      const base64 = await FileSystem.readAsStringAsync(photo_img, { encoding: 'base64' });
+      // var set_photo = photo.replace('uri','')
+      let UriPropsID = {
+        URI_IDCARD: photo_img,
+        // BASE64_ID: photo
+      }
+      this.props.setUriID(UriPropsID);
+      this.props.navigation.navigate("Upgrade Premium")
+      // console.log("ini sudah di pencet" + photo_img)
+    }
+  }
+
+  
+
+  pickImage = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images
+    });
+  }
+
+  render() {
+    const { hasPermission } = this.state
+    if (hasPermission === null) {
+      return <View />;
+    } else if (hasPermission === false) {
+      return <Text>No access to camera</Text>;
+    } else {
+      return (
+        <View style={{ flex: 1 }}>
+          <Camera style={{ flex: 1 }} type={this.state.cameraType} ref={ref => { this.camera = ref }}>
+            <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between", margin: 30 }}>
+              <TouchableOpacity
+                style={{
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                  backgroundColor: 'transparent'
+                }}
+                onPress={() => this.pickImage()}>
+                <Ionicons
+                  name="ios-photos"
+                  style={{ color: "#fff", fontSize: 40 }}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                  backgroundColor: 'transparent',
+                }}
+                onPress={() => this.capture()}
+              >
+                <FontAwesome
+                  name="camera"
+                  style={{ color: "#fff", fontSize: 40 }}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                  backgroundColor: 'transparent',
+                }}
+                onPress={() => this.handleCameraType()}
+              >
+                <MaterialCommunityIcons
+                  name="camera-switch"
+                  style={{ color: "#fff", fontSize: 40 }}
+                />
+              </TouchableOpacity>
+            </View>
+          </Camera>
+        </View>
+      );
+    }
+  }
+
+}
+
+const mapDispatchToProps = (dispacth) => {
+  return {
+    setUriSelfi: (UriProps) => dispacth({
+          type: ActionType.SET_CHANGE_URI_SELFI,
+          data: {
+              URI: UriProps.URI,
+              BASE64_SELFIE: UriProps.BASE64_SELFIE
+          }
+      }),
+      setUriID: (UriPropsID) => dispacth({
+        type: ActionType.SET_CHANGE_URI_ID,
+        data: {
+          URI_IDCARD: UriPropsID.URI_IDCARD,
+          BASE64_ID:UriPropsID.BASE64_ID,
+        }
+    }),
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    URI: state.URI,
+    URI_IDCARD: state.URI_IDCARD,
+    img64: state.img64,
+    id_card64: state.id_card64,
+    selfie: state.selfie,
+    idcard: state.id_card
+
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Cameras);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// import React, { useState, useEffect } from 'react';
+// import { Text, View, TouchableOpacity } from 'react-native';
+// import { Camera } from 'expo-camera';
+
+// export default function Cameras() {
+//   const [hasPermission, setHasPermission] = useState(null);
+//   const [type, setType] = useState(Camera.Constants.Type.back);
+
+//   useEffect(() => {
+//     (async () => {
+//       const { status } = await Camera.requestPermissionsAsync();
+//       setHasPermission(status === 'granted');
+//     })();
+//   }, []);
+
+//   if (hasPermission === null) {
+//     return <View />;
+//   }
+//   if (hasPermission === false) {
+//     return <Text>No access to camera</Text>;
+//   }
+//   return (
+//     <View style={{ flex: 1 }}>
+//       <Camera style={{ flex: 1 }} type={type}>
+//         <View
+//           style={{
+//             flex: 1,
+//             backgroundColor: 'transparent',
+//             flexDirection: 'row',
+//           }}>
+//           <TouchableOpacity
+//             style={{
+//               flex: 0.1,
+//               alignSelf: 'flex-end',
+//               alignItems: 'center',
+//             }}
+//             onPress={() => {
+//               setType(
+//                 type === Camera.Constants.Type.back
+//                   ? Camera.Constants.Type.front
+//                   : Camera.Constants.Type.back
+//               );
+//             }}>
+//             <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
+//           </TouchableOpacity>
+//         </View>
+//       </Camera>
+//     </View>
+//   );
+// }
\ No newline at end of file

view/CardActivation.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Alert } from 'react-native';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import ActionType from '../redux/globalActionType';
+import Spinner from 'react-native-loading-spinner-overlay';
+
+class CardActivation extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            session_id: "",
+            mobile_phone: "",
+            card_number: "",
+            token: "",
+            timer: 80,
+            onclick: false,
+            spinner: false,
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.state.timer === 0) {
+            clearInterval(this.interval);
+        }
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.interval);
+    }
+
+    handleToken() {
+        let params = {
+            session_id: this.props.session_id,
+            mobile_phone: this.state.mobile_phone
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/get_token', params).then(res => {
+            this.setState({
+                onclick: true
+            })
+            Alert.alert('Kami telah mengirimkan sms otp ke nomor anda!');
+            this.interval = setInterval(
+                () => this.setState((prevState) => ({ timer: prevState.timer - 1 })),
+                1000
+            );
+            this.setState({
+                onclick: true
+            })
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    ResendToken() {
+        this.setState({
+            spinner: true,
+        })
+        let params = {
+            session_id: this.props.session_id,
+            mobile_phone: this.state.mobile_phone
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/resend_token', params).then(res => {
+            this.setState({
+                spinner: false,
+            })
+
+            Alert.alert('Kami telah kembali mengirimkan sms otp ke nomor anda!');
+            this.setState({
+                timer: 80
+            })
+            this.interval = setInterval(
+                () => this.setState((prevState) => ({ timer: prevState.timer - 1 })),
+                1000
+            );
+        }).catch(error => {
+            this.setState({
+                spinner: false,
+            })
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    handleActivate() {
+        this.setState({
+            spinner: true,
+        })
+        let params = {
+            session_id: this.props.session_id,
+            mobile_phone: this.state.mobile_phone,
+            card_number: this.state.card_number,
+            token: this.state.token
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/card/activate', params).then(res => {
+            Alert.alert("Kartu anda berhasil di aktifkan");
+            this.setState({
+                spinner: false,
+            })
+            this.props.navigation.reset({
+                index: 0,
+                routes: [{ name: 'Home' }],
+            })
+
+        }).catch(error => {
+            this.setState({
+                spinner: false,
+            })
+            let response = error.response.data;
+            Alert.alert(response.msg);
+
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Activate Card</Text>
+                </View>
+                <View style={styles.form}>
+                    <View style={styles.field_phone}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Phone</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <TextInput
+                                style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }}
+                                onChangeText={mobile_phone => this.setState({ mobile_phone })}
+                                value={this.state.mobile_phone}
+                            />
+                        </View>
+                        <View style={styles.button}>
+                            <Button title="Token" onPress={() => this.handleToken()}></Button>
+                        </View>
+                    </View>
+                    {
+                        this.state.onclick === true ? (<Text style={{ textAlign: 'center' }}> 0:{this.state.timer} </Text>) : (
+                            null
+                        )
+                    }
+                    {
+                        this.state.timer === 0 ? (
+                            <View style={{ width: 90, height: 40, alignSelf: 'center', margin: 20, top: 0 }}>
+
+                                <Button title="Resend Token" onPress={() => this.ResendToken()}></Button>
+                            </View>
+                        ) : (null)}
+
+                    <View style={styles.field_email}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Card number</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <TextInput
+                                style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }}
+                                onChangeText={card_number => this.setState({ card_number })}
+                                value={this.state.card_number}
+                            />
+                        </View>
+                    </View>
+                    <View style={styles.field_email}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Token</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <TextInput
+                                style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }}
+                                onChangeText={token => this.setState({ token })}
+                                value={this.state.token}
+                            />
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Activate" onPress={() => this.handleActivate()}></Button>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_email: {
+        flexDirection: 'row'
+    },
+
+    field_phone: {
+        flexDirection: 'row'
+    },
+
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+})
+
+const mapStateToProps = (state) => {
+    return {
+        session_id: state.session_id,
+        set_card: state.set_card
+    }
+}
+
+
+export default connect(mapStateToProps)(CardActivation);
\ No newline at end of file

view/CardInfo.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Alert } from 'react-native';
+
+export default function ConfirmMobile({route,navigation}){
+const { DATA } = route.params;
+   return(
+            <View style={styles.container}>
+                <Text>{JSON.stringify(DATA)}</Text>
+            </View>
+   )
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_email: {
+        flexDirection: 'row'
+    },
+
+    field_phone: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+})
\ No newline at end of file

view/ChangeEmail.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Alert } from 'react-native';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import ActionType from '../redux/globalActionType';
+
+class ChangeEmail extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            email: ""
+        }
+    }
+
+    changeEmail() {
+
+        let paramater = {
+            "email": this.state.email,
+            "registration_id": this.props.registration_id
+        }
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/auth/register_change_email', paramater).then(res => {
+            console.log(res);
+            let loginProps = {
+                email: this.state.email
+
+            }
+            let emailConfirmProps = {
+                isEmailverif: false
+            }
+            this.props.setChangeEmail(loginProps)
+            this.props.setEmailConfirm(emailConfirmProps)
+            Alert.alert(
+                '',
+                'Email terkirim, mohon dicek'
+                ,
+            )
+            this.props.navigation.navigate("Email Confirmation");
+        }).catch(error => {
+
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Change Email</Text>
+                </View>
+                <View style={styles.form}>
+                    <View style={styles.field_email}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Email</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
+                                onChangeText={(email) => this.setState({ email })}
+                                value={this.state.email}
+                            />
+
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Submit" onPress={() => this.changeEmail()}></Button>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_email: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+})
+
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+        setChangeEmail: (params) => dispacth({
+            type: ActionType.SET_CHANGE_EMAIL,
+            data: {
+                email: params.email,
+            }
+        }),
+
+        setEmailConfirm:(emailConfirmProps) => dispacth({
+            type: ActionType.SET_EMAIL_VERIFICATION,
+            data:{
+                isEmailverif: emailConfirmProps.isEmailverif,
+            }
+        })
+    }
+}
+const mapStateToProps = (state) => {
+    return {
+        registration_id: state.registration_id
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChangeEmail);
\ No newline at end of file

view/ChangeLanguage.js

+import React, { Component } from 'react';
+import { StyleSheet, Text, View, Button, StatusBar, TouchableOpacity, Image } from 'react-native';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+import i18n from 'i18n-js';
+
+class Language extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            language: 'id'
+        }
+    }
+
+    _changLanguage() {
+
+        let languageProps = {
+            language: 'en'
+        }
+        this.props.setLanguage(languageProps);
+        i18n.locale = 'en'
+    }
+
+    _changLanguageId() {
+
+        let languageProps = {
+            language: 'id'
+        }
+        this.props.setLanguage(languageProps);
+        i18n.locale = 'id'
+    }
+
+
+    render() {
+
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <StatusBar barStyle='dark-content' />
+                    <Text style={styles.titleText}> {i18n.t('welcome')}</Text>
+                </View>
+                <View style={styles.body}>
+                    <TouchableOpacity onPress={() => this._changLanguage()}>
+                        <View style={styles.languageBorder}>
+                            <View style={styles.languageSpace}>
+                                {/* <Image style={styles.icon} source={require('../assets/English-Language-icon.png')}></Image> */}
+                            </View>
+                            <View style={styles.languageSpace}>
+                                <Text>ENG</Text>
+                            </View>
+                        </View>
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={() => this._changLanguageId()}>
+                        <View style={styles.languageBorder}>
+                            <View style={styles.languageSpace}>
+                                {/* <Image style={styles.icon} source={require('../assets/Indonesia-Flag-icon.png')}></Image> */}
+                            </View>
+                            <View style={styles.languageSpace}>
+                                <Text>ID</Text>
+                            </View>
+                        </View>
+                    </TouchableOpacity>
+                  
+                    <View style={styles.button}>
+                        <Button title="save" onPress={()=>this.props.navigation.goBack()}/>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        borderWidth: 1
+    },
+    header: {
+        flex: 0.2,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    body: {
+        flex: 0.6,
+        flexDirection: 'column',
+        borderWidth: 1,
+        marginLeft: 60,
+        marginRight: 60,
+    },
+    titleText: {
+        fontSize: 26,
+        fontWeight: 'bold',
+    },
+    languageBorder: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1,
+        marginTop: 50,
+        marginRight: 40,
+        marginLeft: 40
+    },
+    languageSpace: {
+        marginLeft: 20
+    },
+    button: {
+        marginTop: 50,
+        marginLeft: 60,
+        marginRight: 60
+    },
+    icon: {
+        height: 60,
+        width: 60
+    },
+
+
+});
+
+
+const mapStateToProps = (state) => {
+    return {
+        language: state.language,
+    }
+}
+
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+
+        setLanguage: (languageProps) => dispacth({
+            type: ActionType.SET_CHANGE_LANGUAGE,
+            data: {
+                language: languageProps.language
+            }
+        })
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Language);
\ No newline at end of file