Merge branch 'master' of http://103.44.149.204/d.arizona/ad1appraisal-mobile

app/container/home/appraisal/sampleMenuAppraisal.js

@@ -50,7 +50,7 @@ export default class sampleMenuAppraisal extends Component {
 
     render() {
         return (
-            <Container style={{ flex: 1, paddingHorizontal: 20, paddingBottom: 20 }}>
+            <Container style={{ flex: 1, paddingHorizontal: 20}}>
                 <ScrollView
                     showsVerticalScrollIndicator={false}
                 >
@@ -852,8 +852,8 @@ export default class sampleMenuAppraisal extends Component {
                             </ListItem>
                         </CollapseBody>
                     </Collapse>
-                </ScrollView>
-                <View style={{ width: '100%', justifyContent: 'flex-end', marginTop: 20, alignSelf: 'center', alignContent: 'flex-end', alignItems: 'center' }}>
+                
+                    <View style={{ width: '100%', justifyContent: 'flex-end', marginTop: 20, alignSelf: 'center', alignContent: 'flex-end', alignItems: 'center', marginBottom: 20 }}>
                     <AwesomeButton
                         backgroundColor={Colors.yellowBasic}
                         backgroundShadow={'#DBDBDB'}
@@ -876,6 +876,7 @@ export default class sampleMenuAppraisal extends Component {
                         <Text style={{ color: 'black', fontWeight: '700' }}>Berikutnya</Text>
                     </AwesomeButton>
                 </View>
+                </ScrollView>
             </Container>
         )
     }

app/container/home/appraisal/sampleMenuAppraisal3.js

@@ -28,8 +28,8 @@ export default class sampleMenuAppraisal3 extends Component {
     }
     render() {
         return (
-            <Container style={{ flex: 1, paddingHorizontal: 10, paddingBottom: 20 }}>
-                <ScrollView showsVerticalScrollIndicator={false}>
+            <Container style={{ flex: 1, paddingHorizontal: 10 }}>
+                <ScrollView showsVerticalScrollIndicator={false} >
 
                     <View style={{ padding: 20, justifyContent: 'center', width: '100%' }}>
                         <Text style={{ alignSelf: 'center', fontSize: 18, fontWeight: 'bold' }}>Appraisal</Text>
@@ -624,32 +624,32 @@ export default class sampleMenuAppraisal3 extends Component {
                     {/* <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 2.5 }}>
                         
                     </View> */}
+                    <View style={{ width: '100%', justifyContent: 'flex-end', marginTop: 20, alignSelf: 'center', alignContent: 'flex-end', alignItems: 'center', marginBottom: 20 }}>
+                        <AwesomeButton
+                            backgroundColor={Colors.yellowBasic}
+                            backgroundShadow={'#DBDBDB'}
+                            backgroundPlaceholder={null}
+                            backgroundDarker={'#FFED75'}
+                            backgroundProgress={null}
+                            width={120}
+                            height={45}
+                            raiseLevel={5}
+                            borderRadius={10}
+                            progressLoadingTime={1000}
+                            progress={!this.state.progress}
+                            onPress={next => {
+                                setTimeout(() => {
+                                    null
+                                    next()
+                                }, 300);
+                            }}
+                        >
+                            <Text style={{ color: 'black', fontWeight: '700' }}>Berikutnya</Text>
+                        </AwesomeButton>
+                    </View>
 
                 </ScrollView>
 
-                <View style={{ width: '100%', justifyContent: 'flex-end', marginTop: 20, alignSelf: 'center', alignContent: 'flex-end', alignItems: 'center' }}>
-                    <AwesomeButton
-                        backgroundColor={Colors.yellowBasic}
-                        backgroundShadow={'#DBDBDB'}
-                        backgroundPlaceholder={null}
-                        backgroundDarker={'#FFED75'}
-                        backgroundProgress={null}
-                        width={120}
-                        height={45}
-                        raiseLevel={5}
-                        borderRadius={10}
-                        progressLoadingTime={1000}
-                        progress={!this.state.progress}
-                        onPress={next => { 
-                            setTimeout(() => {
-                                null
-                                next()
-                            }, 300);
-                        }}
-                    >
-                        <Text style={{ color: 'black', fontWeight: '700' }}>Berikutnya</Text>
-                    </AwesomeButton>
-                </View>
             </Container>
         )
     }

app/container/home/penerimaan/penerimaan.js

 import React, { Component } from 'react'
 import { Text, View, ScrollView, TouchableOpacity } from 'react-native'
-import { Container } from 'native-base'
+import { Container, Fab, Icon } from 'native-base'
 import Next from 'react-native-vector-icons/MaterialIcons'
 
 export default class Penerimaan extends Component {
@@ -65,6 +65,16 @@ export default class Penerimaan extends Component {
                     })}
 
                 </ScrollView>
+                <Fab
+                    active={true}
+                    direction="up"
+                    containerStyle={{}}
+                    style={{ backgroundColor: '#e4b300' }}
+                    position="bottomRight"
+                        onPress={() => this.props.navigation.navigate('MenuPenerimaan')}
+                    >
+                    <Icon name="add" />
+                </Fab>
             </Container>
         )
     }

app/container/home/penerimaan/sampleMenuPenerimaan.js

@@ -32,12 +32,12 @@ export default class sampleMenuPenerimaan extends Component {
         // alert(this.state.date)
     }
 
-    handlePenerimaanDate(date){
+    handlePenerimaanDate(date) {
         var datePenerimaan = M(date).format('DD-MMM-YYYY')
         this.setState({ datePenerimaan, isDateTimePickerVisiblePenerimaan: false })
     }
 
-    handleUpdateDate(date){
+    handleUpdateDate(date) {
         var dateUpdate = M(date).format('DD-MMM-YYYY')
         this.setState({ dateUpdate, isDateTimePickerVisible: false })
     }
@@ -59,17 +59,17 @@ export default class sampleMenuPenerimaan extends Component {
                             stepIndicatorSize: 20,
                             currentStepIndicatorSize: 20,
                             currentStepStrokeWidth: 1,
-                            stepStrokeCurrentColor: "#FBB040",
+                            stepStrokeCurrentColor: Colors.yellowStatusBar,
                             stepIndicatorCurrentColor: 'white',
-                            stepIndicatorLabelCurrentColor: "#FBB040",
-                            currentStepLabelColor: "#FBB040",
-                            stepStrokeUnFinishedColor: "#FBB040",
+                            stepIndicatorLabelCurrentColor: Colors.yellowStatusBar,
+                            currentStepLabelColor: Colors.yellowStatusBar,
+                            stepStrokeUnFinishedColor: Colors.yellowStatusBar,
                             separatorUnFinishedColor: '#DEE1E5',
                             stepIndicatorUnFinishedColor: '#DEE1E5',
                             stepIndicatorLabelUnFinishedColor: '#ffffff',
                             labelColor: '#E6E6E6',
-                            stepIndicatorFinishedColor: "#FBB040",
-                            separatorFinishedColor: "#FBB040",
+                            stepIndicatorFinishedColor: Colors.yellowStatusBar,
+                            separatorFinishedColor: Colors.yellowStatusBar,
                         }}
                         stepCount={Array.labelStep.length}
                     />
@@ -249,7 +249,7 @@ export default class sampleMenuPenerimaan extends Component {
 
                 </ScrollView>
                 <View style={{ width: '100%', justifyContent: 'flex-end', marginTop: 20, alignSelf: 'center', alignContent: 'flex-end', alignItems: 'center' }}>
-                <AwesomeButton
+                    <AwesomeButton
                         backgroundColor={Colors.yellowBasic}
                         backgroundShadow={'#DBDBDB'}
                         backgroundPlaceholder={null}
@@ -261,7 +261,7 @@ export default class sampleMenuPenerimaan extends Component {
                         borderRadius={10}
                         progressLoadingTime={1000}
                         progress={!this.state.progress}
-                        onPress={next => { 
+                        onPress={next => {
                             setTimeout(() => {
                                 this.props.navigation.navigate('MenuPenerimaan2')
                                 next()

app/container/home/penerimaan/sampleMenuPenerimaan2.js

@@ -37,17 +37,17 @@ export default class sampleMenuPenerimaan2 extends Component {
                             stepIndicatorSize: 20,
                             currentStepIndicatorSize: 20,
                             currentStepStrokeWidth: 1,
-                            stepStrokeCurrentColor: "#FBB040",
+                            stepStrokeCurrentColor: Colors.yellowStatusBar,
                             stepIndicatorCurrentColor: 'white',
-                            stepIndicatorLabelCurrentColor: "#FBB040",
-                            currentStepLabelColor: "#FBB040",
-                            stepStrokeUnFinishedColor: "#FBB040",
+                            stepIndicatorLabelCurrentColor: Colors.yellowStatusBar,
+                            currentStepLabelColor: Colors.yellowStatusBar,
+                            stepStrokeUnFinishedColor: Colors.yellowStatusBar,
                             separatorUnFinishedColor: '#DEE1E5',
                             stepIndicatorUnFinishedColor: '#DEE1E5',
                             stepIndicatorLabelUnFinishedColor: '#ffffff',
                             labelColor: '#E6E6E6',
-                            stepIndicatorFinishedColor: "#FBB040",
-                            separatorFinishedColor: "#FBB040",
+                            stepIndicatorFinishedColor: Colors.yellowStatusBar,
+                            separatorFinishedColor: Colors.yellowStatusBar,
                         }}
                         stepCount={Array.labelStep.length}
                     />

app/container/home/penerimaan/sampleMenuPenerimaan3.js

@@ -9,6 +9,7 @@ import { Array } from '../../../library/Array';
 import AwesomeButton from "react-native-really-awesome-button";
 import DocumentPicker from 'react-native-document-picker'
 import RNFetchBlob from 'rn-fetch-blob'
+import Colors from '../../../library/colors';
 
 export default class sampleMenuPenerimaan3 extends Component {
     constructor(props) {
@@ -89,7 +90,7 @@ export default class sampleMenuPenerimaan3 extends Component {
                 <Modal
                     visible={this.state.viewerMesin}
                     transparent={true}
-                    
+
                 >
                     <View style={{ height: '85%' }}>
                         <ImageViewer
@@ -115,17 +116,17 @@ export default class sampleMenuPenerimaan3 extends Component {
                             stepIndicatorSize: 20,
                             currentStepIndicatorSize: 20,
                             currentStepStrokeWidth: 1,
-                            stepStrokeCurrentColor: "#FBB040",
+                            stepStrokeCurrentColor: Colors.yellowStatusBar,
                             stepIndicatorCurrentColor: 'white',
-                            stepIndicatorLabelCurrentColor: "#FBB040",
-                            currentStepLabelColor: "#FBB040",
-                            stepStrokeUnFinishedColor: "#FBB040",
+                            stepIndicatorLabelCurrentColor: Colors.yellowStatusBar,
+                            currentStepLabelColor: Colors.yellowStatusBar,
+                            stepStrokeUnFinishedColor: Colors.yellowStatusBar,
                             separatorUnFinishedColor: '#DEE1E5',
                             stepIndicatorUnFinishedColor: '#DEE1E5',
                             stepIndicatorLabelUnFinishedColor: '#ffffff',
                             labelColor: '#E6E6E6',
-                            stepIndicatorFinishedColor: "#FBB040",
-                            separatorFinishedColor: "#FBB040",
+                            stepIndicatorFinishedColor: Colors.yellowStatusBar,
+                            separatorFinishedColor: Colors.yellowStatusBar,
                         }}
                         stepCount={Array.labelStep.length}
                     />
@@ -236,23 +237,25 @@ export default class sampleMenuPenerimaan3 extends Component {
 
                 <View style={{ width: '100%', justifyContent: 'flex-end', marginTop: 20, alignSelf: 'center', alignContent: 'flex-end', alignItems: 'center' }}>
                     <AwesomeButton
-                        backgroundColor='#fcc000'
-                        backgroundShadow={null}
+                        backgroundColor={Colors.yellowBasic}
+                        backgroundShadow={'#DBDBDB'}
                         backgroundPlaceholder={null}
-                        backgroundDarker={'#e0ac02'}
+                        backgroundDarker={'#FFED75'}
                         backgroundProgress={null}
                         width={120}
                         height={45}
                         raiseLevel={5}
                         borderRadius={10}
+                        progressLoadingTime={1000}
                         progress={!this.state.progress}
-                        onPress={() => {
-                            /** Do Something **/
-                            this.props.navigation.navigate('MenuPenerimaan3')
-                            null
+                        onPress={next => {
+                            setTimeout(() => {
+                                null
+                                next()
+                            }, 300);
                         }}
                     >
-                        <Text style={{ color: 'black', fontWeight: '700' }}>Berikutnya</Text>
+                        <Text style={{ color: 'black', fontWeight: '700' }}>Terima</Text>
                     </AwesomeButton>
                 </View>
             </Container>

app/container/profile/profile.js

 import React, { Component } from 'react';
-import { Container, Text } from 'native-base';
+import { Container, Text, View } from 'native-base';
+import LinearGradient from 'react-native-linear-gradient';
+import Colors from '../../library/colors';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
+import { Image } from 'react-native';
+import Images from '../../library/images';
 
 class Profile extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      arrayDummy: [
+        { image: 'user-alt', title: 'DADANG TUKIMIN' },
+        { image: 'phone', title: '+62 8123192381' },
+        { image: 'mail-bulk', title: 'datuk@gmail.com' },
+        { image: 'lock', title: '*******' },
+        // {image: Images.MenuProfile, title: 'DADANG TUKIMIN' },
+      ]
+    }
+  }
   render() {
     return (
-      <Container style={{alignItems:'center', justifyContent: 'center',}}>
-          <Text>Ini Profile</Text>
+      <Container style={{ alignItems: 'center' }}>
+        <LinearGradient style={{ height: '25%', width: '110%', borderBottomLeftRadius: 300, borderBottomRightRadius: 300, alignItems: 'center' }} colors={['#e4b300', '#e4b300']} angle={155} useAngle>
+          <Text style={{ marginTop: 50, fontSize: 20, fontWeight: 'bold' }}>DADANG TUKIMIN</Text>
+          <View style={{ width: 130, height: 130, borderRadius: 400, backgroundColor: '#fff', marginTop: 35 }} >
+            <Image source={Images.UserIcons} style={{ width: '100%', height: '100%'}} />
+          </View>
+        </LinearGradient>
+        <View style={{ marginTop: 100 }}>
+          {this.state.arrayDummy.map((item) => {
+            return (
+              <View style={{ borderBottomColor: '#e4b300', borderWidth: 1, width: '100%', height: 50, borderTopColor: 'transparent', borderLeftColor: 'transparent', borderRightColor: 'transparent', justifyContent: 'center', paddingHorizontal: 20 }}>
+                <View style={{ flexDirection: 'row' }}>
+                  <View style={{ width: '15%' }}>
+                    <FontAwesome5 name={item.image} size={20} />
+                  </View>
+                  {item.image === 'lock' ?
+                    <View style={{ justifyContent: 'space-between', width: '85%', flexDirection: 'row' }}>
+                      <Text style={{ alignSelf: 'center'}}>{item.title}</Text>
+                      <MaterialIcons name='navigate-next' size={26} />
+                    </View>
+                    :
+                    <View style={{ justifyContent: 'center', width: '85%' }}>
+                      <Text>{item.title}</Text>
+                    </View>
+                  }
+
+                </View>
+              </View>
+            )
+          })}
+        </View>
+
       </Container>
     );
   }

app/library/colors.js

@@ -2,6 +2,7 @@ const Colors = {
     yellowBasic: '#ffdd00',
     blackBasic: '#010101',
     dijjahYellow: '#fcc000',
+    yellowStatusBar: '#e4b300'
 }
 
 export default Colors;
\ No newline at end of file

app/library/images.js

@@ -23,6 +23,7 @@ const Images = {
     MenuProfile: require('../assets/Icon/MenuProfile.png'),
     MenuProfile1: require('../assets/Icon/MenuProfile–1.png'),
     ButtonBack: require('../assets/Icon/ButtonBack.png'),
+    UserIcons: require('../assets/Icon/user-icon.png'),
 
 }
 

app/navigation/appNavigation.js

@@ -4,7 +4,7 @@ import React from 'react'
 import { createAppContainer } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import { fromLeft, fromTop, flipY, fadeOut, fromRight, fromBottom } from 'react-navigation-transitions';
-import { headerStyle, headerTitleStyle, headerBgStyle, headerRightStyle} from './navStyle'
+import { headerStyle, headerTitleStyle, headerBgStyle, headerRightStyle } from './navStyle'
 
 //Screen
 import SplashScreen from '../splashScreen'
@@ -25,43 +25,46 @@ import IconBack from 'react-native-vector-icons/MaterialIcons'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 
 // import Images from '../Library/Images';
-import { View , Image} from 'react-native';
+import { View, Image } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import Colors from '../library/colors';
 import HomeTabNavigation from './homeTabNavigation';
+import Images from '../library/images';
 
 const MainNavigator = createStackNavigator({
-    Login: { screen: Login, navigationOptions: { header: null}},
-    LoginNew: { screen: LoginNew, navigationOptions: { header: null}},
-    Splash: { screen: SplashScreen, navigationOptions: { header: null}},
-    HomeNavigation: { screen: HomeTabNavigation, navigationOptions: { header: null}},
-    HomepageScreen: { screen: HomepageScreen, navigationOptions: { header: null} },
-    Appraisal: { screen: Appraisal, navigationOptions: { title: 'Appraisal'}},
-    MenuAppraisal: { screen: MenuAppraisal, navigationOptions: { title: 'Menu Appraisal'}},
-    MenuAppraisal2: { screen: MenuAppraisal2, navigationOptions: { title: 'Menu Appraisal'}},
-    MenuAppraisal3: { screen: MenuAppraisal3, navigationOptions: { title: 'Menu Appraisal'}},
-    Penerimaan: { screen: Penerimaan, navigationOptions: { title: 'Penerimaan'}},
-    MenuPenerimaan: { screen: MenuPenerimaan, navigationOptions: { header: null} },
-    MenuPenerimaan2: { screen: MenuPenerimaan2, navigationOptions: { header: null} },
-    MenuPenerimaan3: { screen: MenuPenerimaan3, navigationOptions: { header: null} },
-    // LatihanDragDrop: { screen: LatihanDragDrop, navigationOptions: { title: 'Latihan'}}
-  }, {
-    headerMode: 'screen',
-    initialRouteName: 'Splash',
-    transitionConfig: () => fromLeft(500),
-    defaultNavigationOptions: {
-      headerStyle,
-      headerTitleStyle,
-      headerBackground: (<LinearGradient colors={[Colors.yellowBasic, Colors.yellowBasic]} start={{x: 0, y: .3}} end={{x: 0, y: .9}} style={headerBgStyle} />),
-      headerTintColor: 'white',
-      headerBackImage: (
-        // <Image source={Images.buttonBack} style={{width: 30, height: 20}}/>
-        <TouchableOpacity style={{paddingLeft: 10}} activeOpacity={.9}>
-          <Ionicons name='ios-arrow-back' size={30} color={'#fff'}/>
-        </TouchableOpacity>
-      )
-    }
-  });
-  
-  export default createAppContainer(MainNavigator);
+  Login: { screen: Login, navigationOptions: { header: null } },
+  LoginNew: { screen: LoginNew, navigationOptions: { header: null } },
+  Splash: { screen: SplashScreen, navigationOptions: { header: null } },
+  HomeNavigation: { screen: HomeTabNavigation, navigationOptions: { header: null } },
+  HomepageScreen: { screen: HomepageScreen, navigationOptions: { header: null } },
+  Appraisal: { screen: Appraisal, navigationOptions: { title: 'Appraisal' } },
+  MenuAppraisal: { screen: MenuAppraisal, navigationOptions: { title: 'Menu Appraisal' } },
+  MenuAppraisal2: { screen: MenuAppraisal2, navigationOptions: { title: 'Menu Appraisal' } },
+  MenuAppraisal3: { screen: MenuAppraisal3, navigationOptions: { title: 'Menu Appraisal' } },
+  Penerimaan: { screen: Penerimaan, navigationOptions: { title: 'Penerimaan' } },
+  MenuPenerimaan: { screen: MenuPenerimaan, navigationOptions: { title: 'Menu Penerimaan' } },
+  MenuPenerimaan2: { screen: MenuPenerimaan2, navigationOptions: { title: 'Menu Penerimaan' } },
+  MenuPenerimaan3: { screen: MenuPenerimaan3, navigationOptions: { title: 'Menu Penerimaan' } },
+  // LatihanDragDrop: { screen: LatihanDragDrop, navigationOptions: { title: 'Latihan'}}
+}, {
+  headerMode: 'screen',
+  initialRouteName: 'Splash',
+  transitionConfig: () => fromLeft(500),
+  defaultNavigationOptions: {
+    headerStyle,
+    headerTitleStyle,
+    headerBackground: (<Image source={Images.background3} style={headerBgStyle}/>),
+    // <LinearGradient colors={[Colors.yellowStatusBar, Colors.yellowBasic]} start={{ x: 0, y: .3 }} end={{ x: 0, y: .9 }} style={headerBgStyle} />
+    
+    headerTintColor: 'white',
+    headerBackImage: (
+      // <Image source={Images.buttonBack} style={{width: 30, height: 20}}/>
+      <TouchableOpacity style={{ paddingLeft: 10 }} activeOpacity={.9}>
+        <Ionicons name='ios-arrow-back' size={30} color={'#fff'} />
+      </TouchableOpacity>
+    )
+  }
+});
\ No newline at end of file
+
+export default createAppContainer(MainNavigator);
\ No newline at end of file

app/navigation/homeTabNavigation.js

@@ -5,7 +5,7 @@ import { Image, Text } from 'react-native'
 import { View } from 'native-base';
 
 import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'  
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 
 
@@ -17,70 +17,72 @@ import Profile from '../container/profile/profile'
 import colors from '../library/colors';
 import Images from '../library/images';
 
-export default TabNavigator = createBottomTabNavigator(  
-    {  
-        Home: { 
-            screen: HomePageScreen,  
-            navigationOptions:{  
+export default TabNavigator = createBottomTabNavigator(
+    {
+        Home: {
+            screen: HomePageScreen,
+            navigationOptions: {
                 header: null,
                 tabBarLabel: ({ tintColor }) => (
                     <Text style={[styles.label, { color: tintColor }]}>Home</Text>
-                ),  
-                tabBarIcon: ({ tintColor }) => (  
-                <View style={{ justifyContent: 'center', alignSelf: 'center', paddingTop: 5}}>  
-                    <FontAwesome5 name={'home'} size={20} color={tintColor}/>
-                </View>),  
-            }  
-        },  
-        History: { screen: History,  
-            navigationOptions:{  
+                ),
+                tabBarIcon: ({ tintColor }) => (
+                    <View style={{ justifyContent: 'center', alignSelf: 'center', paddingTop: 5 }}>
+                        <Image source={Images.MenuHome} style={{ width: 35, height: 35, tintColor: tintColor }} />
+                    </View>),
+            }
+        },
+        History: {
+            screen: History,
+            navigationOptions: {
                 header: null,
                 tabBarLabel: ({ tintColor }) => (
                     <Text style={[styles.label, { color: tintColor }]}>History</Text>
                 ),
-                tabBarIcon: ({ tintColor }) => (  
-                <View style={{ justifyContent: 'center', alignSelf: 'center', paddingTop: 5}}>  
-                    <FontAwesome5 name={'history'} size={20} color={tintColor}/>
-                </View>), 
+                tabBarIcon: ({ tintColor }) => (
+                    <View style={{ justifyContent: 'center', alignSelf: 'center', paddingTop: 5 }}>
+                        <Image source={Images.MenuHistory} style={{ width: 35, height: 35, tintColor: tintColor }} />
+                    </View>),
                 // activeColor: '#f60c0d',  
                 // inactiveColor: '#f65a22',  
                 // barStyle: { backgroundColor: '#f69b31' },  
-            }  
-        },  
-        Notif: { screen: Notif,  
-            navigationOptions:{  
+            }
+        },
+        Notif: {
+            screen: Notif,
+            navigationOptions: {
                 header: null,
                 tabBarLabel: ({ tintColor }) => (
                     <Text style={[styles.label, { color: tintColor }]}>Notification</Text>
-                ),  
-                tabBarIcon: ({ tintColor }) => (  
-                    <View style={{ justifyContent: 'center', alignSelf: 'center', paddingTop: 5}}>  
-                        <FontAwesome5 name={'bell'} size={20} color={tintColor}/>
-                    </View>),  
+                ),
+                tabBarIcon: ({ tintColor }) => (
+                    <View style={{ justifyContent: 'center', alignSelf: 'center', paddingTop: 5 }}>
+                        <Image source={Images.MenuNotification} style={{ width: 35, height: 35, tintColor: tintColor }} />
+                    </View>),
                 // activeColor: '#615af6',  
                 // inactiveColor: '#46f6d7',  
                 // barStyle: { backgroundColor: '#67baf6' },  
-            }  
-        },  
-        Profile: {  
-            screen: Profile,  
-            navigationOptions:{  
+            }
+        },
+        Profile: {
+            screen: Profile,
+            navigationOptions: {
                 header: null,
                 tabBarLabel: ({ tintColor }) => (
                     <Text style={[styles.label, { color: tintColor }]}>Profile</Text>
                 ),
-                tabBarVisible: true, 
-                tabBarIcon: ({ tintColor }) => (  
-                    <View style={{ justifyContent: 'center', alignSelf: 'center', paddingTop: 5}}>  
-                        <FontAwesome5 name={'baby'} size={20} color={tintColor}/>
+                tabBarVisible: true,
+                tabBarIcon: ({ tintColor }) => (
+                    <View style={{ justifyContent: 'center', alignSelf: 'center', paddingTop: 5 }}>
+                        <Image source={Images.MenuProfile} style={{ width: 35, height: 35, tintColor: tintColor }} />
                     </View>),
-            }  
-        },  
-    },  
-    {  
+            }
+        },
+    },
+    {
         tabBarOptions: {
             inactiveTintColor: 'gray',
-            activeTintColor: colors.yellowBasic,
+            activeTintColor: '#e4b300',
             style: {
                 backgroundColor: '#FFFFFF',
                 width: '100%',
@@ -89,9 +91,9 @@ export default TabNavigator = createBottomTabNavigator(
                 color: 'black'
             }
         },
-    },  
-);  
-  
+    },
+);
+
 const styles = {
     label: {
         textAlign: 'center', fontSize: 12, marginBottom: 5

app/navigation/navStyle.js

@@ -19,6 +19,7 @@ export const headerTitleStyle = {
     textAlign: 'center',
     marginLeft: -15,
     fontWeight: '600',
+    color: '#fff'
 }
 
 export const headerRightStyle = {