React-Native: How do I render a list of markers from firebase on Airbnb maps?

Question

I am a beginner to react-native and am currently trying to get markers from a firebase database and render them onto my map. I had previously defined the markers as markers: [] and filled the markers object with dummy objects (the exact same object I retrieve from the firebase database).

I define the initial markers object within the state variable.

 markers: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      })

And finally render this using ListView from react-native

<ListView
    dataSource={this.state.markers}
    renderRow={this._renderItem.bind(this)}
>
</ListView>

With _renderItem being defined as follows:

_renderItem(marker) {
    console.log(marker);
    return (
      <MapView.Marker
      coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
      title={marker.description}
      description={marker.description}>
      <View style={styles.bikeRadius}>
             <View style={styles.bikeMarker}></View>
      </View>
      </MapView.Marker>
    );
  }

I can render specific properties of the object, if I set the return value of _renderItem to <Text> {marker.description} </Text>.

You will find the full code on CodePen: https://codepen.io/yeni/pen/BZjJYq

The markers don't render at all. Furthermore, after implementing the <ListView> component I cannot move or zoom on the map any further. Any ideas how to incorporate markers from Firebase on AirBnb MapView.Markers?

Answer 1

You don't need a ListView, you can simply map over your markers inside the MapView:

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