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
93 lines (82 loc) · 1.98 KB
/
Modal.js
File metadata and controls
93 lines (82 loc) · 1.98 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
import React, {Component} from 'react'
import {Dimensions, View, StyleSheet, Animated, Easing, Platform, TouchableWithoutFeedback} from 'react-native'
import PropTypes from 'prop-types'
if (Platform.OS !== 'web') {
var BlurView = require('react-native-blur').BlurView
}
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