javascriptreact-nativereact-native-mapsreact-native-listview

React-Native AirBnb Maps not rendering


So within the constructor, I define a state

this.state = {
  markers: [{
            title: "Bike1",
            description: "Bike1",
            latitude: 38.232,
            longitude: -121.3312186
          },
          {
            title: "Bike2",
            description: "Bike2",
            latitude: 39.532,
            longitude: -123.5312186
          }]
}

Later on, I call the function to map all markers to actual MapView.Markers.

This looks as follows:

{this.state.markers.map( marker => {
          console.log(JSON.stringify(marker));
          <MapView.Marker
          coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
          title={marker.title}
          description={marker.description}
          >
          <View style={styles.bikeRadius}>
            <View style={styles.bikeMarker}></View>
          </View>
          </MapView.Marker>
        })}

However, this works when I call a single marker.

<MapView.Marker coordinate={{latitude: this.state.gpsPosition.latitude, longitude: this.state.gpsPosition.longitude}}>
        <View style={styles.radius}>
          <View style={styles.marker}></View>
        </View>
      </MapView.Marker>

I am new to react-native and am not sure what I am doing wrong. Any suggestions?

The link to the full file is https://codepen.io/yeni/pen/QgyWPZ


Solution

  • You're not returning anything from your map function to render. Quick fix would be to do something like this:

    {this.state.markers.map( (marker, index) => {
      console.log(JSON.stringify(marker));
      return (
        <MapView.Marker
          key={index}
          coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
          title={marker.title}
          description={marker.description}
        >
          <View style={styles.bikeRadius}>
            <View style={styles.bikeMarker}></View>
          </View>
        </MapView.Marker>
      )
    })}
    

    I've also included a simple way to add a key using index from the map function as you will get a warning about that when using map in this manner.