@rnmapbox/maps 10.0.0-beta.31 → 10.0.0-beta.34

package/.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parser: '@babel/eslint-parser',
-  plugins: ['react', 'react-native', 'fp', 'import'],
+  plugins: ['react', 'react-native', 'import'],
   env: {
     jest: true,
   },
@@ -38,6 +38,7 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
+    'plugin:jest/recommended',
     '@react-native-community',
     'prettier',
   ],
@@ -76,7 +77,6 @@ module.exports = {
     'no-use-before-define': ['error', { functions: false }],
     'no-unused-expressions': ['error', { allowTaggedTemplates: true }],
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
-    'fp/no-mutating-methods': 'warn',
     'react-native/no-inline-styles': 0,
   },
   ignorePatterns: ['**/rnmapbox.web.symlink'],

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,112 @@
+name: Bug Report
+description: This template should be used for reporting bugs and defects.
+title: "[Bug]: "
+labels: 'bug :beetle:'
+body:
+- type: markdown
+  attributes:
+    value: |
+      Thanks for taking the time to fill out this bug report!
+- type: dropdown
+  id: mapbox-implementation
+  attributes:
+    label: Mapbox Implementation
+    description: |-
+      Check `RNMapboxMapsImpl` in your Podfile/gradle files. Defaults to `Maplibre`.
+    options:
+      - Mapbox
+      - Mapbox GL
+      - Maplibre
+  validations:
+    required: true
+- type: input
+  id: mapbox-version
+  attributes:
+    label: Mapbox Version
+    description: |-
+      Check `RNMapboxMapsVersion` in your Podfile/gradle files, set to `default` if you don't cusomize the version
+    placeholder: 10.7.0
+  validations:
+    required: true
+- type: dropdown
+  id: platform
+  attributes:
+    label: Platform
+    multiple: true
+    description: |-
+      The platform where you experience the issue
+    options:
+      - iOS
+      - Android
+  validations:
+    required: true
+- type: input
+  id: rnmapbox-version
+  attributes:
+    label: "`@rnmapbox/maps` version"
+    description: |-
+      The version of `@rnmapbox/maps`, such as `#main`, `10.0.0-beta.32`
+    value: 10.0.0-beta.11
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Standalone component to reproduce
+    description: |-
+      - Use [our BugReportTemplate](https://github.com/rnmapbox/maps/blob/main/example/src/examples/BugReportExample.js) screens as a starting point.
+      - Component should be self contained - no extra libraries, external data, no parameters
+      - Do not include setAccessToken or access token istelf.
+    value: |-
+      ```javascript
+      import React from 'react';
+      import {
+        MapView,
+        ShapeSource,
+        LineLayer,
+        Camera,
+      } from '@rnmapbox/maps';
+      
+      const aLine = {
+        type: 'LineString',
+        coordinates: [
+          [-74.00597, 40.71427],
+          [-74.00697, 40.71527],
+        ],
+      };
+      
+      class BugReportExample extends React.Component {
+        render() {
+          return (
+            <MapView style={{flex: 1}}>
+              <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
+              <ShapeSource id="idStreetLayer" shape={aLine}>
+                <LineLayer id="idStreetLayer" />
+              </ShapeSource>
+            </MapView>
+          );
+        }
+      }
+      ```
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Observed behavior and steps to reproduce
+    description: |-
+      - Please include as much evidence as possible (traces, videos, screenshots etc.)
+- type: textarea
+  attributes:
+    label: Expected behavior
+    description: |-
+      - Please include the expected behavior and any resources supporting this expected behavior.
+- type: textarea
+  attributes:
+    label: Notes / preliminary analysis
+    description: |-
+      - include your initial analysis, if available
+- type: textarea
+  attributes:
+    label: Additional links and references
+    description: |-
+      - Links to traces, videos et
+

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run generate
+npx lint-staged

package/.nvmrc

@@ -1,2 +1,2 @@
-v14.17.0
+v14.20.0
 

package/README-v10.md

@@ -80,7 +80,7 @@ code ios/Podfile
 pod 'React-Core', :path => '../node_modules/react-native/React', modular_headers: true
 ```
 
-IOS:
+iOS:
 
  * Add `$(SDKROOT)/usr/lib/swift` to Library search paths.
 

package/README.md

@@ -12,7 +12,7 @@
 </tr>
 </table>
 
-|  [![npm version](https://badge.fury.io/js/%40react-native-mapbox-gl%2Fmaps.svg)](https://badge.fury.io/js/%40react-native-mapbox-gl%2Fmaps)  | [![iOS & Android Build](https://github.com/rnmapbox/maps/actions/workflows/on-push.yml/badge.svg?branch=main)](https://github.com/rnmapbox/maps/actions/workflows/on-push.yml?branch=main)  |
+|  [![npm version](https://badge.fury.io/js/%40rnmapbox%2Fmaps.svg)](https://badge.fury.io/js/%40rnmapbox%2Fmaps)  | [![iOS & Android Build](https://github.com/rnmapbox/maps/actions/workflows/on-push.yml/badge.svg?branch=main)](https://github.com/rnmapbox/maps/actions/workflows/on-push.yml?branch=main)  |
 |---|---|
 
 
@@ -91,17 +91,25 @@ _See [iOS](ios/install.md) & [Android](android/install.md) setup guide for more
 
 ### Step 1 - Install Package:
 
+#### Using `yarn`
+Install the latest source from git:
 ```sh
-# install with Yarn
-# yarn add @rnmapbox/maps
 yarn add rnmapbox/maps#main
+``` 
 
+#### Using `npm`
+Install the latest source from git:
+```sh
+npm install --save rnmapbox/maps#main
+``` 
 
-# or install with NPM
-# npm install @rnmapbox/maps --save
-npm install rnmapbox/maps#main --save
+#### Installing other versions
+Replace `rnmapbox/maps#main` with the following to install other versions:
+- `@rnmapbox/maps` installs the latest release
 
-```
+
+#### Using `expo`
+Please follow the [Expo Guide](/plugin/install.md).
 
 ### Step 2 - Installation Guides:
 
@@ -136,42 +144,39 @@ npm run android
 ```
 
 ## Adding a map
-
 ```js
-import React, { Component } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import MapboxGL from '@rnmapbox/maps';
 
 MapboxGL.setAccessToken('<YOUR_ACCESSTOKEN>');
 
+const App = () => {
+  return (
+    <View style={styles.page}>
+      <View style={styles.container}>
+        <MapboxGL.MapView style={styles.map} />
+      </View>
+    </View>
+  );
+}
+
+export default App;
+
 const styles = StyleSheet.create({
   page: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F5FCFF'
   },
   container: {
     height: 300,
     width: 300,
-    backgroundColor: 'tomato'
   },
   map: {
     flex: 1
   }
 });
-
-export default class App extends Component {
-  render() {
-    return (
-      <View style={styles.page}>
-        <View style={styles.container}>
-          <MapboxGL.MapView style={styles.map} />
-        </View>
-      </View>
-    );
-  }
-}
 ```
 ---
 ## Documentation

package/android/install.md

@@ -20,7 +20,7 @@ Overwrite mapbox dependencies within your `android/build.gradle > buildscript >
 buildscript {
     ext {
         // ...
-        RNMapboxMapsImpl = "maplibre" // optinal - as this is the default
+        RNMapboxMapsImpl = "maplibre" // optional - as this is the default
 
         RNMapboxMapsLibs = { // optional - only required if you want to customize it
             implementation ("org.maplibre.gl:android-sdk:9.5.2")

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/camera/CameraStop.kt

@@ -34,10 +34,10 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
     private var mZoom: Double? = null
     private var mLatLng: LatLng? = null
     private var mBounds: LatLngBounds? = null
-    private var mBoundsPaddingLeft = 0
-    private var mBoundsPaddingRight = 0
-    private var mBoundsPaddingBottom = 0
-    private var mBoundsPaddingTop = 0
+    private var mBoundsPaddingLeft : Int? = null
+    private var mBoundsPaddingRight : Int? = null
+    private var mBoundsPaddingBottom : Int? = null
+    private var mBoundsPaddingTop : Int? = null
     private var mMode = CameraMode.EASE
     private var mDuration = 2000
     private var mCallback: Animator.AnimatorListener? = null
@@ -67,10 +67,10 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
 
     fun setBounds(
         bounds: LatLngBounds?,
-        paddingLeft: Int,
-        paddingRight: Int,
-        paddingTop: Int,
-        paddingBottom: Int
+        paddingLeft: Int?,
+        paddingRight: Int?,
+        paddingTop: Int?,
+        paddingBottom: Int?
     ) {
         mBounds = bounds
         mBoundsPaddingLeft = paddingLeft
@@ -95,6 +95,9 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
         val builder = CameraOptions.Builder()
         builder.center(currentCamera.center)
         builder.bearing(currentCamera.bearing)
+
+        val currentPadding = currentCamera.padding;
+
         builder.padding(currentCamera.padding)
         builder.zoom(currentCamera.zoom)
         if (mBearing != null) {
@@ -109,16 +112,11 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
             val tilt = if (mTilt != null) mTilt!! else currentCamera.pitch
             val bearing = if (mBearing != null) mBearing!! else currentCamera.bearing
 
-            // Adding map padding to the camera padding which is the same behavior as
-            // mapbox native does on iOS
-            val contentInset = map.cameraState.padding
-            val paddingLeft =
-                java.lang.Double.valueOf(contentInset.left + mBoundsPaddingLeft).toInt()
-            val paddingTop = java.lang.Double.valueOf(contentInset.top + mBoundsPaddingTop).toInt()
-            val paddingRight =
-                java.lang.Double.valueOf(contentInset.right + mBoundsPaddingRight).toInt()
-            val paddingBottom =
-                java.lang.Double.valueOf(contentInset.bottom + mBoundsPaddingBottom).toInt()
+            val paddingLeft: Int = mBoundsPaddingLeft ?: currentPadding.left.toInt()
+            val paddingTop: Int = mBoundsPaddingTop ?: currentPadding.top.toInt()
+            val paddingRight: Int = mBoundsPaddingRight ?: currentPadding.right.toInt()
+            val paddingBottom: Int = mBoundsPaddingBottom ?: currentPadding.bottom.toInt()
+
             val cameraPadding = intArrayOf(paddingLeft, paddingTop, paddingRight, paddingBottom)
             val cameraPaddingClipped = clippedPadding(cameraPadding, mapView)
             val boundsCamera = map.cameraForCoordinateBounds(
@@ -163,18 +161,12 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
                 stop.setDuration(readableMap.getInt("duration"))
             }
             if (readableMap.hasKey("bounds")) {
-                var paddingTop = getBoundsPaddingByKey(readableMap, "paddingTop")
-                var paddingRight = getBoundsPaddingByKey(readableMap, "paddingRight")
-                var paddingBottom = getBoundsPaddingByKey(readableMap, "paddingBottom")
-                var paddingLeft = getBoundsPaddingByKey(readableMap, "paddingLeft")
-
-                // scale padding by pixel ratio
                 val metrics = context.resources.displayMetrics
-                paddingTop = java.lang.Float.valueOf(paddingTop * metrics.scaledDensity).toInt()
-                paddingRight = java.lang.Float.valueOf(paddingRight * metrics.scaledDensity).toInt()
-                paddingBottom =
-                    java.lang.Float.valueOf(paddingBottom * metrics.scaledDensity).toInt()
-                paddingLeft = java.lang.Float.valueOf(paddingLeft * metrics.scaledDensity).toInt()
+                var paddingTop = getBoundsPaddingByKey(readableMap, metrics.scaledDensity, "paddingTop")
+                var paddingRight = getBoundsPaddingByKey(readableMap, metrics.scaledDensity, "paddingRight")
+                var paddingBottom = getBoundsPaddingByKey(readableMap, metrics.scaledDensity, "paddingBottom")
+                var paddingLeft = getBoundsPaddingByKey(readableMap, metrics.scaledDensity, "paddingLeft")
+
                 val collection = FeatureCollection.fromJson(readableMap.getString("bounds")!!)
                 stop.setBounds(
                     toLatLngBounds(collection), paddingLeft, paddingRight,
@@ -221,8 +213,12 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
             return intArrayOf(resultLeft, resultTop, resultRight, resultBottom)
         }
 
-        private fun getBoundsPaddingByKey(map: ReadableMap, key: String): Int {
-            return if (map.hasKey(key)) map.getInt(key) else 0
+        private fun getBoundsPaddingByKey(map: ReadableMap, scaledDensity: Float, key: String): Int? {
+            if (map.hasKey(key)) {
+                return (map.getInt(key) * scaledDensity).toInt()
+            } else {
+                return null;
+            }
         }
     }
 }

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.kt

@@ -20,8 +20,10 @@ import com.mapbox.maps.extension.style.layers.Layer
 import com.mapbox.maps.extension.style.layers.generated.*
 import com.mapbox.maps.extension.style.layers.getLayer
 import com.mapbox.maps.extension.style.layers.properties.generated.Visibility
+import com.mapbox.maps.plugin.annotation.Annotation
 import com.mapbox.maps.plugin.annotation.annotations
 import com.mapbox.maps.plugin.annotation.generated.OnPointAnnotationClickListener
+import com.mapbox.maps.plugin.annotation.generated.OnPointAnnotationDragListener
 import com.mapbox.maps.plugin.annotation.generated.PointAnnotation
 import com.mapbox.maps.plugin.annotation.generated.PointAnnotationManager
 import com.mapbox.maps.plugin.annotation.generated.createPointAnnotationManager
@@ -79,6 +81,7 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
     private val mHandledMapChangedEvents: HashSet<String>? = null
     private var mOffscreenAnnotationViewContainer: ViewGroup? = null
     private var mAnnotationClicked = false
+    private var mAnnotationDragged = false
     private var mLocationComponentManager: LocationComponentManager? = null
     var tintColor: Int? = null
         private set
@@ -89,6 +92,7 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
                 val _this = this
                 val gesturesPlugin: GesturesPlugin = this.gestures
                 gesturesPlugin.removeOnMapClickListener(_this)
+                gesturesPlugin.removeOnMapLongClickListener(_this)
 
                 mPointAnnotationManager = annotations.createPointAnnotationManager()
                 mPointAnnotationManager?.addClickListener(OnPointAnnotationClickListener { pointAnnotation ->
@@ -96,7 +100,47 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
                         false
                     }
                 )
+                mPointAnnotationManager?.addDragListener(object : OnPointAnnotationDragListener {
+                    override fun onAnnotationDragStarted(_annotation: Annotation<*>) {
+                        mAnnotationDragged = true;
+                        var reactAnnotation: RCTMGLPointAnnotation? = null
+                        for (key in mPointAnnotations.keys) {
+                            val annotation = mPointAnnotations[key]
+                            val curMarkerID = annotation?.mapboxID
+                            if (_annotation.id == curMarkerID) {
+                                reactAnnotation = annotation
+                            }
+                        }
+                        reactAnnotation?.let { it.onDragStart() }
+                    }
+
+                   override fun onAnnotationDrag(_annotation: Annotation<*>) {
+                        var reactAnnotation: RCTMGLPointAnnotation? = null
+                        for (key in mPointAnnotations.keys) {
+                            val annotation = mPointAnnotations[key]
+                            val curMarkerID = annotation?.mapboxID
+                            if (_annotation.id == curMarkerID) {
+                                reactAnnotation = annotation
+                            }
+                        }
+                        reactAnnotation?.let { it.onDrag() }
+                    }
+
+                    override fun onAnnotationDragFinished(_annotation: Annotation<*>) {
+                        mAnnotationDragged = false;
+                        var reactAnnotation: RCTMGLPointAnnotation? = null
+                        for (key in mPointAnnotations.keys) {
+                            val annotation = mPointAnnotations[key]
+                            val curMarkerID = annotation?.mapboxID
+                            if (_annotation.id == curMarkerID) {
+                                reactAnnotation = annotation
+                            }
+                        }
+                        reactAnnotation?.let { it.onDragEnd() }
+                    }
+                })
                 gesturesPlugin.addOnMapClickListener(_this)
+                gesturesPlugin.addOnMapLongClickListener(_this)
 
             }
             return mPointAnnotationManager
@@ -106,7 +150,6 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
         map.getStyle(object : Style.OnStyleLoaded {
             override fun onStyleLoaded(style: Style) {
                 savedStyle = style
-                createSymbolManager(style)
                 setUpImage(style)
                 addQueuedFeatures()
                 setupLocalization(style)
@@ -426,6 +469,10 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
 
     override fun onMapLongClick(point: Point): Boolean {
         val _this = this
+        if (mAnnotationDragged) {
+            mAnnotationDragged = false
+            return true
+        }
         val screenPoint = mMap?.pixelForCoordinate(point)
         if (screenPoint != null) {
             val event = MapClickEvent(_this, LatLng(point), screenPoint, EventTypes.MAP_LONG_CLICK)
@@ -480,7 +527,11 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
         layerWaiters.remove(layerId)
     }
 
-    fun waitForLayer(layerID: String, callback: FoundLayerCallback) {
+    fun waitForLayer(layerID: String?, callback: FoundLayerCallback) {
+        if(layerID == null){
+            callback.found(null)
+            return
+        }
         if (savedStyle != null) {
             val layer = savedStyle?.getLayer(layerID)
             if (layer != null) {
@@ -534,52 +585,6 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
         return GeoJSONUtils.toPointFeature(latLng, properties)
     }
 
-    fun createSymbolManager(style: Style?) {
-        /*
-        v10 TODO
-        symbolManager = new SymbolManager(this, mMap, style);
-        symbolManager.setIconAllowOverlap(true);
-        symbolManager.addClickListener(new OnSymbolClickListener() {
-            @Override
-            public void onAnnotationClick(Symbol symbol) {
-                onMarkerClick(symbol);
-            }
-        });
-        symbolManager.addDragListener(new OnSymbolDragListener() {
-            @Override
-            public void onAnnotationDragStarted(Symbol symbol) {
-                mAnnotationClicked = true;
-                final long selectedMarkerID = symbol.getId();
-                RCTMGLPointAnnotation annotation = getPointAnnotationByMarkerID(selectedMarkerID);
-                if (annotation != null) {
-                    annotation.onDragStart();
-                }
-            }
-
-            @Override
-            public void onAnnotationDrag(Symbol symbol) {
-                final long selectedMarkerID = symbol.getId();
-                RCTMGLPointAnnotation annotation = getPointAnnotationByMarkerID(selectedMarkerID);
-                if (annotation != null) {
-                    annotation.onDrag();
-                }
-            }
-
-            @Override
-            public void onAnnotationDragFinished(Symbol symbol) {
-                mAnnotationClicked = false;
-                final long selectedMarkerID = symbol.getId();
-                RCTMGLPointAnnotation annotation = getPointAnnotationByMarkerID(selectedMarkerID);
-                if (annotation != null) {
-                    annotation.onDragEnd();
-                }
-            }
-        });
-        mMap.addOnMapClickListener(this);
-        mMap.addOnMapLongClickListener(this);
-         */
-    }
-
     fun addQueuedFeatures() {
         if (mQueuedFeatures != null && mQueuedFeatures!!.size > 0) {
             for (i in mQueuedFeatures!!.indices) {

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/styles/layers/RCTLayer.kt

@@ -49,7 +49,7 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
         mSourceID = sourceID
     }
 
-    fun setAboveLayerID(aboveLayerID: String) {
+    fun setAboveLayerID(aboveLayerID: String?) {
         if (mAboveLayerID != null && mAboveLayerID == aboveLayerID) {
             return
         }
@@ -60,7 +60,7 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
         }
     }
 
-    fun setBelowLayerID(belowLayerID: String) {
+    fun setBelowLayerID(belowLayerID: String?) {
         if (mBelowLayerID != null && mBelowLayerID == belowLayerID) {
             return
         }
@@ -147,7 +147,7 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
     }
 
     fun addAbove(aboveLayerID: String?) {
-        mMapView!!.waitForLayer(aboveLayerID!!, object : FoundLayerCallback {
+        mMapView!!.waitForLayer(aboveLayerID, object : FoundLayerCallback {
             override fun found(layer: Layer?) {
                 if (!hasInitialized()) {
                     return
@@ -160,7 +160,7 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
     }
 
     fun addBelow(belowLayerID: String?) {
-        mMapView!!.waitForLayer(belowLayerID!!, object : FoundLayerCallback {
+        mMapView!!.waitForLayer(belowLayerID, object : FoundLayerCallback {
             override fun found(layer: Layer?) {
                 if (!hasInitialized()) {
                     return
@@ -271,4 +271,4 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
     companion object {
         const val LOG_TAG = "RCTLayer"
     }
-}
+}

package/docs/Annotation.md

@@ -1,8 +1,8 @@
 <!-- This file was autogenerated from Annotation.js do not modify -->
-## <MapboxGL.Annotation />
-### 
+# <MapboxGL.Annotation />
 
-### props
+
+## props
 | Prop | Type | Default | Required | Description |
 | ---- | :--: | :-----: | :------: | :----------: |
 | id | `string` | `none` | `true` | FIX ME NO DESCRIPTION |
@@ -15,22 +15,22 @@
 | style | `any` | `none` | `false` | FIX ME NO DESCRIPTION |
 | icon | `union` | `none` | `false` | FIX ME NO DESCRIPTION |
 
-### methods
-#### onPress()
+## methods
+### onPress()
 
 
 
-##### arguments
+#### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
 
 
 
-#### symbolStyle()
+### symbolStyle()
 
 
 
-##### arguments
+#### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
 

package/docs/Annotations.md

@@ -1,17 +1,19 @@
-Comparsion of various annotations available in React native mapbox:
+# Annotations Comparison
 
-|*Feature*              | *SymbolLayer*      |*PointAnnotation*                     |*MarkerView*             |*CircleLayer*        |
-|-----------------------|--------------------|--------------------------------------|-------------------------|---------------------|
-|Can use images         | ✓            |                                      |                         |                     |
-|RN Views as childern   | iOS: static        |iOS: interactive <br/> android: static|interactive              |                     |
-|Interactions           | click              |iOS: full <br/> android: click & drag & callout  | supports full interactivity in the sense that inside MarkerViews one can place any RN View, which can be interacted with. Not to be misunderstood with drag n drop interactivity.                     | click          |
-|Control Z-index        | &check;            |iOS: always on top, android: n/a      |always on top            | &check;             |
-|Clustering             | &check;            |                                      |                         | &check;             |
-|Style with expressions | &check;            |                                      |                         | &check;             |
-|iOS implementation     | [MGLStyleSymbolLayer](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLSymbolStyleLayer.html)     |[MGLAnnotationView](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLAnnotationView.html)                     |[MGLAnnotationView](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLAnnotationView.html)       |[MGLCircleStyleLayer](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLCircleStyleLayer.html)       |
-|android implementation | [SymbolLayer](https://docs.mapbox.com/android/api/map-sdk/9.0.0/com/mapbox/mapboxsdk/style/layers/SymbolLayer.html)|[annotation.Symbol](https://docs.mapbox.com/android/api/plugins/annotation/0.8.0/com/mapbox/mapboxsdk/plugins/annotation/Symbol.html)|[annotation.Marker](https://docs.mapbox.com/android/api/plugins/markerview/0.4.0/com/mapbox/mapboxsdk/plugins/markerview/MarkerView.html) |[CircleLayer](https://docs.mapbox.com/android/api/map-sdk/9.0.0/com/mapbox/mapboxsdk/style/layers/CircleLayer.html)|
+Comparsion of various annotations available in React native mapbox:
 
+| *Feature*              | *SymbolLayer*      | *PointAnnotation*                                                                                                                     |*MarkerView*             |*CircleLayer*        |
+|------------------------|--------------------|---------------------------------------------------------------------------------------------------------------------------------------|-------------------------|---------------------|
+| Can use images         | &check;            |                                                                                                                                       |                         |                     |
+| RN Views as children   | iOS: static        | iOS: interactive <br/> Android: static                                                                                                |interactive              |                     |
+| Interactions           | click              | iOS: full <br/> Android: click & drag & callout                                                                                       | supports full interactivity in the sense that inside MarkerViews one can place any RN View, which can be interacted with. Not to be misunderstood with drag n drop interactivity.                     | click          |
+| Control Z-index        | &check;            | iOS: always on top, Android: n/a                                                                                                      |always on top            | &check;             |
+| Clustering             | &check;            |                                                                                                                                       |                         | &check;             |
+| Style with expressions | &check;            |                                                                                                                                       |                         | &check;             |
+| iOS implementation     | [MGLStyleSymbolLayer](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLSymbolStyleLayer.html)     | [MGLAnnotationView](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLAnnotationView.html)                                        |[MGLAnnotationView](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLAnnotationView.html)       |[MGLCircleStyleLayer](https://docs.mapbox.com/ios/api/maps/5.8.0/Classes/MGLCircleStyleLayer.html)       |
+| Android implementation | [SymbolLayer](https://docs.mapbox.com/android/api/map-sdk/9.0.0/com/mapbox/mapboxsdk/style/layers/SymbolLayer.html)| [annotation.Symbol](https://docs.mapbox.com/android/api/plugins/annotation/0.8.0/com/mapbox/mapboxsdk/plugins/annotation/Symbol.html) |[annotation.Marker](https://docs.mapbox.com/android/api/plugins/markerview/0.4.0/com/mapbox/mapboxsdk/plugins/markerview/MarkerView.html) |[CircleLayer](https://docs.mapbox.com/android/api/map-sdk/9.0.0/com/mapbox/mapboxsdk/style/layers/CircleLayer.html)|
 
 Related links:
+
 * iOS [markers and annotations](https://docs.mapbox.com/ios/maps/overview/markers-and-annotations/)
-* android [annotation plugin](https://docs.mapbox.com/android/plugins/overview/annotation/)
+* Android [annotation plugin](https://docs.mapbox.com/android/plugins/overview/annotation/)