@rnmapbox/maps 10.0.0-beta.43 → 10.0.0-beta.45

package/android/install.md

@@ -10,7 +10,7 @@
 
 Add `RNMapboxMapsImpl = "mapbox"` to your gradle file - see bellow for details.
 
-### Custom versions
+### Setting RNMapboxMapsImpl to v10
 
 *Warning*: If you set a custom version, make sure you revisit, any time you update @rnmapbox/maps. Setting it to earlier version than what we exepect will likely result in a build error.
 
@@ -22,6 +22,53 @@ buildscript {
     ext {
         // ...
         RNMapboxMapsImpl = "mapbox" // required for v10
+    }
+}
+```
+
+### Adding mapbox maven repo
+
+You will need to authorize your download of the Maps SDK via a secret access token with the `DOWNLOADS:READ` scope.  
+This [guide](https://docs.mapbox.com/android/maps/guides/install/#configure-credentials) explains how to `Configure credentials` and `Configure your secret token`.
+
+Then under section `allprojects/repositories` add your data:
+
+```groovy
+// android/build.gradle
+
+allprojects {
+    repositories {
+        // ...other repos
+        maven {
+            url 'https://api.mapbox.com/downloads/v2/releases/maven'
+            authentication {
+                basic(BasicAuthentication)
+            }
+            credentials {
+                // Do not change the username below.
+                // This should always be `mapbox` (not your username).
+                username = 'mapbox'
+                // Use the secret token you stored in gradle.properties as the password
+                password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
+            }
+        }
+        // ...even more repos?
+    }
+}
+```
+
+### Using non default mapbox version
+
+*Warning*: If you set a custom version, make sure you revisit, any time you update @rnmapbox/maps. Setting it to earlier version than what we exepect will likely result in a build error.
+
+Set `RNMapboxMapsLibs` in `android/build.gradle > buildscript > ext` section
+
+
+```groovy
+buildscript {
+    ext {
+        // ...
+        RNMapboxMapsImpl = "mapbox"
 
         RNMapboxMapsLibs = { // optional - only required if you want to customize it
             implementation 'com.mapbox.maps:android:10.6.0'
@@ -32,6 +79,7 @@ buildscript {
 ```
 
 
+
 If you see `2 files found with path 'lib/arm64-v8a/libc++_shared.so' from inputs` issue see [possible workaround](#workaround-for-2-files-found-with-path-libarm64-v8alibc_sharedso-from-inputs).
 
 ## Using MapLibre

package/android/rctmgl/src/main/java-mapboxgl/common/com/mapbox/rctmgl/components/camera/CameraStop.java

@@ -162,10 +162,10 @@ public class CameraStop {
 
         // scale padding by pixel ratio
         DisplayMetrics metrics = context.getResources().getDisplayMetrics();
-        paddingTop = Float.valueOf(paddingTop * metrics.scaledDensity).intValue();
-        paddingRight = Float.valueOf(paddingRight * metrics.scaledDensity).intValue();
-        paddingBottom = Float.valueOf(paddingBottom * metrics.scaledDensity).intValue();
-        paddingLeft = Float.valueOf(paddingLeft * metrics.scaledDensity).intValue();
+        paddingTop = Float.valueOf(paddingTop * metrics.density).intValue();
+        paddingRight = Float.valueOf(paddingRight * metrics.density).intValue();
+        paddingBottom = Float.valueOf(paddingBottom * metrics.density).intValue();
+        paddingLeft = Float.valueOf(paddingLeft * metrics.density).intValue();
 
         stop.setPadding(
                 paddingLeft,

package/android/rctmgl/src/main/java-mapboxgl/common/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java

@@ -326,9 +326,9 @@ public class RCTMGLMapView extends MapView implements OnMapReadyCallback, Mapbox
         int[] contentPadding = mMap.getPadding();
 
         int mapWidth = (int) ((mMap.getWidth() * 0.75 - (contentPadding[0] + contentPadding[2]))
-                / metrics.scaledDensity);
+                / metrics.density);
         int mapHeight = (int) ((mMap.getHeight() * 0.75 - (contentPadding[1] + contentPadding[3]))
-                / metrics.scaledDensity);
+                / metrics.density);
         VisibleRegion region = GeoViewport.getRegion(center, (int) zoomLevel, mapWidth, mapHeight);
         return region;
     }
@@ -1246,7 +1246,7 @@ public class RCTMGLMapView extends MapView implements OnMapReadyCallback, Mapbox
 
         final DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
 
-        double[] result = {left * metrics.scaledDensity, top * metrics.scaledDensity, right * metrics.scaledDensity, bottom * metrics.scaledDensity};
+        double[] result = {left * metrics.density, top * metrics.density, right * metrics.density, bottom * metrics.density};
         return result;
     }
 

package/android/rctmgl/src/main/java-mapboxgl/common/com/mapbox/rctmgl/modules/RCTMGLSnapshotModule.java

@@ -107,7 +107,7 @@ public class RCTMGLSnapshotModule extends ReactContextBaseJavaModule {
 
         options.withLogo(jsOptions.getBoolean("withLogo"));
         options.withStyle(jsOptions.getString("styleURL"));
-        options.withPixelRatio(Float.valueOf(mContext.getResources().getDisplayMetrics().scaledDensity).intValue());
+        options.withPixelRatio(Float.valueOf(mContext.getResources().getDisplayMetrics().density).intValue());
 
         if (jsOptions.hasKey("bounds")) {
             FeatureCollection bounds = FeatureCollection.fromJson(jsOptions.getString("bounds"));

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/RCTMGLPackage.java

@@ -10,7 +10,6 @@ import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
 
-import com.mapbox.rctmgl.components.annotation.RCTMGLMarkerViewWrapperManager;
 import com.mapbox.rctmgl.components.camera.RCTMGLCameraManager;
 
 import com.mapbox.rctmgl.components.annotation.RCTMGLCalloutManager;
@@ -81,7 +80,6 @@ public class RCTMGLPackage implements ReactPackage {
 
         // annotations
         managers.add(new RCTMGLMarkerViewManager(reactApplicationContext));
-        managers.add(new RCTMGLMarkerViewWrapperManager(reactApplicationContext));
         managers.add(new RCTMGLPointAnnotationManager(reactApplicationContext));
         managers.add(new RCTMGLCalloutManager());
 

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/annotation/RCTMGLMarkerView.kt

@@ -1,85 +1,196 @@
 package com.mapbox.rctmgl.components.annotation
 
 import android.content.Context
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
 import android.view.View
+import android.widget.FrameLayout
 import com.mapbox.geojson.Point
+import com.mapbox.maps.ViewAnnotationAnchor
 import com.mapbox.maps.ViewAnnotationOptions
+import com.mapbox.maps.viewannotation.viewAnnotationOptions
 import com.mapbox.rctmgl.components.AbstractMapFeature
 import com.mapbox.rctmgl.components.mapview.RCTMGLMapView
+import com.mapbox.rctmgl.modules.RCTMGLLogging
+import com.mapbox.rctmgl.utils.Logger
+import java.util.Vector
+
+private data class Vec2(val dx: Double, val dy: Double)
+
+class RCTMGLMarkerView(context: Context?, private val mManager: RCTMGLMarkerViewManager):
+    AbstractMapFeature(context),
+    View.OnLayoutChangeListener
+{
+    // region Instance variables
 
-class RCTMGLMarkerView(context: Context?, private val mManager: RCTMGLMarkerViewManager) : AbstractMapFeature(context), View.OnLayoutChangeListener {
     private var mMapView: RCTMGLMapView? = null
-    private var mChildView: View? = null
-    private var mCoordinate: Point? = null
-    private lateinit var mAnchor: Array<Float>
+    private var mView: View? = null
+    private var didAddToMap = false
 
-    override fun addView(childView: View, childPosition: Int) {
-        mChildView = childView
-    }
+    private var mCoordinate: Point? = null
+    private var mAnchor: Vec2 = Vec2(0.5, 0.5)
+    private var mAllowOverlap = false
+    private var mIsSelected = false
 
     fun setCoordinate(point: Point?) {
         mCoordinate = point
-        if (mChildView != null) {
-            val options = ViewAnnotationOptions.Builder().geometry(mCoordinate).build()
-            mMapView?.viewAnnotationManager?.updateViewAnnotation(mChildView!!, options)
-        }
+        update()
     }
 
     fun setAnchor(x: Float, y: Float) {
-        mAnchor = arrayOf(x, y)
-        refresh()
+        mAnchor = Vec2(x.toDouble(), y.toDouble())
+        update()
     }
 
-    fun refresh() {
-        // this will cause position to be recalculated
-        if (mChildView != null) {
-            val width = mChildView!!.width
-            val height = mChildView!!.height
-            val options = ViewAnnotationOptions.Builder().geometry(mCoordinate).width(width).height(height).offsetX(((mAnchor[0] - 0.5) * width).toInt()).offsetY(((mAnchor[1] - 0.5) * height).toInt()).build()
-            mMapView?.viewAnnotationManager?.updateViewAnnotation(mChildView!!, options)
-        }
+    fun setAllowOverlap(allowOverlap: Boolean) {
+        mAllowOverlap = allowOverlap
+        update()
+    }
+
+    fun setIsSelected(isSelected: Boolean) {
+        mIsSelected = isSelected
+        update()
+    }
+
+    // endregion
+
+    // region View methods
+
+    override fun addView(childView: View, childPosition: Int) {
+        mView = childView
+        // Note: Do not call this method on `super`. The view is added manually.
+    }
+
+    override fun onLayoutChange(
+        v: View,
+        left: Int, top: Int, right: Int, bottom: Int,
+        oldLeft: Int, oldTop: Int, oldRight: Int, oldBottom: Int
+    ) {
+        addOrUpdate()
     }
 
+    // endregion
+
+    // region RCTMGLMapComponent methods
+
     override fun addToMap(mapView: RCTMGLMapView) {
         mMapView = mapView
-        val rctmglMarkerView = this
-        mMapView?.getMapAsync {
-            if (mChildView != null) {
-                val width = mChildView!!.width
-                val height = mChildView!!.height
-                val options = ViewAnnotationOptions.Builder().geometry(mCoordinate).width(width).height(height).offsetX(((mAnchor[0] - 0.5) * width).toInt()).offsetY(((mAnchor[1] - 0.5) * height).toInt()).build()
-                mChildView!!.addOnLayoutChangeListener(rctmglMarkerView)
-                if (mChildView!!.layoutParams == null && !mChildView!!.isAttachedToWindow) {
-                    mMapView?.offscreenAnnotationViewContainer()?.addView(mChildView)
-                    mMapView?.offscreenAnnotationViewContainer()?.removeView(mChildView)
-                }
-                mMapView?.viewAnnotationManager?.addViewAnnotation(mChildView!!, options)
-            }
-        }
+        add()
     }
 
     override fun removeFromMap(mapView: RCTMGLMapView) {
-        val childView = mChildView
-        if (childView != null) {
-            childView.removeOnLayoutChangeListener(this)
-            childView.visibility = INVISIBLE;
-            mMapView?.viewAnnotationManager?.removeViewAnnotation(childView)
+        remove(mapView)
+    }
+
+    // endregion
+
+    // region Create, update, and remove methods
+
+    private fun addOrUpdate() {
+        if (didAddToMap) {
+            update()
+        } else {
+            add()
+        }
+    }
+
+    private fun add() {
+        if (didAddToMap) {
+            return
         }
+
+        if (mView == null || mCoordinate == null) {
+            return
+        }
+        val view = mView!!
+
+        view.addOnLayoutChangeListener(this)
+
+        if (view.layoutParams == null && !view.isAttachedToWindow) {
+            mMapView?.offscreenAnnotationViewContainer?.addView(view)
+            mMapView?.offscreenAnnotationViewContainer?.removeView(view)
+        }
+
+        val options = getOptions()
+
+        val annotation = mMapView?.viewAnnotationManager?.addViewAnnotation(
+            view,
+            options
+        )
+        didAddToMap = true
+    }
+
+    fun update() {
+        if (!didAddToMap) {
+            return
+        }
+
+        if (mView == null || mCoordinate == null) {
+            return
+        }
+        val view = mView!!
+
+        val options = getOptions()
+
+        val annotation = mMapView?.viewAnnotationManager?.updateViewAnnotation(
+            view,
+            options
+        )
     }
 
-    override fun onLayoutChange(v: View, left: Int, top: Int, right: Int, bottom: Int, oldLeft: Int, oldTop: Int,
-                                oldRight: Int, oldBottom: Int) {
-        if (left != oldLeft || right != oldRight || top != oldTop || bottom != oldBottom) {
-            val centerX = oldLeft + (oldRight-oldLeft)*mAnchor[0];
-            val centerY = oldTop + (oldBottom-oldTop)*mAnchor[1];
+    private fun remove(mapView: RCTMGLMapView) {
+        this.removeOnLayoutChangeListener(this)
 
-            val newLeft = (centerX - (mAnchor[0] * (right - left))).toInt();
-            val newTop =  (centerY - (mAnchor[1] * (bottom - top))).toInt();
+        mView?.let { view ->
+            mapView.endViewTransition(view) // https://github.com/mapbox/mapbox-maps-android/issues/1723
+            val removed = mapView.viewAnnotationManager?.removeViewAnnotation(view)
+            if (removed == false) {
+                Logger.w("RCTMGLMarkerView", "Unable to remove view")
+            }
+        }
+    }
+
+    // endregion
+
+    // region Helper functions
+
+    private fun getOptions(): ViewAnnotationOptions {
+        val view = mView!!
+        val width = view.width
+        val height = view.height
+        val coordinate = mCoordinate
+
+        val offset = getOffset()
 
-            val childView = mChildView!!
-            childView.x = (newLeft - oldLeft) + childView.x;
-            childView.y = (newTop-oldTop) + childView.y;
-            refresh()
+        val options = viewAnnotationOptions {
+            geometry(coordinate)
+            width(width)
+            height(height)
+            allowOverlap(mAllowOverlap)
+            offsetX(offset.dx.toInt())
+            offsetY(offset.dy.toInt())
+            selected(mIsSelected)
         }
+        return options
     }
+
+    private fun getOffset(): Vec2 {
+        if (mView == null) {
+            return Vec2(0.0, 0.0)
+        }
+        val view = mView!!
+
+        val width = view.width
+        val height = view.height
+
+        // Create a modified offset, normalized from 0..1 to -1..1 and scaled to
+        // the view size.
+        val offsetX = (mAnchor.dx * 2 - 1) * (width / 2) * -1
+        val offsetY = (mAnchor.dy * 2 - 1) * (height / 2)
+
+        return Vec2(offsetX, offsetY)
+    }
+
+    // endregion
 }

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/annotation/RCTMGLMarkerViewManager.kt

@@ -25,6 +25,16 @@ class RCTMGLMarkerViewManager(reactApplicationContext: ReactApplicationContext?)
         markerView.setAnchor(map.getDouble("x").toFloat(), map.getDouble("y").toFloat())
     }
 
+    @ReactProp(name = "allowOverlap")
+    fun setAllowOverlap(markerView: RCTMGLMarkerView, allowOverlap: Boolean) {
+        markerView.setAllowOverlap(allowOverlap)
+    }
+
+    @ReactProp(name = "isSelected")
+    fun setIsSelected(markerView: RCTMGLMarkerView, isSelected: Boolean) {
+        markerView.setIsSelected(isSelected)
+    }
+
     override fun createViewInstance(reactContext: ThemedReactContext): RCTMGLMarkerView {
         return RCTMGLMarkerView(reactContext, this)
     }

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/annotation/RCTMGLPointAnnotation.kt

@@ -53,7 +53,7 @@ class RCTMGLPointAnnotation(private val mContext: Context, private val mManager:
         }
         childView.addOnLayoutChangeListener(this)
 
-        mMapView?.offscreenAnnotationViewContainer()?.addView(childView)
+        mMapView?.offscreenAnnotationViewContainer?.addView(childView)
 
     }
 
@@ -70,7 +70,7 @@ class RCTMGLPointAnnotation(private val mContext: Context, private val mManager:
                 }
             })
         }
-        mMapView?.offscreenAnnotationViewContainer()?.removeView(childView)
+        mMapView?.offscreenAnnotationViewContainer?.removeView(childView)
     }
 
     override fun addToMap(mapView: RCTMGLMapView) {
@@ -79,14 +79,14 @@ class RCTMGLPointAnnotation(private val mContext: Context, private val mManager:
         makeMarker()
         if (mChildView != null) {
             if (!mChildView!!.isAttachedToWindow) {
-                mMapView!!.offscreenAnnotationViewContainer().addView(mChildView)
+                mMapView!!.offscreenAnnotationViewContainer?.addView(mChildView)
             }
             addBitmapToStyle(mChildBitmap, mChildBitmapId)
             updateOptions()
         }
         if (calloutView != null) {
             if (!calloutView!!.isAttachedToWindow && mMapView != null) {
-                mMapView!!.offscreenAnnotationViewContainer().addView(calloutView)
+                mMapView!!.offscreenAnnotationViewContainer?.addView(calloutView)
             }
             addBitmapToStyle(mCalloutBitmap, mCalloutBitmapId)
         }
@@ -98,10 +98,10 @@ class RCTMGLPointAnnotation(private val mContext: Context, private val mManager:
             map.pointAnnotationManager?.delete(marker!!)
         }
         if (mChildView != null) {
-            map.offscreenAnnotationViewContainer().removeView(mChildView)
+            map.offscreenAnnotationViewContainer?.removeView(mChildView)
         }
         if (calloutView != null) {
-            map.offscreenAnnotationViewContainer().removeView(calloutView)
+            map.offscreenAnnotationViewContainer?.removeView(calloutView)
         }
     }
 

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

@@ -84,8 +84,12 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
     }
 
     fun convert(value: IntArray): EdgeInsets {
+        val left = value[0].toDouble();
+        val top = value[1].toDouble();
+        val right = value[2].toDouble();
+        val bottom = value[3].toDouble();
         return EdgeInsets(
-            value[0].toDouble(), value[1].toDouble(), value[2].toDouble(), value[3].toDouble()
+            top, left, bottom, right
         )
     }
 
@@ -162,10 +166,10 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
             }
             if (readableMap.hasKey("bounds")) {
                 val metrics = context.resources.displayMetrics
-                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")
+                var paddingTop = getBoundsPaddingByKey(readableMap, metrics.density, "paddingTop")
+                var paddingRight = getBoundsPaddingByKey(readableMap, metrics.density, "paddingRight")
+                var paddingBottom = getBoundsPaddingByKey(readableMap, metrics.density, "paddingBottom")
+                var paddingLeft = getBoundsPaddingByKey(readableMap, metrics.density, "paddingLeft")
 
                 val collection = FeatureCollection.fromJson(readableMap.getString("bounds")!!)
                 stop.setBounds(
@@ -213,9 +217,9 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
             return intArrayOf(resultLeft, resultTop, resultRight, resultBottom)
         }
 
-        private fun getBoundsPaddingByKey(map: ReadableMap, scaledDensity: Float, key: String): Int? {
+        private fun getBoundsPaddingByKey(map: ReadableMap, density: Float, key: String): Int? {
             if (map.hasKey(key)) {
-                return (map.getInt(key) * scaledDensity).toInt()
+                return (map.getInt(key) * density).toInt()
             } else {
                 return null;
             }

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/images/RCTMGLImages.kt

@@ -7,6 +7,9 @@ import com.mapbox.rctmgl.components.AbstractMapFeature
 import com.mapbox.rctmgl.utils.ImageEntry
 import android.graphics.drawable.BitmapDrawable
 import androidx.core.content.res.ResourcesCompat
+import com.mapbox.bindgen.Expected
+import com.mapbox.bindgen.None
+import com.mapbox.maps.Image
 import com.mapbox.maps.MapboxMap
 import com.mapbox.maps.Style
 import com.mapbox.rctmgl.R
@@ -15,11 +18,27 @@ import com.mapbox.rctmgl.components.images.RCTMGLImages
 import com.mapbox.rctmgl.events.ImageMissingEvent
 import com.mapbox.rctmgl.utils.BitmapUtils
 import com.mapbox.rctmgl.utils.DownloadMapImageTask
+import java.nio.ByteBuffer
 import java.util.AbstractMap
 import java.util.ArrayList
 import java.util.HashMap
 import java.util.HashSet
 
+fun Style.addBitmapImage(imageId: String, bitmap: Bitmap) : Expected<String, None> {
+    val byteBuffer = ByteBuffer.allocate(bitmap.byteCount)
+    bitmap.copyPixelsToBuffer(byteBuffer)
+    val sdf = false
+    return this.addStyleImage(
+        imageId,
+        (1.0/((160.0/bitmap.density))).toFloat(),
+        Image(bitmap.width, bitmap.height, byteBuffer.array()),
+        sdf,
+        listOf(),
+        listOf(),
+        null
+    )
+}
+
 class RCTMGLImages(context: Context, private val mManager: RCTMGLImagesManager) : AbstractMapFeature(context) {
     var mCurrentImages: MutableSet<String?>
     private var mImages: MutableMap<String, ImageEntry>?
@@ -151,7 +170,8 @@ class RCTMGLImages(context: Context, private val mManager: RCTMGLImagesManager)
         if (style == null || imageEntries == null) return
         for ((key, value) in imageEntries) {
             if (key != null && !hasImage(key, map)) {
-                style.addImage(key, BitmapUtils.toImage(value))
+                val bitmap = value!!.bitmap
+                style.addBitmapImage(key, bitmap)
                 mCurrentImages.add(key)
             }
         }
@@ -171,7 +191,7 @@ class RCTMGLImages(context: Context, private val mManager: RCTMGLImagesManager)
         // See also: https://github.com/mapbox/mapbox-gl-native/pull/14253#issuecomment-478827792
         for (imageEntry in imageEntries) {
             if (!hasImage(imageEntry.key, map)) {
-                mImagePlaceholder?.let { style.addImage(imageEntry.key, it) }
+                mImagePlaceholder?.let { style.addBitmapImage(imageEntry.key, it) }
                 missingImages.add(imageEntry)
                 mCurrentImages.add(imageEntry.key)
             }

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

@@ -38,6 +38,7 @@ import com.mapbox.maps.plugin.delegates.listeners.*
 import com.mapbox.maps.plugin.gestures.*
 import com.mapbox.maps.plugin.logo.generated.LogoSettings
 import com.mapbox.maps.plugin.logo.logo
+import com.mapbox.maps.viewannotation.ViewAnnotationManager
 import com.mapbox.rctmgl.R
 import com.mapbox.rctmgl.components.AbstractMapFeature
 import com.mapbox.rctmgl.components.annotation.RCTMGLMarkerView
@@ -70,6 +71,14 @@ interface RCTMGLMapViewLifecycleOwner : LifecycleOwner {
 }
 
 open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapViewManager /*, MapboxMapOptions options*/) : MapView(mContext), OnMapClickListener, OnMapLongClickListener {
+    /**
+     * `PointAnnotations` are rendered to a canvas, but the React Native `Image` component is
+     * implemented on top of Fresco (https://frescolib.org), which does not load images for
+     * views not attached to the window. This provides an offscreen view where views can
+     * be rendered to the canvas before being added as annotations.
+     */
+    public var offscreenAnnotationViewContainer: ViewGroup? = null
+
     private val mSources: MutableMap<String, RCTSource<*>>
     private val mImages: MutableList<RCTMGLImages>
     private var mPointAnnotationManager: PointAnnotationManager? = null
@@ -87,7 +96,6 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
     var savedStyle: Style? = null
         private set
     private val mHandledMapChangedEvents: HashSet<String>? = null
-    private var mOffscreenAnnotationViewContainer: ViewGroup? = null
     private var mAnnotationClicked = false
     private var mAnnotationDragged = false
     private var mLocationComponentManager: LocationComponentManager? = null
@@ -229,7 +237,6 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
             mPointAnnotations[annotation.iD.toString()] = annotation
             feature = childView
         } else if (childView is RCTMGLMarkerView) {
-            val marker = childView
             feature = childView
         } else if (childView is RCTMGLCamera) {
             mCamera = childView
@@ -630,23 +637,6 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
         )
     }
 
-    /**
-     * PointAnnotations are rendered to a canvas, but react native Image component is
-     * implemented on top of Fresco, and fresco will not load images when their view is
-     * not attached to the window. So we'll have an offscreen view where we add those views
-     * so they can rendered full to canvas.
-     */
-    fun offscreenAnnotationViewContainer(): ViewGroup {
-        if (mOffscreenAnnotationViewContainer == null) {
-            mOffscreenAnnotationViewContainer = FrameLayout(context)
-            val flParams = LayoutParams(0, 0)
-            flParams.setMargins(-10000, -10000, -10000, -10000)
-            (mOffscreenAnnotationViewContainer as FrameLayout).setLayoutParams(flParams)
-            addView(mOffscreenAnnotationViewContainer)
-        }
-        return mOffscreenAnnotationViewContainer!!
-    }
-
     val locationComponentManager: LocationComponentManager
         get() {
             if (mLocationComponentManager == null) {
@@ -839,11 +829,19 @@ open class RCTMGLMapView(private val mContext: Context, var mManager: RCTMGLMapV
     }
 
     init {
+        offscreenAnnotationViewContainer = FrameLayout(getContext())
+        val p = FrameLayout.LayoutParams(0, 0)
+        p.setMargins(-10000, -10000, -10000, -10000)
+        offscreenAnnotationViewContainer?.setLayoutParams(p)
+        addView(offscreenAnnotationViewContainer)
+
         mMap = getMapboxMap()
         mSources = HashMap()
         mImages = ArrayList()
         mPointAnnotations = HashMap()
+
         onMapReady(mMap)
+
         val _this = this
         mMap.addOnMapLoadedListener(OnMapLoadedListener { (begin, end) -> _this.handleMapChangedEvent(EventTypes.DID_FINISH_LOADING_MAP) })
         mMap.addOnStyleImageMissingListener(OnStyleImageMissingListener { (begin, end, id) ->

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

@@ -8,7 +8,7 @@ import com.mapbox.rctmgl.utils.DownloadMapImageTask
 import java.util.AbstractMap
 import java.util.ArrayList
 
-class RCTMGLStyle(private val mContext: Context, reactStyle: ReadableMap, map: MapboxMap) {
+class RCTMGLStyle(private val mContext: Context, reactStyle: ReadableMap?, map: MapboxMap) {
     private val mReactStyle: ReadableMap?
     private val mMap: MapboxMap
     val allStyleKeys: List<String>

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/modules/RCTMGLSnapshotModule.java

@@ -132,7 +132,7 @@ public class RCTMGLSnapshotModule extends ReactContextBaseJavaModule {
                         (int) jsOptions.getDouble("height")
                 )
         );
-        builder.pixelRatio(Float.valueOf(mContext.getResources().getDisplayMetrics().scaledDensity).intValue());
+        builder.pixelRatio(Float.valueOf(mContext.getResources().getDisplayMetrics().density).intValue());
 
         builder.resourceOptions(new ResourceOptions.Builder().accessToken(RCTMGLModule.getAccessToken(mContext)).build());
         return builder.build();

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/utils/DownloadMapImageTask.kt

@@ -21,6 +21,7 @@ import com.facebook.imagepipeline.image.CloseableImage
 import com.facebook.imagepipeline.image.CloseableStaticBitmap
 import com.facebook.imagepipeline.request.ImageRequestBuilder
 import com.facebook.react.views.imagehelper.ImageSource
+import com.mapbox.rctmgl.components.images.addBitmapImage
 import java.io.File
 import java.lang.ref.WeakReference
 import java.util.AbstractMap
@@ -120,7 +121,7 @@ class DownloadMapImageTask(context: Context, map: MapboxMap, callback: OnAllImag
                 val bitmapImages = HashMap<String, Bitmap>()
                 for ((key, value) in images) {
                     bitmapImages[key] = value
-                    style.addImage(key, value)
+                    style.addBitmapImage(key, value)
                 }
                 // style.addImages(bitmapImages);
             }