didam

app/container/history/history.js

@@ -15,7 +15,7 @@ class History extends Component {
       <Container>
           <View style={{height: '10%', width: '100%', backgroundColor: '#e4b300', zIndex: 1}}>
             <View style={{alignItems:'center', justifyContent: 'center', marginTop: 20}}>
-              <Text style={{color: '#fff', fontSize: 20, fontStyle: 'italic'}}>My History</Text>
+              <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}}/>

app/container/notif/notif.js

 import React, { Component } from 'react';
-import { Container, Text } from 'native-base';
+import { Container } from 'native-base';
+import { View, Text, ScrollView, Image } from 'react-native';
+import Images from '../../library/images';
 
 class Notif extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      data: [
+        {
+          image: Images.joro,
+          name: 'Juminten'
+        },
+        {
+          image: Images.luffy,
+          name: 'Mr. Anonym'
+        },
+        {
+          image: Images.kagatau,
+          name: 'John Nanang'
+        },
+        {
+          image: Images.copper,
+          name: 'Prabu Maskapai'
+        },
+      ]
+    }
+  }
   render() {
     return (
-      <Container style={{alignItems:'center', justifyContent: 'center',}}>
-          <Text>Ini Notif</Text>
+      <Container>
+          <View style={{height: '10%', width: '100%', backgroundColor: '#e4b300', zIndex: 1}}>
+            <View style={{alignItems:'center', justifyContent: 'center', marginTop: 20}}>
+              <Text style={{ fontSize: 20, fontStyle: 'italic', fontWeight:'bold'}}> Notification </Text>
+            </View>
+            <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? 30 : 15, marginBottom: index == this.state.data.length -1 ? 20 : 0, backgroundColor: '#e4b300', padding: 0, paddingTop: 15, borderRadius: 5}}>
+                      <View style={{flexDirection: 'row'}}>
+                        <View style={{width: '20%', justifyContent: 'center', alignItems:'flex-end'}}>
+                          <Image style={{width: 50, height: 50, borderRadius: 50, borderColor: '#fff', borderWidth: 2}} source={item.image}/>
+                        </View>
+                        <View style={{width: '80%', marginLeft: 15, alignItems: 'center', flexDirection:'row'}}>
+                          <Text style={{fontSize: 14, fontWeight: 'bold', fontStyle: 'italic'}}>{item.name}</Text>
+                          <Text style={{fontSize: 12, fontStyle: 'italic'}}>  Need Approval from you ! </Text>
+                        </View>
+                      </View>
+                      <View style={{width: '100%', height: 1, backgroundColor:'#dbdbdb', marginTop: 10}}/>
+                    </View>
+                    
+                  )
+                })}
+                
+              </ScrollView>
+          </View>
       </Container>
     );
   }

app/library/images.js

@@ -8,6 +8,11 @@ const Images = {
     background2: require('../assets/Background2.jpg'),
     background3: require('../assets/Background3.jpg'),
 
+    //Dummy
+    luffy: require('../assets/dummyNotif/luffy.jpeg'),
+    copper: require('../assets/dummyNotif/copper.jpeg'),
+    joro: require('../assets/dummyNotif/joro.jpeg'),
+    kagatau: require('../assets/dummyNotif/kagatau.jpg'),
 
     //ICONS
     IconAppraisal: require('../assets/Icon/IconAppraisal.png'),