Skip to content

N
new_excelso
Commit 7c26a0b9 authored by Trisno's avatar Trisno
Browse files
Options

loading bar di reward

parent 5a64c156
Hide whitespace changes
Inline Side-by-side
Showing with 34 additions and 31 deletions
view/RewardsList.js
View file @ 7c26a0b9
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,36 +57,37 @@ class RewardsList extends React.Component {
</View>
<ScrollView style={styles.body}>
{
this.state.rewardsList.length ? (
this.state.rewardsList.map((item, key) => (
<TouchableOpacity key={key} onPress={() => this.props.navigation.navigate('Reward Detail', { rewardId: item.id })}>
<View style={{ alignItems: 'center' }}>
<Card style={{ padding: 5, margin: 5 }}>
<View>
<Image source={{ uri: item.reward.title_image }}
resizeMethod="resize"
resizeMode='cover'
style={{ height: 100, width: '100%' }} />
</View>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
<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>
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 })}>
<View style={{ alignItems: 'center' }}>
<Card style={{ padding: 5, margin: 5 }}>
<View>
<Image source={{ uri: item.reward.title_image }}
resizeMethod="resize"
resizeMode='cover'
style={{ height: 100, width: '100%' }} />
</View>
<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 style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
<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 }}>
<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>
</View>
</View>
</Card>
</Card>
</View>
</TouchableOpacity>
))
) : (
<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>
))
) : (
<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'
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment