instagramable

app/container/history/history.js

 import React, { Component } from 'react';
 import { Container, Text } from 'native-base';
 import { View, ScrollView } from 'react-native';
+import M from 'moment'
+import SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient'
+import Svg, { Circle, Rect } from 'react-native-svg'
 import Colors from '../../library/colors';
 
+const dateNow = M().format('DD-MM-YYYY')
+
 class History extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      data: ['17.30','17.45','17.55','18.03','18.10','18.34','18.57','19.28','19.49','20:00']
+      data: [
+        { jam: '17.30', tanggal: M().format('DD-MM-YYYY') },
+        { jam: '17.30', tanggal: '06-03-2020' },
+        { jam: '17.30', tanggal: '05-03-2020' },
+        { jam: '17.30', tanggal: '05-03-2020' },
+        { jam: '17.30', tanggal: '05-03-2020' },
+        { jam: '17.30', tanggal: '05-03-2020' },
+        { jam: '17.30', tanggal: '04-03-2020' },
+        { jam: '17.30', tanggal: '04-03-2020' },
+        { jam: '17.30', tanggal: '04-03-2020' },
+        { jam: '17.30', tanggal: '04-03-2020' },
+        { jam: '17.30', tanggal: '04-03-2020' },
+        { jam: '17.30', tanggal: '03-03-2020' },
+        { jam: '17.30', tanggal: '03-03-2020' },
+      ],
+      date: new Date(),
+      yesterday: '',
+      loading: true,
+      dataLoad: false
+    }
   }
+
+  componentDidMount() {
+    var a = this.state.date.setDate(this.state.date.getDate() - 1)
+    var yesterday = M(a).format('DD-MM-YYYY')
+    this.setState({ yesterday })
+    setTimeout(() => {
+      this.setState({ dataLoad: true, loading: false })
+    }, 2000);
   }
+
   render() {
     return (
       <Container>
-          <View style={{height: '10%', width: '100%', backgroundColor: '#e4b300', zIndex: 1}}>
-            <View style={{alignItems:'center', justifyContent: 'center', marginTop: 20}}>
-              <Text style={{fontWeight: 'bold', fontSize: 20, fontStyle: 'italic'}}>My History</Text>
+        <View style={{ height: '10%', width: '100%', backgroundColor: '#e4b300', zIndex: 1 }}>
+          <View style={{ alignItems: 'center', justifyContent: 'center', marginTop: 20 }}>
+            <Text style={{ fontWeight: 'bold', fontSize: 20, fontStyle: 'italic' }}>My History</Text>
           </View>
-            <View style={{alignItems: 'center', justifyContent: 'center'}}>
-              <View style={{height: 50, width: 50, borderRadius: 50, backgroundColor: '#f5f5f5', marginTop: 20, zIndex: 2}}/>
+          <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+            <View style={{ height: 50, width: 50, borderRadius: 50, backgroundColor: '#f5f5f5', marginTop: 20, zIndex: 2 }} />
           </View>
         </View>
-          <View style={{backgroundColor: '#f5f5f5', paddingHorizontal: 20, zIndex: 3, height: '90%'}}>
-              <ScrollView style={{flex: 1}} showsVerticalScrollIndicator={false}>
-                {this.state.data.map((item,index) => {
-                  return(
-                    <View style={{marginTop: index == 0? 40 : 20, marginBottom: index == this.state.data.length -1 ? 20 : 0,}}>
-                      <View style={{ width: '100%', height: 100, backgroundColor: '#fff', borderRadius: 10}}>
+        <View style={{ backgroundColor: '#f5f5f5', paddingHorizontal: 20, zIndex: 3, height: '90%' }}>
+
 
+          <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
+            {this.state.data.map((item, index) => {
+              return (
+                <View>
+                  {this.state.dataLoad && (
+                    <View style={{ marginTop: index == 0 ? 40 : 20, marginBottom: index == this.state.data.length - 1 ? 20 : 0, height: 120 }}>
+                      <View style={{ width: '100%', height: 100, backgroundColor: '#fff', borderRadius: 10 }}>
                       </View>
-                      <Text style={{textAlign: 'right', fontStyle:'italic', fontSize: 12, marginTop: 5, color: '#cccccc'}}> {item} </Text>
+                      <Text style={{ textAlign: 'right', fontStyle: 'italic', fontSize: 12, marginTop: 5, color: '#cccccc' }}>{item.tanggal == String(dateNow) ? item.jam : item.tanggal == this.state.yesterday ? 'yesterday' : item.tanggal} </Text>
+                    </View>
+                  )}
+                  {this.state.loading && (
+                    <SvgAnimatedLinearGradient
+                      height={130}
+                      borderRadius={200}
+                      marginTop={10}
+                      width={'100%'}
+                    >
+                      <Rect x="0" y="30" rx="5" ry="1" width="1000" height="100" />
+                    </SvgAnimatedLinearGradient>
+                  )
+                  }
                 </View>
-                    
               )
             })}
 
           </ScrollView>
         </View>
-      </Container>
+      </Container >
     );
   }
 }

package.json

@@ -18,10 +18,13 @@
     "moment": "^2.24.0",
     "native-base": "^2.13.8",
     "react": "16.9.0",
+    "react-dom": "^16.13.0",
+    "react-dropdown": "^1.6.4",
     "react-moment": "^0.9.7",
     "react-native": "0.61.5",
     "react-native-device-info": "^5.5.3",
     "react-native-document-picker": "^3.2.4",
+    "react-native-dropdown": "0.0.6",
     "react-native-elements": "^1.2.7",
     "react-native-fast-image": "^7.0.2",
     "react-native-gesture-handler": "^1.6.0",
@@ -38,6 +41,8 @@
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.2.0",
     "react-native-step-indicator": "0.0.11",
+    "react-native-svg": "^12.0.2",
+    "react-native-svg-animated-linear-gradient": "^0.3.4",
     "react-native-tab-view": "^2.13.0",
     "react-native-textinput-effects": "^0.5.1",
     "react-native-vector-icons": "^6.6.0",