react-nativereact-native-maps

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


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


Solution

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