How do I always display my callout in React native maps

Question

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:

Answer 1

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>