[FIXED] React Native MabBox MarkerView issue

Issue

I am working on a project where i need to show at least 10 to 20 markers on a map at a time. Project is ejected from expo and as Google Map is paid i am using MapBox.

To add map in react native i am using @react-native-mapbox-gl/maps": "^8.1.0-rc.9, But docs are not that good so i tried from one medium blog to add markers. But it has some malfunctioning like marker is showing but if i zoom out than marker moves too. Let say right now marker is at Mumbai(India) but if i zoom out it will be in Africa.

Here is what i have tried

                <MapboxGL.MapView
                    style={styles.map}
                    logoEnabled={false}
                    localizeLabels={true}
                >
                    <MapboxGL.Camera
                        zoomLevel={18}
                        animationMode={'flyTo'}
                        animationDuration={1100}
                        centerCoordinate={[73.20812, 22.29941]}
                    />
                    <View>
                        <MapboxGL.MarkerView id={'hello'} coordinate={[73.20812, 22.29941]}>
                            <View>
                                <Entypo
                                    name='location-pin'
                                    size={24}
                                    color='black'
                                />
                            </View>
                        </MapboxGL.MarkerView>
                        <MapboxGL.MarkerView
                            id={'hello'}
                            coordinate={[73.20813, 22.29941]}
                        >
                            <View>
                                <Entypo name='location-pin' size={24} color='black' />
                            </View>
                        </MapboxGL.MarkerView>
                        <MapboxGL.MarkerView id={'hello'} coordinate={[73.20814, 22.29941]}>
                            <View>
                                <Entypo name='location-pin' size={24} color='black' />
                            </View>
                        </MapboxGL.MarkerView>
                        <MapboxGL.MarkerView id={'hello'} coordinate={[73.20815, 22.29941]}>
                            <View>
                                <Entypo name='location-pin' size={24} color='black' />
                            </View>
                        </MapboxGL.MarkerView>
                        <MapboxGL.MarkerView id={'hello'} coordinate={[73.20816, 22.29941]}>
                            <View>
                                <Entypo name='location-pin' size={24} color='black' />
                            </View>
                        </MapboxGL.MarkerView>
                    </View>
                </MapboxGL.MapView>

Solution

I have just made one change and now it is working fine.

I have changed MapboxGL.MarkerView to MapboxGL.PointAnnotation and now while zooming out marker remains fixed.

Answered By - akshay2739
Answer Checked By - Timothy Miller (JavaFixing Admin)