-
Notifications
You must be signed in to change notification settings - Fork 1
/
TopComponent.js
110 lines (102 loc) · 2.47 KB
/
TopComponent.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React from "react";
import {
Text,
View,
TouchableOpacity,
ActivityIndicator,
Animated,
Dimensions,
StyleSheet
} from "react-native";
import { Camera, Permissions } from "expo";
const height = 70;
export class TopComponent extends React.Component {
constructor(props) {
super(props);
const width = Dimensions.get("window").width;
this.state = {
fadeAnim: new Animated.Value(-height)
};
}
isHidden = true;
startAnimation = (toValue, duration) => {
Animated.timing(this.state.fadeAnim, {
toValue: toValue,
duration: duration
}).start();
};
_toggleSubview = toValue => {
//This will animate the transalteY of the subview between 0 & height depending on its current state
//height comes from the style below, which is the height of the subview.
Animated.spring(this.state.fadeAnim, {
toValue: toValue,
velocity: height,
tension: 1,
friction: 6
}).start();
};
render() {
const { fadeAnim } = this.state;
const {
isVisible,
recycleText,
recyclable,
compostable,
special
} = this.props;
const width = Dimensions.get("window").width;
if (isVisible) {
this._toggleSubview(0);
} else {
this._toggleSubview(-height);
}
return (
<Animated.View
style={[
{
paddingTop: 25,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#fff",
height: height,
position: "absolute",
top: 0,
width: "100%",
zIndex: 1000
},
{
transform: [{ translateY: fadeAnim }]
},
recyclable
? styles.recyclable
: compostable
? styles.compost
: special
? styles.special
: styles.nonrecyclable
]}
>
<View style={{ flexDirection: "row", padding: 10 }}>
<Text style={{ fontSize: 24, fontWeight: "900", color: "#fff" }}>
{recycleText ? recycleText.charAt(0).toUpperCase() + recycleText.slice(1) : "Banana"}
</Text>
</View>
</Animated.View>
);
}
}
const styles = StyleSheet.create({
recyclable: {
backgroundColor: "#4BB543"
},
nonrecyclable: {
backgroundColor: "#ff0033"
},
special: {
backgroundColor: "#2E5894"
},
compost: {
backgroundColor: "#DEA681"
}
});