React-native: How to Show the tooltip with out clicking on marker in react-native-maps

Question

I am using react-native-maps module.I have given lat and long values and i have used MapView.Marker to show the Marker and tooltip when clicking on the marker.

But, Now I want to show the tooltip with out clicking on the marker when the map loads initially.

this is my code here:

<View style={styles.page}>
        <MapView
          ref="map"
          style={styles.map}
          region={this.state.region}
          provider = {PROVIDER_DEFAULT}
          zoomEnabled={true}
          onRegionChange={this.onRegionChange.bind(this)}
          pitchEnabled={true}
          showsCompass={true}
          liteMode={false}
          showsBuildings={true}
          showsTraffic={true}
          showsIndoors={true}
        >
        <MapView.Marker
      coordinate={this.state.marker.latlng}
      title={this.state.marker.title}
      description={this.state.marker.description}
      image={require('./assets/pin.png')}

    />

        </MapView>
      </View>

Can any one help how to solve this...

Undoing

Answer 1

I couldn't find any documentation on any sort of onLoad prop for MapView so I used onLayout instead as suggested here. You will need to use the showCallout method for the Marker to show the tooltip. To do this, add a ref for the marker that you can then use in onLayout for the MapView.

<View style={styles.page}>
    <MapView
        ref="map"
        style={styles.map}
        region={this.state.region}
        provider = {PROVIDER_DEFAULT}
        zoomEnabled={true}
        onRegionChange={this.onRegionChange.bind(this)}
        pitchEnabled={true}
        showsCompass={true}
        liteMode={false}
        showsBuildings={true}
        showsTraffic={true}
        showsIndoors={true}
        onLayout={() => { this.mark.showCallout(); }}
    >
        <MapView.Marker
            ref={ref => { this.mark = ref; }}
            coordinate={this.state.marker.latlng}
            title={this.state.marker.title}
            description={this.state.marker.description}
            image={require('./assets/pin.png')}
        />
    </MapView>
</View>

Equipage

Hello , Thanks for your response , i am using as you are modified code but i have a small error. how can i write onLayout() function can you give me suggest – Undoing

@Undoing What's the error you are getting? The example code should work as is since I tested it before posting. – Equipage

The Error was can't find layout() function – Undoing

@Undoing Do you mean onLayout? The method should be onLayout (case sensitive), not layout. – Equipage

Yah But i didn'tt get – Undoing

@Undoing Can you show me what your MapView and MapView.Marker code looks like? Or show me the exact error you are getting? You can post it online at a place like pastebin. It's the only way I'll be able to understand what you are doing wrong. – Equipage

@MichaelCheng onLayout seems to be called too early. It doesn't show the callout, at least not on iOS. As a workaround I use onRegionChangeComplete but it is a bit buggy (again, on iOS). – Wisteria

Answer 2

Well what worked for me was using ref on that particular marker

const originMarker = useRef(null);

and then on component mount: originMarker?.current?.showCallout();

Shericesheridan