CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsreact-nativereact-native-maps
HungrySoul
HungrySoul

Reputation: 1231

callout View in react-native-maps does not disappear when the marker is remove on reload

i am using react-native-maps for my react-native project. I show markers on the map which are assigned and un-assigned from UI. I use API's for getting markers data and display them in the maps. Each marker has a title and description which is shown when clicked on the marker.

                   <MapView.Marker
                        coordinate={{ latitude:lat, longitude:lon }}
                        title={title}
                        description={desc}
                        image={image}
                        onCalloutPress={this.onPress()}>
                    </MapView.Marker>

But, when i click on a marker and then remove that marker from UI. I'll get a notification and reloads with new data. but the callOut does not gets removed instead it goes to the nearest marker.

How can i dismiss or remove the callOut when i reload my marker data??

Note: I can not reload the whole maps, so i use fetch to get latest data and update them.

Upvotes: 3

Views: 9247

Answers (1)

Yossi
Yossi

Reputation: 6027

The following works for me. How about trying to call this.marker.hideCallout() when you need to hide it?

<MapView.Marker
        coordinate={coord}
        ref={_marker => {
          this.marker = _marker;
        }}
        onPress={() => {}}
        onCalloutPress={() => {
          this.marker.hideCallout();
        }}>
        <Image
          source={require(img)}
          style={{ width: 60, height: 60 }}
        />
        <View>
          <Text>
            marker text
          </Text>
        </View>
        <MapView.Callout
          tooltip={true}>
              <View>
                <Text>
                  callout text
                </Text>
              </View>
        </MapView.Callout>
      </MapView.Marker>

Upvotes: 2

Related Questions