Passed
Push — dev ( 960b6d...f9a638 )
by Kasper
01:04 queued 12s
created

ZoneModal.tsx ➔ ZoneModal   A

Complexity

Conditions 1

Size

Total Lines 43
Code Lines 36

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 36
dl 0
loc 43
rs 9.016
c 0
b 0
f 0
cc 1
1
import { stopLocationUpdatesAsync } from "expo-location";
2
import React from "react";
3
import { useState, useEffect } from 'react';
4
import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar, Modal } from "react-native";
5
import mapModel from "../../models/map";
6
import GestureRecognizer from 'react-native-swipe-gestures';
7
8
export default function ZoneModal({navigation, zone, zoneModalVisible, setZoneModalVisible}) {
9
    
10
    return (
11
        <GestureRecognizer
12
            style={{flex: 1}}
13
            onSwipeDown={ () => setZoneModalVisible(false) }
14
        >
15
        <Modal
16
        animationType="slide"
17
        transparent={true}
18
        visible={zoneModalVisible}
19
        onRequestClose={() => {
20
            setZoneModalVisible(!zoneModalVisible)
21
        }}
22
23
        >
24
            <View style={styles.modalContainer}></View>
25
26
27
            <View style={styles.modalMessage}>
28
            <View style={styles.swipeButton}></View>
29
30
                <View style={styles.titleContainer}>
31
                    <View style={styles.textContainer}>
32
                        {/* <Text> Zone: {zone['_id']} </Text> */}
33
                    </View>
34
35
                </View>
36
37
                <Text style={{color: 'grey'}}> Park here and reduce null from your trip. </Text>
38
 
39
                <Pressable 
40
                style={styles.tourButton} 
41
                onPress={() => setZoneModalVisible(false)}
42
                >
43
                    <Text style={{color: 'white', fontWeight: 'bold'}}>OK</Text>
44
                </Pressable>
45
46
                
47
            </View>
48
        </Modal>
49
    </GestureRecognizer>
50
    )
51
}
52
53
const styles = StyleSheet.create({
54
    modalContainer: {
55
        width: '100%',
56
        height: '100%',
57
        flex: 1,
58
    },
59
60
    titleContainer: {
61
        flexDirection: 'row',
62
        alignItems: 'center',
63
        marginBottom: 10,
64
        marginTop: 30
65
    },
66
67
    swipeButton: {
68
        width: '25%',
69
        height: 5,
70
        backgroundColor: 'lightgrey',
71
        borderRadius: 25
72
    },
73
74
    textContainer: {
75
        width: '45%',
76
        marginBottom: 10,
77
    },
78
79
    modalMessage: {
80
        backgroundColor: 'white',
81
        width: '100%',
82
        height: '25%',
83
        justifyContent: 'flex-start',
84
        alignItems: 'center',
85
        paddingTop: 10,
86
        // flexDirection: 'row'
87
        // borderRadius: 25,
88
        borderTopLeftRadius: 25,
89
        borderTopRightRadius: 25
90
    },
91
92
    scooterTitle: {
93
        fontWeight: 'bold',
94
        marginBottom: 10,
95
        fontSize: 16
96
    },
97
    
98
    battery: {
99
        marginLeft: 5,
100
    },
101
102
    scooterImage: {
103
        margin: 10
104
    },
105
106
    tourButton: {
107
        backgroundColor: 'cornflowerblue',
108
        width: '80%',
109
        height: 50,
110
        borderRadius: 25,
111
        justifyContent: 'center',
112
        alignItems: 'center',
113
        marginTop: 10
114
    },
115
})