/
index.js
87 lines (81 loc) · 3 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import React, {Component, PropTypes} from 'react';
import {
View, Text, Image, StyleSheet, Animated, InteractionManager
} from 'react-native';
import {autobind} from 'core-decorators';
import {
CustomView, ThankYou, Flower, TextFont, Button
} from '../../components';
import {Actions} from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/FontAwesome';
import {getPlatformValue} from '../../utils';
export default class CheckoutSuccess extends Component {
state = {
textAnimate: new Animated.Value(0),
flowerAnimate: new Animated.Value(0)
}
@autobind
handleToCategory() {
Actions.popTo('categoryLists', {title: 'Category'});
}
handleToOrderView(){
Actions.orderView();
}
componentDidMount(){
Animated.parallel([
Animated.timing(this.state.textAnimate, {
toValue: 1,
duration: 800
}),
Animated.timing(this.state.flowerAnimate, {
toValue: 1,
duration: 600
}),
]).start()
}
render() {
return <CustomView flex={1} backgroundColor="transparent">
<Animated.View style={{position:'relative', top: this.state.flowerAnimate.interpolate({
inputRange: [0, 1],
outputRange: [-84, 0]
})}}>
<Flower/>
</Animated.View>
<Animated.View style={{opacity: this.state.textAnimate}}>
<ThankYou marginTop={199}/>
</Animated.View>
<Animated.View style={{position:'relative', top: this.state.textAnimate.interpolate({
inputRange: [0, 1],
outputRange: [695, 0]
})}}>
<View style={{alignItems: 'center'}}>
<TextFont
textAlign="center"
fontSize={30}
lineHeight={getPlatformValue('ios', 29, 40)}
width={300}
marginTop={47}
>
Checkout successfully
</TextFont>
</View>
<CustomView paddingLeft={50} paddingRight={50} marginTop={57}>
<TextFont textAlign="center">
We will complete send gift to your love ^_^
</TextFont>
</CustomView>
<CustomView flexDirection="column" alignItems="center">
<Button gradient marginTop={30} onPress={this.handleToOrderView}>
<Icon name="address-card-o" size={20}/> Review order
</Button>
<Button marginTop={20} borderWidth={0} onPress={this.handleToCategory}>
<Icon name="home" size={20}/> Go back home
</Button>
</CustomView>
</Animated.View>
</CustomView>
}
}
CheckoutSuccess.propTypes = {
disableInteractionCheck: PropTypes.bool
}