React-native-mapbox-gl: Annotation moving first then shape-source with line-layer follows, why ?

[Amalp]

I am drawing a poly-line with point annotations(arrows in my output)

When i move the map the annotations moves first then the line drawn by shapesource follows

I have created a sample picture of this (it was drawn to show my situation when moving the map)

the below is the actual output -

Why does this occur in my i want the annotations have to move along with the line and i am unable to use shape-source with symbol layer due to this issue already raised by my friend link below

https://github.com/mapbox/react-native-mapbox-gl/issues/1173

point annotation code below -

renderArrowAnnotations(lat, lon, index, angle) {
        return (
            <Mapbox.PointAnnotation
                key={index.toString()}
                id={index.toString()}
                coordinate={[lon, lat]}
                style={[styles.annotationStyle,
                { transform: [{ rotate: angle.toString() + 'deg' }] }]}
            >
                <Image source={Images.right_arrow} style={styles.arrowImageStyle} />
            </Mapbox.PointAnnotation>
        );
    }

And i have drawn line using line-layer and shape-source

line-layer code below -

<MapboxGL.ShapeSource id='line1' shape={line}>
       <MapboxGL.LineLayer style={layerStyles.route} id='linelayer1' />
</MapboxGL.ShapeSource>

Is there anyway to handle this issue ?

[sandroferrari]

Same issue, PointAnnotation don't move at the same time with the map.

[makirby]

There is some good discussion here on PointAnnotation behaviour https://github.com/mapbox/react-native-mapbox-gl/issues/825#issuecomment-348265375

[nitaliano]

Yes, PointAnnotations will be officially deprecated in our next major release, they are already deprecated in our native Android SDK.

If you want control and incredible performance use Sources/Layers, there is a learning curve at first but your product will be better for it, so instead of a PointAnnotation use a SymbolLayer