Custom Info Window for MapView

Question

I am building an app for iOS devices with React-native and I use the MapView from expo to draw a map. I do not know how to add my own custom window which ideally will have two rows of text data. Does anybody know how to customise an info window in React-native?

Thank you.

Answer 1

After some more research I found that I can use MapView.Callout to define my own custom info window. The code is the following:

getMarkers = () => {
    let markers = this.state.data.map((marker, index) => {
        let magnitude = marker.magnitude;
  let icon = undefined;
  if(magnitude < 4.0)
  {
    icon = require('./assets/image_earthquakes_one.png')
  }
        else if(magnitude >= 4.0 & magnitude <= 5.0)
        {
            icon = require('./assets/image_earthquakes_two.png')
        }
        else if(magnitude > 5.0)
        {
            icon = require('./assets/image_earthquakes_three.png')
        }

        return ( <MapView.Marker coordinate = {
                {
                    latitude: Number(marker.latitude),
                    longitude: Number(marker.longitude)
                }
            }
            image = {
                icon
            }
            key = {
                index
            }
            >
            <MapView.Callout>
                <View>
                    <Text>Lat:{marker.latitude}, Lon:{marker.longitude}</Text>
                    <Text>Magnitude:{marker.magnitude}, Depth:{marker.depthkm}</Text>
                </View>
            </MapView.Callout>
            </MapView.Marker>
        );
    });
    return markers;
}