/
Overlay.js
64 lines (57 loc) · 1.34 KB
/
Overlay.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
// @flow
import React from 'react';
import { Animated, StyleSheet } from 'react-native';
const DEFAULT_ANIMATE_TIME = 300;
const styles = StyleSheet.create({
fullOverlay: {
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'transparent',
position: 'absolute',
},
emptyOverlay: {
width: 0,
height: 0,
backgroundColor: 'transparent',
position: 'absolute',
},
});
type Props = {
visible: boolean,
onCancel: () => void,
children: React.Node,
};
type State = {
fadeAnim: Object,
overlayStyle: Object,
};
class Overlay extends React.Component<Props, State> {
state = {
fadeAnim: new Animated.Value(0),
overlayStyle: styles.emptyOverlay,
};
onAnimatedEnd() {
if (!this.props.visible) {
this.setState({ overlayStyle: styles.emptyOverlay });
}
}
UNSAFE_componentWillReceiveProps(newProps: Props) {
if (newProps.visible) {
this.setState({ overlayStyle: styles.fullOverlay });
}
return Animated.timing(this.state.fadeAnim, {
toValue: newProps.visible ? 1 : 0,
duration: DEFAULT_ANIMATE_TIME,
}).start(this.onAnimatedEnd.bind(this));
}
render() {
return (
<Animated.View style={[this.state.overlayStyle, { opacity: this.state.fadeAnim }]}>
{this.props.children}
</Animated.View>
);
}
}
export default Overlay;