1
|
|
|
import React from 'react'; |
2
|
|
|
import { useState, useEffect } from 'react'; |
3
|
|
|
import { StyleSheet, Text, View, Pressable, Modal, TextInput} from 'react-native'; |
4
|
|
|
import userModel from '../../models/user'; |
5
|
|
|
import { showMessage, hideMessage } from "react-native-flash-message"; |
6
|
|
|
|
7
|
|
|
export default function HowModal({navigation, modalVisible, setModalVisible}) { |
8
|
|
|
|
9
|
|
|
return ( |
10
|
|
|
<Modal |
11
|
|
|
animationType='fade' |
12
|
|
|
transparent={true} |
13
|
|
|
visible={modalVisible} |
14
|
|
|
onRequestClose={() => { |
15
|
|
|
setModalVisible(!modalVisible); |
16
|
|
|
}} |
17
|
|
|
> |
18
|
|
|
<View style={styles.modalContainer}> |
19
|
|
|
|
20
|
|
|
<View style={[styles.messageContainer, styles.shadowProp]}> |
21
|
|
|
<Text style={styles.title}>How to drive</Text> |
22
|
|
|
|
23
|
|
|
<View style={styles.textContainer}> |
24
|
|
|
<Text style={styles.text}>1. Add balance to your wallet</Text> |
25
|
|
|
<Text style={styles.text}>2. Select a scooter on the map</Text> |
26
|
|
|
<Text style={styles.text}>3. Press 'Start Tour' to start driving</Text> |
27
|
|
|
<Text style={styles.text}>4. Press 'Stop Tour' to stop driving</Text> |
28
|
|
|
<Text style={styles.text}>P.S. Parking in certain zones can give you a discount!</Text> |
29
|
|
|
</View> |
30
|
|
|
|
31
|
|
|
|
32
|
|
|
|
33
|
|
|
|
34
|
|
|
<Pressable style={[styles.prepaidButton, {backgroundColor: 'white'}]} onPress={() => { |
35
|
|
|
setModalVisible(!modalVisible); |
36
|
|
|
}}> |
37
|
|
|
<Text style={{color: 'black'}}>OK</Text> |
38
|
|
|
</Pressable> |
39
|
|
|
|
40
|
|
|
|
41
|
|
|
</View> |
42
|
|
|
</View> |
43
|
|
|
</Modal> |
44
|
|
|
) |
45
|
|
|
} |
46
|
|
|
|
47
|
|
|
const styles = StyleSheet.create({ |
48
|
|
|
modalContainer: { |
49
|
|
|
height: '100%', |
50
|
|
|
width: '100%', |
51
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)', |
52
|
|
|
position:'absolute', |
53
|
|
|
// justifyContent: 'center', |
54
|
|
|
alignItems: 'center' |
55
|
|
|
}, |
56
|
|
|
|
57
|
|
|
messageContainer: { |
58
|
|
|
backgroundColor: 'cornflowerblue', |
59
|
|
|
width: '90%', |
60
|
|
|
height: 350, |
61
|
|
|
marginTop: 100, |
62
|
|
|
justifyContent: 'center', |
63
|
|
|
alignItems: 'center' |
64
|
|
|
}, |
65
|
|
|
|
66
|
|
|
shadowProp: { |
67
|
|
|
elevation: 5, |
68
|
|
|
shadowColor: 'black' |
69
|
|
|
}, |
70
|
|
|
|
71
|
|
|
title: { |
72
|
|
|
fontSize: 18, |
73
|
|
|
fontWeight: '600', |
74
|
|
|
color: 'white', |
75
|
|
|
textAlign: 'left', |
76
|
|
|
width: '80%' |
77
|
|
|
}, |
78
|
|
|
|
79
|
|
|
prepaidButton: { |
80
|
|
|
backgroundColor: 'black', |
81
|
|
|
width: '90%', |
82
|
|
|
height: 50, |
83
|
|
|
borderRadius: 50, |
84
|
|
|
display: 'flex', |
85
|
|
|
justifyContent: 'center', |
86
|
|
|
alignItems: 'center', |
87
|
|
|
marginTop: 30, |
88
|
|
|
}, |
89
|
|
|
|
90
|
|
|
text: { |
91
|
|
|
textAlign: 'left', |
92
|
|
|
width: '100%', |
93
|
|
|
fontSize: 16 |
94
|
|
|
}, |
95
|
|
|
|
96
|
|
|
textContainer: { |
97
|
|
|
width: '80%', |
98
|
|
|
// backgroundColor: 'red', |
99
|
|
|
height: 150, |
100
|
|
|
justifyContent: 'space-evenly', |
101
|
|
|
marginTop: 10 |
102
|
|
|
} |
103
|
|
|
}) |