# All files / atlas-mobile-ts/src/components/Map/MainMapComponent modal.tsx

0% Statements 0/6
100% Branches 0/0
0% Functions 0/2
0% Lines 0/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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

     import React, { useState, useEffect } from 'react';
    import { View, Text, StatusBar, StyleSheet, Dimensions, Button, ActivityIndicator, Alert, Modal } from 'react-native';

    function CustomModal() {

        const [showModal, setShowModal] = useState(true)

        return (
                <Modal transparent={true} visible={showModal}>
                    <View style={{ backgroundColor: "#000000aa", flex: 1 }}>
                        <View style={{ backgroundColor: "#ffffff", margin: 50, padding: 20, borderRadius: 10,  }}>
                        <Text style={{fontSize:20 , paddingBottom:10}}>Welcome to Cameron Library!</Text>
                            <Text style={{fontSize:16}}>To add a landmark, hold down on the screen.</Text>
                            <Text style={{fontSize:16 , paddingBottom:10}}>To remove a landmark, simply tap on it.</Text>
                            <Text style={{fontSize:16 , paddingBottom:10}}>Feel free to look through the various levels in the Cameron library.
                            When you're ready to access landmark information, simply press the "Load Coordinates" button near the bottom of the screen.</Text>
                            <Button color={"red"} title='OK' onPress={() => setShowModal(false)}></Button>
                        </View>
                    </View>
                </Modal>
        )
    }

    export default CustomModal