didam

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,8 @@
   package="com.ad1appraisal_mobile">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 
     <application
       android:name=".MainApplication"

app/App.js

@@ -15,7 +15,7 @@ export default class App extends Component {
   render() {
     return (
       <Container>
-          {/* <StatusBar backgroundColor={Colors.yellowBasic} translucent={false} barStyle={'light-content'}/> */}
+          <StatusBar backgroundColor={Colors.yellowBasic} translucent={false} barStyle={'dark-content'}/>
           <AppNavigation/>
       </Container>
     );

app/container/history/history.js

+import React, { Component } from 'react';
+import { Container, Text } from 'native-base';
+
+class History extends Component {
+  render() {
+    return (
+      <Container style={{alignItems:'center', justifyContent: 'center',}}>
+          <Text>Ini history</Text>
+      </Container>
+    );
+  }
+}
+
+export default History;

app/container/homepageScreen.js → app/container/home/homepageCopy.js

@@ -4,8 +4,8 @@ import { Text, TouchableOpacity, Platform, Dimensions, StyleSheet, ImageBackgrou
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import ReactNativeParallaxHeader from 'react-native-parallax-header';
-import Colors from '../library/colors';
-import Images from '../library/images';
+import Colors from '../../library/colors';
+import Images from '../../library/images';
  
 const SCREEN_HEIGHT = Dimensions.get('window').height
 
@@ -90,8 +90,8 @@ export default class HomepageScreen extends Component {
           {/* <Text>You are placed in this WAREHOUSE : </Text> */}
             {this.state.data.map((item,index) => {
                 return (
-                    <ImageBackground source={item.image} style={{marginBottom: index == this.state.data.length - 1 ? 20 : 0, backgroundColor: '#bababa', height: 250, width: 250, marginTop: 25, borderRadius: 10, elevation: 5}} imageStyle={{borderRadius: 10, opacity: .5}}>
-                      <TouchableOpacity style={{flex: 1, backgroundColor:'transparent', justifyContent: 'flex-end',}} onPress={() => this.props.navigation.navigate('MenuPenerimaan')}>
+                    <ImageBackground source={item.image} style={{marginBottom: index == this.state.data.length - 1 ? 20 : 0, backgroundColor: '#bababa', height: 250, width: 250, marginTop: 25, borderRadius: 10, elevation: 5}} imageStyle={{borderRadius: 10, opacity: .8}}>
+                      <TouchableOpacity style={{flex: 1, backgroundColor:'transparent', justifyContent: 'flex-end',}} onPress={() => this.props.navigation.navigate('WarehouseDetail')}>
                         <View style={{backgroundColor:'rgba(255, 221, 0, .8)', padding: 5, alignItems:'center', borderBottomLeftRadius: 10, borderBottomRightRadius: 10}}>
                           <Text style={{color: '#fff'}}>{item.label}</Text>
                         </View>

app/container/home/homepageScreen.js

+import React, { Component } from 'react';
+import { Container, Text, View } from 'native-base';
+import LinearGradient from 'react-native-linear-gradient';
+import Colors from '../../library/colors';
+import { TouchableOpacity } from 'react-native';
+
+class HomePageScreen extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      data: ['Penerimaan', 'Appraisal', 'Approval']
+    }
+  }
+
+  handleNav(item) {
+    if (item == 'Penerimaan') {
+      this.props.navigation.navigate('Penerimaan')
+    } else if ( item == 'Appraisal') {
+      this.props.navigation.navigate('MenuPenerimaan')
+    } else {
+      this.props.navigation.navigate('MenuPenerimaan')
+    }
+  }
+
+  render() {
+    return (
+      <Container>
+        <LinearGradient style={{height: 150, width: '100%', justifyContent:'flex-end', padding: 20}} colors={[Colors.blackBasic, Colors.yellowBasic]} start={{x: 0, y: .5}} end={{x: 0, y: .4}}>
+          <View style={{flexDirection:'row', justifyContent: 'space-between',}}>
+            <Text style={{color:'#fff'}}> Dadang Kuspriadi </Text>
+            <Text style={{color:'#fff'}}>Warehouse</Text>
+          </View>
+        </LinearGradient>
+        <View style={{marginTop: 10, width: '100%'}}>
+          <View style={{flexDirection:'row', paddingVertical: 10}}>
+            {this.state.data.map((item, index) => {
+              return(
+                <TouchableOpacity onPress={() => this.handleNav(item)} style={{padding: 5, alignItems:'center', justifyContent: 'center', width: 75, height: 75, marginLeft: 15, borderRadius: 3, backgroundColor: Colors.blackBasic}}>
+                  <Text style={{fontSize: 12, color:'#fff'}}>{item}</Text>
+                </TouchableOpacity>
+              )
+            })}
+          </View>
+        </View>
+        <View style={{width: '100%', backgroundColor:'#dbdbdb', height: 3, marginVertical: 10}}/>
+      </Container>
+    );
+  }
+}
+
+export default HomePageScreen;

app/container/home/penerimaan/penerimaan.js

+import React, { Component } from 'react';
+import { ScrollView, TouchableOpacity } from 'react-native';
+import { Container, Text } from 'native-base';
+
+class Penerimaan extends Component {
+    constructor(props) {
+        super(props) 
+        this.state = {
+            data: ['1', '2']
+        }
+    }
+
+    render() {
+    return (
+      <Container>
+          <ScrollView style={{marginTop: 100}}>
+              {this.state.data.map((item, index) => {
+                  return(
+                      <TouchableOpacity style={{alignSelf:'center', alignItems:'center', justifyContent: 'center', backgroundColor:'green', width: '50%', height: 50, marginTop: 100}}>
+                          <Text style={{color:'#fff'}}>{'List ' + item}</Text>
+                      </TouchableOpacity>
+                  )
+              })}
+          </ScrollView>
+      </Container>
+    );
+  }
+}
+
+export default Penerimaan;

app/container/notif/notif.js

+import React, { Component } from 'react';
+import { Container, Text } from 'native-base';
+
+class Notif extends Component {
+  render() {
+    return (
+      <Container style={{alignItems:'center', justifyContent: 'center',}}>
+          <Text>Ini Notif</Text>
+      </Container>
+    );
+  }
+}
+
+export default Notif;

app/container/profile/profile.js

+import React, { Component } from 'react';
+import { Container, Text } from 'native-base';
+
+class Profile extends Component {
+  render() {
+    return (
+      <Container style={{alignItems:'center', justifyContent: 'center',}}>
+          <Text>Ini Profile</Text>
+      </Container>
+    );
+  }
+}
+
+export default Profile;

app/navigation/appNavigation.js

@@ -7,9 +7,11 @@ import { fromLeft, fromTop, flipY, fadeOut, fromRight, fromBottom } from 'react-
 import { headerStyle, headerTitleStyle, headerBgStyle, headerRightStyle} from './navStyle'
 
 //Screen
-import HomepageScreen from '../container/homepageScreen'
-import MenuPenerimaan from '../container/sampleMenuPenerimaan'
-import MenuPenerimaan2 from '../container/sampleMenuPenerimaan2'
+import HomepageScreen from '../container/home/homepageScreen'
+import Penerimaan from '../container/home/penerimaan/penerimaan'
+import MenuPenerimaan from '../container/home/penerimaan/sampleMenuPenerimaan'
+import MenuPenerimaan2 from '../container/home/penerimaan/sampleMenuPenerimaan2'
+import MenuPenerimaan3 from '../container/home/penerimaan/sampleMenuPenerimaan3'
 
 //IconBack
 import IconBack from 'react-native-vector-icons/MaterialIcons'
@@ -20,26 +22,31 @@ import { View , Image} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import CreateFormScreen from '../container/createFormScreen';
+import Colors from '../library/colors';
+import HomeTabNavigation from './homeTabNavigation';
 
 const MainNavigator = createStackNavigator({
+    HomeNavigation: { screen: HomeTabNavigation, navigationOptions: { header: null}},
     HomepageScreen: { screen: HomepageScreen, navigationOptions: { header: null} },
     CreateFromScreen: { screen: CreateFormScreen, navigationOptions: { header: null}},
+    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: 'HomepageScreen',
+    initialRouteName: 'HomeNavigation',
     transitionConfig: () => fromLeft(500),
     defaultNavigationOptions: {
       headerStyle,
       headerTitleStyle,
-    //   headerBackground: (<Image source={Images.backgroudNav} style={headerBgStyle} />),
+      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={'white'}/>
+          <Ionicons name='ios-arrow-back' size={30} color={'#fff'}/>
         </TouchableOpacity>
       )
     }

app/navigation/homeTabNavigation.js

+
+import React from 'react'
+import { createBottomTabNavigator } from 'react-navigation-tabs'
+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 MaterialIcons from 'react-native-vector-icons/MaterialIcons'
+
+
+//Screen
+import HomePageScreen from '../container/home/homepageScreen'
+import History from '../container/history/history'
+import Notif from '../container/notif/notif'
+import Profile from '../container/profile/profile'
+import colors from '../library/colors';
+import Images from '../library/images';
+
+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:{  
+                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>), 
+                // activeColor: '#f60c0d',  
+                // inactiveColor: '#f65a22',  
+                // barStyle: { backgroundColor: '#f69b31' },  
+            }  
+        },  
+        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>),  
+                // activeColor: '#615af6',  
+                // inactiveColor: '#46f6d7',  
+                // barStyle: { backgroundColor: '#67baf6' },  
+            }  
+        },  
+        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}/>
+                    </View>),
+            }  
+        },  
+    },  
+    {  
+        tabBarOptions: {
+            inactiveTintColor: 'gray',
+            activeTintColor: colors.yellowBasic,
+            style: {
+                backgroundColor: '#FFFFFF',
+                width: '100%',
+            },
+            labelStyle: {
+                color: 'black'
+            }
+        },
+    },  
+);  
+  
+const styles = {
+    label: {
+        textAlign: 'center', fontSize: 12, marginBottom: 5
+    }
+}
\ No newline at end of file

