react-native-maps: Callout does not update after props change on Android

I’m having an issue on Android where the content of the tooltip does not update after its props have changed.

I am fetching data from an API as a result of the onPress event for a custom marker. After the data is returned, I am updating the state of the component, and the relevant attributes are passed down as props to the content component for the custom callout. On iOS the custom content re-renders after the state is updated. However, on android, the content does not re-render.

            <MapView.Marker
              onPress={() => this.fetchData(item.id)}
              key={key}
              coordinate={{latitude, longitude}}
            >
              <MapView.Callout
                    style={{width: 200}}>
                    <CustomTooltipContent text={this.state.text} isLoading={this.state.isLoading} />
            </MapView.Callout>
            </MapView.Marker>

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 20 (3 by maintainers)

Most upvoted comments

I got same issue in iOS with Google Map. After looking at API of Marker, I found the reason: Callouts only renders 1 time at first because of this prop tracksInfoWindowChanges (default is false)

So there we have 2 solutions for it:

Set tracksInfoWindowChanges is true (decrease the performance)
We need “redrawCallout” after the data is changed.

More information: https://github.com/react-native-community/react-native-maps/blob/master/docs/marker.md

Hope can help someone.

nguyenanhthai on Jul 26, 2019

Here is a simple working example. The increment button increments the count variable. However, on android you need to dismiss the tooltip and reopen it to see the changed. On iOS you see the counter increment like a normal react component.


/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

import MapView from 'react-native-maps';


class mapTest extends Component {
  constructor () {
    super()
    this.state= {
      coordinate: {
        latitude:37.78825,
        longitude: -122.4324
      },
      count: 0
    }
    this.increment = this.increment.bind(this)
  }
  increment () {
    this.setState({count: this.state.count + 1})
  }
  render() {
    const {coordinate} = this.state
    return (
      <View style={{flex: 1}}>
        <View style={styles.container}>
          <MapView
          style={styles.map}
            initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
          >
            <MapView.Marker coordinate={coordinate}>
              <MapView.Callout style={{width:250}}>
                <View><Text>{this.state.count}</Text></View>
              </MapView.Callout>
            </MapView.Marker>
          </MapView>
      </View>
        <View style={{flex: 1, justifyContent:'center', alignItems:'center'}}>
          <TouchableHighlight onPress={this.increment} underlayColor={'#e69500'} style={styles.button}>
            <Text style={{color: '#FFFFFF', fontWeight:'bold'}}>Increment</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 3 
  },
 map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  button: {
    height: 40,
    width: 100,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor: 'orange',
    borderRadius: 5,
    bottom:0
  }
});

AppRegistry.registerComponent('mapTest', () => mapTest);

maptooltipissue

wkrause13 on Aug 24, 2016

I have the same problem. I’m showing a callout with the distance between the user and the marker but the callout is not updating when the user’s position changes. The callout always shows the same value unless it is closed and reopened.

oliverdolgener on Jan 26, 2019

I have same problem, and I do these to solve:

Save Marker’s ref.
Save isCalloutShow in state.
Update isCalloutShow state when Marker.onPress(callout will show) and Maps.onPress(callout will hide).
When data update, if (isCalloutShow) call MarkerRef.showCallout() again.
Callout will update.

CacaoRick on Mar 6, 2017

same issue here. Marker Callout does not update unless you close and open it again. Any solutions ?

bartello1982 on May 21, 2019