-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.js
122 lines (111 loc) · 3.01 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/**
* react-native-spinner
* eye catching Spinner for both Android and iOS
* GitHub:https://github.com/trinadhkoya/react-native-spinner
* Email:trinadhkoya9@gmail.com
* Profile:https://in.linkedin.com/in/trinadhkoya
*/
import {Component} from 'react';
import {PropTypes} from 'prop-types';
import {Image, Modal, StatusBar, StyleSheet, View} from 'react-native';
export default class ProgressBar extends Component {
componentDidMount() {
StatusBar.setHidden(false)
}
componentWillUnmount() {
StatusBar.setHidden(true)
}
render() {
const {animationType, modalVisible, type} = this.props;
return (
<Modal
animationType={animationType}
transparent
visible={modalVisible}>
<View style={styles.wrapper}>
<View style={styles.loaderContainer}>
{this.renderGif(type)
}
</View>
</View>
</Modal>
);
}
renderGif(type) {
/**
* based on type ,just render your image
*/
if (type === 'r') {
return (
<Image
style={styles.loaderImage}
// source={require('./img/redSpinner.gif')}
/>
)
} else if (type === 'g') {
return (
<Image
style={styles.loaderImage}
// source={require('./img/redSpinner.gif')}
/>
)
} else if (type === 'p') {
return (
<Image
style={styles.loaderImage}
// source={require('./img/redSpinner.gif')}
/>
)
} else if (type === 'l') {
return (
<Image
style={styles.loaderImage}
// source={require('./img/redSpinner.gif')}
/>
)
} else {
return (
<Image
style={styles.loaderImage}
// source={require('./img/redSpinner.gif')}
/>
)
}
}
}
ProgressBar.propTypes = {
animationType: PropTypes.string.isRequired,
modalVisible: PropTypes.bool.isRequired,
};
const styles = StyleSheet.create({
wrapper: {
zIndex: 9,
backgroundColor: 'rgba(0,0,0,0.6)',
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
left: 0,
},
loaderContainer: {
width: 90,
height: 90,
backgroundColor: '#fff',
borderRadius: 15,
position: 'absolute',
left: '50%',
top: '50%',
marginLeft: -45,
marginTop: -45,
},
loaderImage: {
width: 70,
height: 70,
borderRadius: 15,
position: 'relative',
left: '50%',
marginLeft: -35,
top: '50%',
marginTop: -35,
},
});