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

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>