How to create an onPress event that dismisses a callout? - react-native

Question

I'm building a gig guide in React Native, using react native maps.
Users are presented with a Map with markers indicating the location of gig. When these markers are tapped, a callout pops up with gig information:
When the user taps the "Next day's gigs" button, the map is rendered with markers showing the upcoming day's gigs. When the user hits this button, I want to make sure that any open callouts on the current day are dismissed when the button is hit. Any suggestions on how to do this?
Here's the code from the component rendering the map:
GigMap.js
import { useState, useMemo } from "react";
import {
StyleSheet,
Text,
View,
Pressable,
Image,
TouchableOpacity,
} from "react-native";
import MapView from "react-native-maps";
import { Marker, Callout } from "react-native-maps";
import CalloutView from "./CalloutView";
import { mapStyle } from "../util/mapStyle";
import { useGigs } from "../hooks/useGigs";
import { AntDesign } from "#expo/vector-icons";
const GigMap = ({ navigation }) => {
const [selectedDateMs, setSelectedDateMs] = useState(Date.now());
const gigs = useGigs();
//generates current date in format DD/MM/YYYY
const selectedDateString = useMemo(() => {
const date = new Date(selectedDateMs);
const dateToString = date.toString().slice(0,15)
return dateToString // returns in form 'Tue Dec 20 2022'
}, [selectedDateMs]);
//Filtering through gigs to return only current day's gigs
const gigsToday = gigs.filter((gig) => {
const gigDate1 = new Date(gig.dateAndTime.seconds*1000)
const gigDate2 = gigDate1.toString().slice(0,15) //return form 'Tue Dec 20 2022'
return gigDate2 === selectedDateString
})
//increments date by amount
const addDays = (amount) => {
setSelectedDateMs((curr) => curr + 1000 * 60 * 60 * 24 * amount);
};
return (
<View style={styles.container}>
<Text style={styles.headerText}>{`Gigs on ${selectedDateString}`}</Text>
<View style={styles.imageText}>
<Text style = {styles.subHeader}>Tap on</Text>
<Image
style={styles.image}
source={require("../assets/Icon_Gold_48x48.png")}
/>
<Text style = {styles.subHeader}> to see gig info</Text>
</View>
<MapView
initialRegion={{
latitude: -41.29416,
longitude: 174.77782,
latitudeDelta: 0.03,
longitudeDelta: 0.03,
}}
style={styles.map}
customMapStyle={mapStyle}
>
{gigsToday.map((gig, i) => (
<Marker
key={i}
coordinate={{
latitude: gig.location.latitude,
longitude: gig.location.longitude,
}}
image={require("../assets/Icon_Gold_48x48.png")}
description = 'test'
>
<Callout
style={styles.callout}
tooltip={true}
onPress={() =>
navigation.navigate("GigDetails", {
venue: gig.venue,
date: selectedDateString,
gigName: gig.gigName,
image: gig.image
})
}
>
<CalloutView
venue={gig.venue}
gigName={gig.gigName}
genre = {gig.genre}
/>
</Callout>
</Marker>
))}
</MapView>
<View style={styles.buttonOptions}>
<TouchableOpacity onPress={() => addDays(-1)} style = {styles.touchable}>
<AntDesign name="caretleft" size={36} color="#778899" />
<Text style = {{fontFamily:'Helvetica-Neue', color:'#778899'}}>Previous day's gigs</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => addDays(1)} style = {styles.touchable}>
<AntDesign name="caretright" size={36} color="#778899" />
<Text style = {{fontFamily:'Helvetica-Neue',color:'#778899'}}>Next day's gigs</Text>
</TouchableOpacity>
</View>
</View>
);
};
CalloutView.js
import { StyleSheet, Text, View } from 'react-native';
const CalloutView = ({ venue,gigName,genre }) => {
const title = gigName.substring(0,25)
return (
<View style = {styles.container}>
<Text style = {styles.header} >{`${title}`}</Text>
<Text style = {styles.details}>{`${venue} | ${genre}`}</Text>
<Text style = {styles.button}>Tap to see details</Text>
</View>
);
}

Answer 1

Try this
import React from "react";
import { IMAGES } from "theme";
import { View, Text, StyleSheet } from "react-native";
import MapView, { PROVIDER_GOOGLE, Marker, Callout } from "react-native-maps";
const GigMap = () => {
return (
<MapView
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={styles.map}
region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
<Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
image={IMAGES.MAP_MARKER}
title="Test Title"
description="This is the test description"
>
<Callout tooltip>
<View>
<View style={styles.bubble}>
<Text numberOfLines={1} style={styles.name}>Gig Title</Text>
<Text>A Gig description</Text>
</View>
<View style={styles.arrowBorder} />
<View style={styles.arrow} />
</View>
</Callout>
</Marker>
</MapView>
);
};
export default GigMap;
const styles = StyleSheet.create({
map: {
height: "100%",
},
// Callout bubble
bubble: {
flexDirection: "column",
alignSelf: "flex-start",
backgroundColor: "#fff",
borderRadius: 6,
borderColor: "#ccc",
borderWidth: 0.5,
padding: 15,
width: 150,
},
// Arrow below the bubble
arrow: {
backgroundColor: "transparent",
borderColor: "transparent",
borderTopColor: "#fff",
borderWidth: 16,
alignSelf: "center",
marginTop: -32,
},
arrowBorder: {
backgroundColor: "transparent",
borderColor: "transparent",
borderTopColor: "#007a87",
borderWidth: 16,
alignSelf: "center",
marginTop: -0.5,
},
// Gig Title
name: {
fontSize: 16,
marginBottom: 5,
},
// Gig button
button: {
width: "40%",
height: 80,
},
});
Here is some of the Suggestions for you
use numberOfLines for title
use Dayjs instead of manually doing date.toString().slice(0,15) also it will be solve your all dates and time related problems