/
ErrorModal.js
74 lines (64 loc) · 2.1 KB
/
ErrorModal.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
import React, { useState, useContext } from 'react';
import { View, Text, StyleSheet, Dimensions, TouchableOpacity } from 'react-native';
import { AppContext } from './AppContext';
const ErrorModal = props => {
const [windowHeight] = useState(Dimensions.get('screen').height);
const [windowWidth] = useState(Dimensions.get('screen').width);
const appContext = useContext(AppContext);
const styles = StyleSheet.create({
modalContainer: {
backgroundColor: 'rgba(0, 0, 0, 0.63)',
position: 'absolute',
top: 0,
zIndex: 9999,
height: windowHeight,
width: windowWidth,
justifyContent: 'center',
alignItems: 'center'
},
modalBox: {
backgroundColor: '#333399',
height: 100,
width: windowWidth - 50,
justifyContent : 'center',
alignItems : 'center'
},
buttonContainer: {
backgroundColor: '#FFE600',
width : windowWidth / 3.2,
height : 30,
justifyContent : 'center',
alignItems : 'center',
position : 'absolute',
bottom : 10,
},
buttonText : {
fontFamily : "A-Space Bold Demo",
color : '#333399'
},
textModal: {
fontSize : 10,
margin : 10,
fontFamily : "A-Space Regular Demo",
marginBottom : 35,
color: 'white'
}
});
/**
* Just close the error modal.
*/
const closeModal = () =>{
appContext.setHasError('');
}
return (
<TouchableOpacity style={styles.modalContainer} onPress={closeModal}>
<View style={styles.modalBox}>
<Text style={styles.textModal}>{props.message}</Text>
<TouchableOpacity style={styles.buttonContainer} onPress={closeModal}>
<Text style={styles.buttonText}>Ok</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
);
}
export default ErrorModal;