app/navigation/navStyle.js

@@ -17,8 +17,8 @@ export const headerTitleStyle = {
     // fontSize: Fonts.size.title,
     // fontFamily: Fonts.type.regular,
     textAlign: 'center',
-    marginLeft: -35
-    // fontWeight: '600',
+    marginLeft: -15,
+    fontWeight: '600',
 }
 
 export const headerRightStyle = {
@@ -29,7 +29,7 @@ export const headerRightStyle = {
     width: 75,
 }
 export const headerBgStyle = {
-    height: Platform.OS == 'android' ? 55 : DeviceInfo.hasNotch() ? 90 : 65,
+    height: Platform.OS == 'android' ? 57 : DeviceInfo.hasNotch() ? 90 : 65,
     width: metrics.screenWidth,
     // resizeMode: 'cover'
 }
\ No newline at end of file

package.json

@@ -21,16 +21,27 @@
     "react-native-fast-image": "^7.0.2",
     "react-native-gesture-handler": "^1.6.0",
     "react-native-linear-gradient": "^2.5.6",
-    "react-native-parallax-header": "^1.1.3",
     "react-native-paper": "^3.6.0",
+    "react-native-parallax-header": "^1.1.3",
     "react-native-really-awesome-button": "^1.6.0",
+    "react-native-reanimated": "^1.7.0",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.2.0",
     "react-native-step-indicator": "0.0.11",
+    "react-native-tab-view": "^2.13.0",
     "react-native-vector-icons": "^6.6.0",
     "react-navigation": "^4.2.2",
     "react-navigation-stack": "^2.2.2",
-    "react-navigation-transitions": "^1.0.12"
+    "react-navigation-tabs": "^2.8.2",
+    "react-navigation-transitions": "^1.0.12",
+    "rn-fetch-blob": "^0.12.0",
+    "react-native-modal-datetime-picker": "^8.5.1",
+    "react-native-image-picker": "^2.3.1",
+    "react-native-image-zoom-viewer": "^2.2.27",
+    "react-native-document-picker": "^3.2.4",
+    "react-moment": "^0.9.7",
+    "moment": "^2.24.0",
+    "@react-native-community/datetimepicker": "^2.2.2"
   },
   "devDependencies": {
     "@babel/core": "7.8.6",