I am trying to always display a <Callout />
or a <Marker />
without the need of clicking on the marker.
This is my code for my marker callout:
<Marker key={markerList.id} coordinate={destination}>
<Callout style={{height: 70, width: 200}} tooltip>
<View
style={{
flex: 1,
backgroundColor: '#FAAA18',
borderRadius: 40,
flexDirection: 'row',
}}
>
<Text>
<Image resizeMode="contain" source={image} style={styles.icon} />
</Text>
<View
style={{
flexDirection: 'column',
paddingTop: 15,
}}
>
<Text style={{color: '#fff', fontWeight: '700'}}>Drop Off</Text>
<Text style={{color: '#fff'}}>3km Away</Text>
</View>
</View>
</Callout>
</Marker>
This is my desired output:
You can pass a ref to Marker. Then use showCallout() function.
const markerRef = useRef();
useEffect(() => {
if(markerRef.current){
markerRef.current..showCallout();
}
}, [markerRef.current]);
<Marker ref={markerRef} key={markerList.id} coordinate={destination}>
<Callout style={{height: 70, width: 200}} tooltip>
<View
style={{
flex: 1,
backgroundColor: '#FAAA18',
borderRadius: 40,
flexDirection: 'row',
}}
>
<Text>
<Image resizeMode="contain" source={image} style={styles.icon} />
</Text>
<View
style={{
flexDirection: 'column',
paddingTop: 15,
}}
>
<Text style={{color: '#fff', fontWeight: '700'}}>Drop Off</Text>
<Text style={{color: '#fff'}}>3km Away</Text>
</View>
</View>
</Callout>
</Marker>