CODEWITHSUNDEEP
react-nativernmapbox-maps
Wyatt Smith
Wyatt Smith

Reputation: 11

How can I render multiple RNMapBox MapViews in a FlatList without causing a slowdown?

I want to render many RNMapBox MapViews using a FlatList, but it is causing a slowdown and eventually crashes with 30+ MapViews. The MapViews each have a LineLayer, but should be static like an image. I'm looking for a way to optimize this.

The Mapview component I'm using looks like this.

<MapView
  style={{ flex: 1 }}
  styleURL={Mapbox.StyleURL.Outdoors}
  scaleBarEnabled={false}
  scrollEnabled={false}
  rotateEnabled={false}
  pitchEnabled={false}
  zoomEnabled={false}
  compassEnabled={false}
>
  <Camera
    animationMode="none"
    animationDuration={0}
    bounds={bounds}
    padding={{
      paddingBottom: 15,
      paddingTop: 15,
      paddingLeft: 15,
      paddingRight: 15,
    }}
  />
  <ShapeSource
    id={"line"}
    shape={{
      type: "LineString",
      coordinates: coordinates,
    }}
  >
    <LineLayer id="line" style={styles().lineLayer} />
  </ShapeSource>
</MapView>

If I remove this, I don't have any issues with performance.

EDIT: I've found that I'm using too much RAM with all of these MapViews. I've tried optimizing the FlatList rendering but I'm still having problems keeping RAM usage down.

Upvotes: 1

Views: 73

Answers (0)

Related Questions