loading bar di reward

view/RewardsList.js

 import React from 'react';
-import { View, Text, Image, StyleSheet, ScrollView, Alert, TouchableOpacity } from 'react-native';
+import { View, Text, Image, StyleSheet, ScrollView, Alert, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { Card } from 'react-native-shadow-cards'
 import { connect } from 'react-redux';
 import Axios from 'axios';
@@ -9,7 +9,8 @@ class RewardsList extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-            rewardsList: []
+            rewardsList: [],
+            indicator: true
         }
     }
 
@@ -38,7 +39,8 @@ class RewardsList extends React.Component {
             })
             // console.log(data)
             this.setState({
-                rewardsList: data
+                rewardsList: data,
+                indicator: false
             })
 
         }).catch(error => {
@@ -55,6 +57,7 @@ class RewardsList extends React.Component {
                 </View>
                 <ScrollView style={styles.body}>
                     {
+                        this.state.indicator ? (<ActivityIndicator style={{ top: 20, justifyContent: "center" }} size="large" color="#c9af6d" />) : (
                             this.state.rewardsList.length ? (
                                 this.state.rewardsList.map((item, key) => (
                                     <TouchableOpacity key={key} onPress={() => this.props.navigation.navigate('Reward Detail', { rewardId: item.id })}>
@@ -67,11 +70,11 @@ class RewardsList extends React.Component {
                                                         style={{ height: 100, width: '100%' }} />
                                                 </View>
                                                 <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
-                                                <View style={{ flex: 0.6}}>
+                                                    <View style={{ flex: 0.6 }}>
                                                         <Text style={{ textAlign: 'left', fontSize: 12, fontFamily: 'Gotham-Black', color: '#838383' }}>{item.reward.title}</Text>
                                                         <Text style={{ textAlign: 'left', fontSize: 12, fontFamily: 'Gotham-Light', color: '#838383' }}>{item.reward.subtitle}</Text>
                                                     </View>
-                                                <View style={{ flex: 0.4}}>
+                                                    <View style={{ flex: 0.4 }}>
                                                         <Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: '#838383' }}>Expired On</Text>
                                                         <Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light', color: '#838383' }}>{item.expire_time}</Text>
                                                     </View>
@@ -84,7 +87,7 @@ class RewardsList extends React.Component {
                                     <View style={{ justifyContent: 'center', alignItems: 'center', height: 100 }}>
                                         <Text style={{ textAlign: 'left', fontSize: 12, fontFamily: 'Gotham-Light', color: 'grey' }}>No E-Voucher Available</Text>
                                     </View>
-                            )
+                                ))
                     }
                     <TouchableOpacity style={{ marginVertical: 20 }} onPress={() => this.props.navigation.navigate('Reward History')}>
                         <Text style={{ textAlign: 'center', color: '#CFB368', fontSize: 12, fontFamily: 'Gotham-Black' }}>REDEEM E-VOUCHER HISTORY</Text>
@@ -103,7 +106,7 @@ const styles = StyleSheet.create({
     },
     header: {
         flex: 0.1,
-        marginBottom:5,
+        marginBottom: 5,
         backgroundColor: '#CFB368',
         justifyContent: 'center'
     },