update design, ganti icon bottomTabBar dan design home

view/Auth.js

 import * as React from 'react';
 import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
 import { connect } from 'react-redux';
-import { View, Text } from 'react-native';
+import { View, Text, Image } from 'react-native';
 import ActionType from '../redux/globalActionType';
 import MenuSelection from './MenuSelection';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
@@ -50,6 +50,7 @@ import RewardDetail from './RewardDetail';
 import RewardSelect from './RewardSelect';
 import Outlets from './Outlets';
 import RewardHistory from './RewardHistory';
+// import { Image } from 'native-base';
 
 enableScreens();
 
@@ -60,23 +61,52 @@ function HomePage({ navigation }) {
   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} />;
+      //   },
+
+      // })}
       screenOptions={({ route }) => ({
         tabBarIcon: ({ focused, color, size }) => {
           let iconName;
 
           if (route.name === 'HOME') {
-            iconName = focused ? 'ios-home' : 'ios-home'
+            // iconName = focused ? 'ios-home' : 'ios-home'
+            return <Image source={require('../assets/icon/icon-home.png')} style={{height :50, width:50}} tintColor={ focused ? '#CFB368' : 'gray'} />
           } else if (route.name === 'MENU') {
-            iconName = focused ? 'ios-paper' : 'ios-paper';
+            // iconName = focused ? 'ios-paper' : 'ios-paper';
+            return <Image source={require('../assets/icon/icon-menu.png')} style={{height :50, width:50}} tintColor={ focused ? '#CFB368' : 'gray'}/>
           } else if (route.name === 'REWARDS') {
-            iconName = focused ? 'ios-gift' : 'ios-gift';
+            // iconName = focused ? 'ios-gift' : 'ios-gift';
+            return <Image source={require('../assets/icon/icon-rewards.png')} style={{height :50, width:50}} tintColor={ focused ? '#CFB368' : 'gray'}/>
           } else if (route.name === 'ORDER') {
-            iconName = focused ? 'md-cart' : 'md-cart';
+            // iconName = focused ? 'md-cart' : 'md-cart';
+            return <Image source={require('../assets/icon/icon-order.png')} style={{height :50, width:50}} tintColor={ focused ? '#CFB368' : 'gray'}/>
           } else if (route.name === 'OUTLETS') {
-            iconName = focused ? 'ios-cafe' : 'ios-cafe';
+            // iconName = focused ? 'ios-cafe' : 'ios-cafe';
+            return <Image source={require('../assets/icon/icon-outlets.png')} style={{height :50, width:50}} tintColor={ focused ? '#CFB368' : 'gray'}/>
           } else if (route.name === 'ACCOUNT') {
-            iconName = focused ? 'account' : 'account';
-            return <MaterialCommunityIcons name={iconName} size={size} color={color} />
+            // iconName = focused ? 'account' : 'account';
+            return <Image source={require('../assets/icon/icon-account.png')} style={{height :50, width:50}} tintColor={ focused ? '#CFB368' : 'gray'}/>
           }
 
           // You can return any component that you like here!
@@ -85,7 +115,7 @@ function HomePage({ navigation }) {
 
       })}
 
-      tabBarOptions={{ activeTintColor: 'cornflowerblue', inactiveTintColor: 'gray' }}
+      tabBarOptions={{ activeTintColor: '#CFB368', inactiveTintColor: 'gray', showLabel: false }}
 
     >
       <Tab.Screen name="HOME" component={Home} />

view/Home.js

@@ -307,9 +307,17 @@ class Home extends React.Component {
                           {/* <Text>
                             {i18n.t('yourCardNumber')} | {this.state.expire_date}{'\n'}
                           </Text> */}
-                          <Text>
+                          {/* <Text>
                             YOUR CARD NUMBER | {this.state.expire_date}
-                          </Text>
+                          </Text> */}
+                          <View style={{ flexDirection: 'row', flex: 1 }}>
+                            <View style={{ flex: 0.5 }}>
+                              <Text style={{ fontSize: 10 }}>YOUR CARD NUMBER</Text>
+                            </View>
+                            <View style={{ flex: 0.5 }}>
+                              <Text style={{ fontSize: 10, textAlign: 'right' }}>Expired At {this.state.expire_date}</Text>
+                            </View>
+                          </View>
                           <View style={{ paddingHorizontal: 10 }}>
                             <Text style={{ textAlign: "center", fontSize: 30, color: '#c9af6d' }}>
                               {this.state.account_number}
@@ -350,12 +358,26 @@ class Home extends React.Component {
                       </View>
                     )
               }
-              <TouchableOpacity style={styles.submitUpgradePemium} activeOpacity={.5} onPress={this.onPress}>
-                <Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>TOP BALANCE </Text>
-              </TouchableOpacity>
-
-              <Text> App version : {version} </Text>
-              <Text> Expo build version : {buildNumber} </Text>
+              <View style={{ flexDirection: 'row', flex: 1 }}>
+                <TouchableOpacity
+                  // style={styles.submitUpgradePemium} 
+                  activeOpacity={.5} onPress={this.onPress}>
+                  <View style={styles.topUseBalance}>
+                    <Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>TOP BALANCE </Text>
+                  </View>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  // style={styles.submitUpgradePemium} 
+                  activeOpacity={.5} onPress={this.onPress}>
+                  <View style={styles.topUseBalance}>
+                    <Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>USE BALANCE </Text>
+                  </View>
+                </TouchableOpacity>
+              </View>
+              <View style={{top:20}}>
+                <Text> App version : {version} </Text>
+                <Text> Expo build version : {buildNumber} </Text>
+              </View>
               <View style={{ height: 60 }}></View>
             </View>
           </View>
@@ -431,16 +453,16 @@ const styles = StyleSheet.create({
     borderColor: '#fff',
   },
 
-  submitUpgradePemium: {
+  topUseBalance: {
+    flex: 0.5,
+    backgroundColor: 'green',
     top: 20,
-    margin: 20,
-    paddingTop: 15,
-    paddingBottom: 5,
-    backgroundColor: '#c9af6d',
+    margin: 10,
+    padding: 10,
+    paddingHorizontal: 30,
     borderRadius: 10,
-    width: "90%",
-    borderWidth: 0,
-    borderColor: '#fff',
+    backgroundColor: '#CFB368',
+    paddingBottom: -5
   },
 
   line: {

view/New_Register.js

@@ -452,7 +452,8 @@ const styles = StyleSheet.create({
         margin: 15,
         fontSize: 26,
         fontWeight: 'bold',
-        color: 'white'
+        color: 'white',
+        fontFamily : 'Gotham-Black'
     },
     textInput: {
         height: 40,