import React from 'react'; import { Modal, StyleSheet, Text, TouchableHighlight, View, } from 'react-native'; const ModalMensagemMapa = ({ modalVisible, fecharModal }) => { return ( <View style={styles.centeredView}> <Modal animationType="slide" transparent visible={modalVisible} onRequestClose={() => { fecharModal(); }} > <View style={styles.centeredView}> <View style={styles.modalView}> <Text style={styles.modalText}> Para encontrar mais pontos de aglomeração, navegue pelo mapa ou pesquise o nome de um local no campo acima. </Text> <TouchableHighlight style={{ ...styles.openButton, backgroundColor: '#94D451' }} onPress={() => { fecharModal(); }} > <Text style={styles.textStyle}>OK</Text> </TouchableHighlight> </View> </View> </Modal> </View> ); }; const styles = StyleSheet.create({ centeredView: { flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 22, }, modalView: { margin: 20, backgroundColor: '#fff', borderRadius: 20, padding: 15, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 10, }, openButton: { backgroundColor: '#94D451', borderRadius: 20, padding: 15, elevation: 5, margin: 10, width: 100, }, textStyle: { color: 'white', fontWeight: 'bold', textAlign: 'center', fontSize: 15, }, modalText: { marginBottom: 5, textAlign: 'center', color: '#41414d', }, }); export default ModalMensagemMapa;