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>
                        <Button color={"red"} title='OK' onPress={() => setShowModal(false)}></Button>
                    </View>
                </View>
            </Modal>
    )
}


export default CustomModal