didam

app/container/history/history.js

 import React, { Component } from 'react';
 import { Container, Text } from 'native-base';
-import { View } from 'react-native';
+import { View, ScrollView } from 'react-native';
+import Colors from '../../library/colors';
 
 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']
+    }
+  }
   render() {
     return (
       <Container>
-          <View style={{height: 50, width: '100%', backgroundColor: '#e4b300', zIndex: 1}}>
-            <View style={{alignItems:'center', justifyContent: 'center',}}>
-              <Text>History</Text>
+          <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>
+            </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={{flexDirection: 'row' ,justifyContent: 'space-evenly',}}>
-              <View style={{height: 70, width: 70, borderRadius: 70, backgroundColor: 'transparent', marginTop: 40, zIndex: 1}}/>
-              <View style={{height: 70, width: 70, borderRadius: 70, backgroundColor: 'transparent', marginTop: 40, zIndex: 1}}/>
-              <View style={{height: 70, width: 70, borderRadius: 70, backgroundColor: 'transparent', marginTop: 40, zIndex: 1}}/>
-              {/* <View style={{height: 70, width: 70, borderRadius: 70, backgroundColor: 'transparent', marginTop: 40, zIndex: 1}}/> */}
-              <View style={{height: 50, width: 50, borderRadius: 50, backgroundColor: 'red', marginTop: 35, zIndex: 2}}/>
+          <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>
+                      <Text style={{textAlign: 'right', fontStyle:'italic', fontSize: 12, marginTop: 5, color: '#cccccc'}}> {item} </Text>
                     </View>
+                    
+                  )
+                })}
+                
+              </ScrollView>
           </View>
       </Container>
     );