Maps: App crashes on using PointAnnotation in loop with below error

[Julious1994]

Describe the bug
When i am using Point annonation in loop or conditional way to render point then many times it crashes an app.

1. Crashes an app
2. Point annotation loads image on second time. Even refresh prop use also do nothing.

To Reproduce
This code is resides in home page. When do login and redirect to home page it shows map with multiple point annotation. For that i am using loop.

Sample code:

function Home(props) {

function getPoints(centers) {
    const items = [];
    for (let i = 0; i < centers.length; i++) {
      const center = centers[i];
      if(currentCentre && currentCentre.id === center.id) {
        continue;
      }
      items.push(
        <MapboxGL.PointAnnotation
          key={i}
          id={`${i}`}
          coordinate={getLocation(center.location)}
          title={center.name}
          onSelected={() => console.log('sss')}>
          <View>
            <Image
              source={imageMapper.station.source}
              style={{width: 40, height: 47}}
            />
          </View>
        </MapboxGL.PointAnnotation>,
      );
    }
    return items;
  }

   return (
    <MapboxGL.MapView
        style={styles.map}
        logoEnabled={false}
      >
        <MapboxGL.Camera
          zoomLevel={13}
          centerCoordinate={[72.75488663468855, 21.146613036727842]}
        />
        <MapboxGL.UserLocation />
        {getPoints(_centers)}

        <MapboxGL.PointAnnotation
          ref={r => (pointRef.current = r)}
          id={`test`}
          coordinate={getLocation(currentCentre.location)}>
          <View>
            <Image
              source={imageMapper.selectedStation.source}
              style={{width: 40, height: 47}}
              onLoad={() => {
                console.log(pointRef);
                // pointRef.current && pointRef.current.refresh();
              }}
            />
          </View>
        </MapboxGL.PointAnnotation>
      </MapboxGL.MapView>
)
}

Expected behavior

1. It should not crash an app.
2. It should load image component every tine without fail.

Versions:

• Platform: [Android]
• react-native-mapbox-gl Version [8.0.0-rc2]
• React Native Version [0.62.0]

Additional context
Inform me if you need more information. Ready to fix problem together. thanks

[mfazekas]

@Julious1994 thanks for the report. From the stack trace it looks the crash is happening at removal of PointAnnotation. But kind of doesn't make sense as we should have a mapView there.

Or maye the PointAnnotation gets removed before tha map was set up fully?! So we haven't really added it to the map yet?!

https://github.com/react-native-mapbox-gl/maps/blob/d6dd26340b539a5b7e0634e4658dd4a5f572c730/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLPointAnnotation.java#L120

[Julious1994]

@Julious1994 thanks for the report. From the stack trace it looks the crash is happening at removal of PointAnnotation. But kind of doesn't make sense as we should have a mapView there.

Or maye the PointAnnotation gets removed before tha map was set up fully?! So we haven't really added it to the map yet?!

https://github.com/react-native-mapbox-gl/maps/blob/d6dd26340b539a5b7e0634e4658dd4a5f572c730/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLPointAnnotation.java#L120

@mfazekas Thanks for reply.
Is there any work around solution?

[mfazekas]

@Julious1994 can you repro in a standalone example?!

I cannot run you example as it uses _centers etc. Can you just put dummy data, so i can repro the issue too?!

[Julious1994]

@Julious1994 can you repro in a standalone example?!

I cannot run you example as it uses _centers etc. Can you just put dummy data, so i can repro the issue too?!

// method uses in PointAnnotation coordinate

function getLocation(str) {
  const arr = str.split(',');
  const l = arr.map(a => {
    const no = Number(a);
    return isNaN(no) ? 0 : no;
  });
  if(l.length === 1) {
    l.push(0);
  }
  return l;
}

// dummy data format
const _centers = [
  {location: "72.75354666252647,21.140721592852415", name: "Indian Restaurant"},
  {location: "72.75345519869461,21.145041918692414", name: "Thai Restaurant"},
]

Note: I am using graphql and _centers data i am getting from useQuery hook. May be this information helpful for you.

@mfazekas
Sorry for late reply.
Ask me if anything else you need

Thanks

[JordanProtin]

If it's necessary, I can also do different tests to help ! I get the same issue in my project.

[JordanProtin]

up ! @mfazekas
@Julious1994 do you still have this bug ?

[mfazekas]

@JordanProtin yes please, if you can submit a single example component that i can run without putting the parts together that would be awesome.

Something like https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/BugReportExample.js

[JordanProtin]

@mfazekas for sure !

This is a single example component that represents this bug.
Please note I get this bug randomly, it doesn't happen all the time, and I don't know why.

In this example, you have to edit the MAPBOX_GL_ACCESS_TOKEN constant with your personal key. (line 7)

This script uses external libraries such as react-native-svg and @turf/helpers

Thank you for your help !

[Julious1994]

up ! @mfazekas
@Julious1994 do you still have this bug ?

Yes @JordanProtin still getting issue.

[JordanProtin]

Hi @mfazekas !

I'm sorry to ask you a quickly response.
Could you checks out my script and this bug ?

Best regards.

[mfazekas]

@JordanProtin I built the example, needed some minor modifications - remove svg, and added missing this..

But it's not crashing for me. What should i do to repro the crash?!

https://gist.github.com/mfazekas/ba94f984b7b6fa6c9971417333816fa2

[mfazekas]

@JordanProtin i could not repro the issue with example. I've made a potential fix - see #908. Can you try with current master to see if it fixes the issue?!

[JordanProtin]

@mfazekas Thank you for your quickly feedback !
I'm sorry about the missing this. ...

Yes, I suspected this result.. As I could say, I get this bug randomly, therefore it's very difficult for me to reproduce and identify the cause. But I just get the same error message that @Julious1994 has posted in my production logs by using Crashlytics.

But I can say that bug often occurs shortly after the first launch of the map. Everything is going well in the future.

I'll check out your potential fix link. I'll have to do different tests by using your current master in my project and I'll be back to you to establish my feedback.

Thank you for your help @mfazekas !

[JordanProtin]

Hi @mfazekas !

So, I make my feedback about your potential fix : I no longer reproduced this bug by using your version.
I can't guarantee that this issue is definitively solved with your potential fix, but I no longer encounter any issues.

Thank you for your work @mfazekas