I am working on a react-native application with react-native-maps and I would like to have the active marker (i.e. the one I click on and has the callout bubble open) to have a different color than the other markers.
I was able to change the color of the current marker by saving the ref to a state and comparing it when rendering the color (our keys coming back from the server are not trustworthy, so I'm using the ref for now, until the backend developers come up with an ID in the response), but I am stumbling into the following issue:
When I click somewhere else on the map to dismiss the callout, I was not able to set the marker color back to the previous one (I want them all to be at full opacity initially, then set the "inactive" ones to 50% opacity, until the callout is dismissed).
I have gone all over the docs and examples in react-native-maps but could not find any ways of hooking the state change event to the dismiss event.
Here is the current code I have for the Marker:
<Marker
key={index}
coordinate={loc.coordinate}
ref={ref => loc.ref = ref}
opacity={activeMarkerRef === null || activeMarkerRef === loc.ref ? 1 : 0.5}
onPress={() => setActiveMarkerRef(loc.ref);}
>
<Callout
tooltip
style={styles.bubbleView}
>
<MapInfoBubble>
<Text style={styles.bubbleTitle}>{loc.name}</Text>
<Text>
<Text style={styles.descrTitle}>Address: </Text>
<Text>{loc.address}</Text>
</Text>
<Text>
<Text style={styles.descrTitle}>Postal Code: </Text>
<Text>{loc.postal_code}</Text>
</Text>
</MapInfoBubble>
</Callout>
</Marker>
))}
</MapView>
