reactjsreact-nativedictionaryreact-native-maps

How do I always display my callout in React native maps


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:

This is my desired output


Solution

  • 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>