forked from osdio/noder-react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathModal.js
More file actions
110 lines (89 loc) · 1.78 KB
/
Modal.js
File metadata and controls
110 lines (89 loc) · 1.78 KB
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, {
Component,
PropTypes,
Dimensions,
View,
StyleSheet,
Animated,
Easing,
Platform,
TouchableWithoutFeedback,
findNodeHandle
} from 'react-native';
import {BlurView} from 'react-native-blur';
const {height, width} = Dimensions.get('window');
class Modal extends Component {
static propTypes = {
blur: PropTypes.bool,
blurType: PropTypes.string,
onPressBackdrop: PropTypes.func
};
static defaultProps = {
blur: false,
blurType: 'dark'
};
constructor(props) {
super(props);
this.state = {
fadeAnim: new Animated.Value(0.2)
};
}
componentDidMount() {
Animated.timing(this.state.fadeAnim, {
toValue: 1,
easing: Easing.quad,
duration: 100
}).start();
}
_onPress(e) {
const {pageY} = e.nativeEvent;
const {onPressBackdrop} = this.props;
if (height - pageY > 200) {
typeof onPressBackdrop == 'function' && onPressBackdrop();
}
}
_renderChildren() {
if (this.props.blur) {
if (Platform.OS === 'ios') {
return (
<BlurView blurType="dark" style={[ styles.blur, this.props.blurStyle]}>
{ this.props.children }
</BlurView>
)
}
return (
<View style={[ styles.blur, this.props.blurStyle, styles.opacity]}>
{ this.props.children }
</View>
);
}
return this.props.children;
}
render() {
return (
<TouchableWithoutFeedback onPress={this._onPress.bind(this)}>
<Animated.View style={[styles.container, this.props.style, {opacity: this.state.fadeAnim}]}>
{ this._renderChildren() }
</Animated.View>
</TouchableWithoutFeedback>
)
}
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
flex: 1,
top: 0,
left: 0,
height,
width
},
blur: {
height,
width
},
opacity: {
backgroundColor: 'rgba(0,0,0,0.4)'
}
});
export default Modal;