@rnmapbox/maps 10.0.0-beta.75 → 10.0.0-beta.77

package/README.md

@@ -147,15 +147,15 @@ npm run android
 ```js
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import MapboxGL from '@rnmapbox/maps';
+import Mapbox from '@rnmapbox/maps';
 
-MapboxGL.setAccessToken('<YOUR_ACCESSTOKEN>');
+Mapbox.setAccessToken('<YOUR_ACCESSTOKEN>');
 
 const App = () => {
   return (
     <View style={styles.page}>
       <View style={styles.container}>
-        <MapboxGL.MapView style={styles.map} />
+        <Mapbox.MapView style={styles.map} />
       </View>
     </View>
   );

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

@@ -63,9 +63,9 @@ class RCTMGLImagesManager(private val mContext: ReactApplicationContext) :
                 val drawable =
                     ResourceUtils.getDrawableByName(mContext, resourceName) as BitmapDrawable
                 if (drawable != null) {
-                    return NativeImage(name, drawable)
+                    return NativeImage(resourceName, drawable)
                 } else {
-                    Logger.e("RCTMGLImages", "cound not get native drawable with name: $name")
+                    Logger.e("RCTMGLImages", "cound not get native drawable with name: $resourceName")
                     return null
                 }
             }
@@ -98,10 +98,10 @@ class RCTMGLImagesManager(private val mContext: ReactApplicationContext) :
                 }
                 val drawable =
                     ResourceUtils.getDrawableByName(mContext, resourceName) as BitmapDrawable
-                if (drawable != null) {
-                    return NativeImage(name, drawable, scale, sdf, stretchX, stretchY)
+                if (drawable != null && resourceName != null) {
+                    return NativeImage(resourceName, drawable, scale, sdf, stretchX, stretchY)
                 } else {
-                    Logger.e("RCTMGLImages", "cound not get native drawable with name: $name")
+                    Logger.e("RCTMGLImages", "cound not get native drawable with name: $resourceName")
                     return null
                 }
             }

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

@@ -5,6 +5,7 @@ import com.facebook.react.bridge.ReadableMap
 import com.mapbox.maps.MapboxMap
 import com.mapbox.rctmgl.utils.ImageEntry
 import com.mapbox.rctmgl.utils.DownloadMapImageTask
+import com.mapbox.rctmgl.utils.Logger
 import java.util.AbstractMap
 import java.util.ArrayList
 
@@ -39,11 +40,12 @@ class RCTMGLStyle(private val mContext: Context, reactStyle: ReadableMap?, map:
     }
 
     @JvmOverloads
-    fun addImage(styleValue: RCTMGLStyleValue, callback: DownloadMapImageTask.OnAllImagesLoaded? = null) {
+    fun addImage(styleValue: RCTMGLStyleValue, styleKey: String, callback: DownloadMapImageTask.OnAllImagesLoaded? = null) {
         if (!styleValue.shouldAddImage()) {
             callback?.onAllImagesLoaded()
             return
         }
+        Logger.w(LOG_TAG,"Deprecated: Image in style is deprecated, use images component instead. key: $styleKey [image-in-style-deprecated]")
         val uriStr = styleValue.imageURI
         val images = arrayOf<Map.Entry<String, ImageEntry>>(
             AbstractMap.SimpleEntry<String, ImageEntry>(
@@ -59,4 +61,8 @@ class RCTMGLStyle(private val mContext: Context, reactStyle: ReadableMap?, map:
         mReactStyle = reactStyle
         mMap = map
     }
+
+    companion object {
+        const val LOG_TAG = "RCTMGLStyle"
+    }
 }

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

@@ -80,7 +80,7 @@ public class RCTMGLStyleFactory {
               RCTMGLStyleFactory.setFillTranslateAnchor(layer, styleValue);
               break;
             case "fillPattern":
-              style.addImage(styleValue, new DownloadMapImageTask.OnAllImagesLoaded() {
+              style.addImage(styleValue, styleKey, new DownloadMapImageTask.OnAllImagesLoaded() {
                   @Override
                   public void onAllImagesLoaded() {
                       try {
@@ -172,7 +172,7 @@ public class RCTMGLStyleFactory {
               RCTMGLStyleFactory.setLineDasharray(layer, styleValue);
               break;
             case "linePattern":
-              style.addImage(styleValue, new DownloadMapImageTask.OnAllImagesLoaded() {
+              style.addImage(styleValue, styleKey, new DownloadMapImageTask.OnAllImagesLoaded() {
                   @Override
                   public void onAllImagesLoaded() {
                       try {
@@ -240,7 +240,7 @@ public class RCTMGLStyleFactory {
               RCTMGLStyleFactory.setIconTextFitPadding(layer, styleValue);
               break;
             case "iconImage":
-              style.addImage(styleValue, new DownloadMapImageTask.OnAllImagesLoaded() {
+              style.addImage(styleValue, styleKey, new DownloadMapImageTask.OnAllImagesLoaded() {
                   @Override
                   public void onAllImagesLoaded() {
                       try {
@@ -573,7 +573,7 @@ public class RCTMGLStyleFactory {
               RCTMGLStyleFactory.setFillExtrusionTranslateAnchor(layer, styleValue);
               break;
             case "fillExtrusionPattern":
-              style.addImage(styleValue, new DownloadMapImageTask.OnAllImagesLoaded() {
+              style.addImage(styleValue, styleKey, new DownloadMapImageTask.OnAllImagesLoaded() {
                   @Override
                   public void onAllImagesLoaded() {
                       try {
@@ -729,7 +729,7 @@ public class RCTMGLStyleFactory {
               RCTMGLStyleFactory.setBackgroundColorTransition(layer, styleValue);
               break;
             case "backgroundPattern":
-              style.addImage(styleValue, new DownloadMapImageTask.OnAllImagesLoaded() {
+              style.addImage(styleValue, styleKey, new DownloadMapImageTask.OnAllImagesLoaded() {
                   @Override
                   public void onAllImagesLoaded() {
                       try {

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

@@ -17,6 +17,7 @@ import com.mapbox.maps.extension.style.expressions.generated.Expression
 import com.mapbox.maps.extension.style.layers.*
 import com.mapbox.maps.extension.style.layers.properties.generated.Visibility
 import com.mapbox.rctmgl.components.styles.layers.RCTLayer
+import com.mapbox.rctmgl.components.styles.sources.RCTSource
 import com.mapbox.rctmgl.modules.RCTMGLLogging
 import com.mapbox.rctmgl.utils.ExpressionParser
 import java.lang.ClassCastException
@@ -43,10 +44,19 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
     protected var mLayer: T? = null
     protected var mHadFilter = false
 
+    protected var mExisting : Boolean? = null
+
     fun setSourceID(sourceID: String?) {
         mSourceID = sourceID
     }
 
+    fun checkID(): String? {
+        if (iD == null) {
+            Logger.w(LOG_TAG, "iD is null in layer")
+        }
+        return iD;
+    }
+
     fun setAboveLayerID(aboveLayerID: String?) {
         if (mAboveLayerID != null && mAboveLayerID == aboveLayerID) {
             return
@@ -76,7 +86,7 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
         mLayerIndex = layerIndex
         if (mLayer != null) {
             removeFromMap(mMapView!!)
-            addAtIndex(mLayerIndex!!)
+            addAtIndex(layerIndex)
         }
     }
 
@@ -121,6 +131,10 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
         }
     }
 
+    fun setExisting(existing: Boolean) {
+        mExisting = existing
+    }
+
     fun add() {
         if (!hasInitialized()) {
             return
@@ -175,7 +189,7 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
         if (!hasInitialized()) {
             return
         }
-        if (style == null) return
+        val style = this.style ?: return
         val layerSize = style!!.styleLayers.size
         if (index >= layerSize) {
             FLog.e(
@@ -184,13 +198,16 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
             )
             index = layerSize - 1
         }
-        style!!.addLayerAt(mLayer!!, index)
-        mMapView!!.layerAdded(mLayer!!)
+        val layer = mLayer ?: return
+        val mapView = mMapView ?: return
+        style.addLayerAt(layer, index)
+        mapView.layerAdded(layer)
     }
 
     protected fun insertLayer() {
-        if (style == null) return
-        if (style!!.getLayer(iD!!) != null) {
+        val style = this.style ?: return
+        val id = checkID() ?: return
+        if (style.styleLayerExists(id)) {
             return  // prevent adding a layer twice
         }
         if (mAboveLayerID != null) {
@@ -218,8 +235,8 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
         // override if you want to update the filter
     }
 
-    private fun getLayerAs(style: Style?, id: String?): T? {
-        val result = style!!.getLayer(iD!!)
+    private fun getLayerAs(style: Style, id: String?): T? {
+        val result = style.getLayer(iD!!)
         return try {
             result as T?
         } catch (exception: ClassCastException) {
@@ -230,14 +247,24 @@ abstract class RCTLayer<T : Layer?>(protected var mContext: Context) : AbstractS
     override fun addToMap(mapView: RCTMGLMapView) {
         super.addToMap(mapView)
         mMap = mapView.getMapboxMap()
-        if (style == null) return
-        val existingLayer = getLayerAs(style, iD)
+        val style = style ?: return
+        val id = checkID() ?: return
+
+        val exists = style.styleLayerExists(id)
+        var existingLayer: T? = null;
+        if (exists) {
+            if (mExisting == null) {
+                Logger.e(LOG_TAG, "Layer $id seems to refer to an existing layer but existing flag is not specified, this is deprecated")
+            }
+            existingLayer = getLayerAs(style, id)
+        }
         if (existingLayer != null) {
             mLayer = existingLayer
         } else {
             mLayer = makeLayer()
             insertLayer()
         }
+
         addStyles()
         if (mFilter != null) {
             mHadFilter = true

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

@@ -0,0 +1,21 @@
+package com.mapbox.rctmgl.components.styles.layers
+
+import android.content.Context
+import com.mapbox.maps.extension.style.layers.generated.BackgroundLayer
+import com.mapbox.rctmgl.components.styles.RCTMGLStyle
+import com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory
+
+class RCTMGLBackgroundLayer(context: Context?) : RCTLayer<BackgroundLayer?>(
+    context!!
+) {
+    override fun makeLayer(): BackgroundLayer {
+        return BackgroundLayer(iD!!)
+    }
+
+    override fun addStyles() {
+        RCTMGLStyleFactory.setBackgroundLayerStyle(
+            mLayer,
+            RCTMGLStyle(context, mReactStyle, mMap!!)
+        )
+    }
+}

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

@@ -0,0 +1,65 @@
+package com.mapbox.rctmgl.components.styles.layers
+
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+class RCTMGLBackgroundLayerManager : ViewGroupManager<RCTMGLBackgroundLayer>() {
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): RCTMGLBackgroundLayer {
+        return RCTMGLBackgroundLayer(reactContext)
+    }
+
+    @ReactProp(name = "id")
+    fun setId(layer: RCTMGLBackgroundLayer, id: String?) {
+        layer.iD = id
+    }
+
+    @ReactProp(name = "existing")
+    fun setExisting(layer: RCTMGLBackgroundLayer, existing: Boolean) {
+        layer.setExisting(existing)
+    }
+
+    @ReactProp(name = "sourceID")
+    fun setSourceID(layer: RCTMGLBackgroundLayer, sourceID: String?) {
+        layer.setSourceID(sourceID)
+    }
+
+    @ReactProp(name = "aboveLayerID")
+    fun setAboveLayerID(layer: RCTMGLBackgroundLayer, aboveLayerID: String?) {
+        layer.setAboveLayerID(aboveLayerID)
+    }
+
+    @ReactProp(name = "belowLayerID")
+    fun setBelowLayerID(layer: RCTMGLBackgroundLayer, belowLayerID: String?) {
+        layer.setBelowLayerID(belowLayerID)
+    }
+
+    @ReactProp(name = "layerIndex")
+    fun setLayerIndex(layer: RCTMGLBackgroundLayer, layerIndex: Int) {
+        layer.setLayerIndex(layerIndex)
+    }
+
+    @ReactProp(name = "minZoomLevel")
+    fun setMinZoomLevel(layer: RCTMGLBackgroundLayer, minZoomLevel: Double) {
+        layer.setMinZoomLevel(minZoomLevel)
+    }
+
+    @ReactProp(name = "maxZoomLevel")
+    fun setMaxZoomLevel(layer: RCTMGLBackgroundLayer, maxZoomLevel: Double) {
+        layer.setMaxZoomLevel(maxZoomLevel)
+    }
+
+    @ReactProp(name = "reactStyle")
+    fun setReactStyle(layer: RCTMGLBackgroundLayer, style: ReadableMap?) {
+        layer.setReactStyle(style)
+    }
+
+    companion object {
+        const val REACT_CLASS = "RCTMGLBackgroundLayer"
+    }
+}

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

@@ -0,0 +1,40 @@
+package com.mapbox.rctmgl.components.styles.layers
+
+import android.content.Context
+import com.mapbox.maps.extension.style.expressions.generated.Expression
+import com.mapbox.maps.extension.style.layers.generated.CircleLayer
+import com.mapbox.rctmgl.components.mapview.RCTMGLMapView
+import com.mapbox.rctmgl.components.styles.RCTMGLStyle
+import com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory
+
+class RCTMGLCircleLayer(context: Context?) : RCTLayer<CircleLayer?>(
+    context!!
+) {
+    private var mSourceLayerID: String? = null
+    override fun updateFilter(expression: Expression?) {
+        mLayer!!.filter(expression!!)
+    }
+
+    override fun addToMap(mapView: RCTMGLMapView) {
+        super.addToMap(mapView)
+    }
+
+    override fun makeLayer(): CircleLayer {
+        val layer = CircleLayer(iD!!, mSourceID!!)
+        if (mSourceLayerID != null) {
+            layer.sourceLayer(mSourceLayerID!!)
+        }
+        return layer
+    }
+
+    override fun addStyles() {
+        RCTMGLStyleFactory.setCircleLayerStyle(mLayer, RCTMGLStyle(context, mReactStyle, mMap!!))
+    }
+
+    fun setSourceLayerID(sourceLayerID: String?) {
+        mSourceLayerID = sourceLayerID
+        if (mLayer != null) {
+            mLayer!!.sourceLayer(sourceLayerID!!)
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+package com.mapbox.rctmgl.components.styles.layers
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+class RCTMGLCircleLayerManager : ViewGroupManager<RCTMGLCircleLayer>() {
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): RCTMGLCircleLayer {
+        return RCTMGLCircleLayer(reactContext)
+    }
+
+    @ReactProp(name = "id")
+    fun setId(layer: RCTMGLCircleLayer, id: String?) {
+        layer.iD = id
+    }
+
+    @ReactProp(name = "existing")
+    fun setExisting(layer: RCTMGLCircleLayer, existing: Boolean) {
+        layer.setExisting(existing)
+    }
+
+    @ReactProp(name = "sourceID")
+    fun setSourceID(layer: RCTMGLCircleLayer, sourceID: String?) {
+        layer.setSourceID(sourceID)
+    }
+
+    @ReactProp(name = "aboveLayerID")
+    fun setAboveLayerID(layer: RCTMGLCircleLayer, aboveLayerID: String?) {
+        layer.setAboveLayerID(aboveLayerID)
+    }
+
+    @ReactProp(name = "belowLayerID")
+    fun setBelowLayerID(layer: RCTMGLCircleLayer, belowLayerID: String?) {
+        layer.setBelowLayerID(belowLayerID)
+    }
+
+    @ReactProp(name = "layerIndex")
+    fun setLayerIndex(layer: RCTMGLCircleLayer, layerIndex: Int) {
+        layer.setLayerIndex(layerIndex)
+    }
+
+    @ReactProp(name = "minZoomLevel")
+    fun setMinZoomLevel(layer: RCTMGLCircleLayer, minZoomLevel: Double) {
+        layer.setMinZoomLevel(minZoomLevel)
+    }
+
+    @ReactProp(name = "maxZoomLevel")
+    fun setMaxZoomLevel(layer: RCTMGLCircleLayer, maxZoomLevel: Double) {
+        layer.setMaxZoomLevel(maxZoomLevel)
+    }
+
+    @ReactProp(name = "reactStyle")
+    fun setReactStyle(layer: RCTMGLCircleLayer, style: ReadableMap?) {
+        layer.setReactStyle(style)
+    }
+
+    @ReactProp(name = "sourceLayerID")
+    fun setSourceLayerId(layer: RCTMGLCircleLayer, sourceLayerID: String?) {
+        layer.setSourceLayerID(sourceLayerID)
+    }
+
+    @ReactProp(name = "filter")
+    fun setFilter(layer: RCTMGLCircleLayer, filterList: ReadableArray?) {
+        layer.setFilter(filterList)
+    }
+
+    companion object {
+        const val REACT_CLASS = "RCTMGLCircleLayer"
+    }
+}

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

@@ -0,0 +1,43 @@
+package com.mapbox.rctmgl.components.styles.layers
+
+import android.content.Context
+import com.mapbox.maps.extension.style.expressions.generated.Expression
+import com.mapbox.maps.extension.style.layers.generated.FillExtrusionLayer
+import com.mapbox.rctmgl.components.mapview.RCTMGLMapView
+import com.mapbox.rctmgl.components.styles.RCTMGLStyle
+import com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory
+
+class RCTMGLFillExtrusionLayer(context: Context?) : RCTLayer<FillExtrusionLayer?>(
+    context!!
+) {
+    private var mSourceLayerID: String? = null
+    override fun updateFilter(expression: Expression?) {
+        mLayer!!.filter(expression!!)
+    }
+
+    override fun addToMap(mapView: RCTMGLMapView) {
+        super.addToMap(mapView)
+    }
+
+    override fun makeLayer(): FillExtrusionLayer {
+        val layer = FillExtrusionLayer(iD!!, mSourceID!!)
+        if (mSourceLayerID != null) {
+            layer.sourceLayer(mSourceLayerID!!)
+        }
+        return layer
+    }
+
+    override fun addStyles() {
+        RCTMGLStyleFactory.setFillExtrusionLayerStyle(
+            mLayer,
+            RCTMGLStyle(context, mReactStyle, mMap!!)
+        )
+    }
+
+    fun setSourceLayerID(sourceLayerID: String?) {
+        mSourceLayerID = sourceLayerID
+        if (mLayer != null) {
+            mLayer!!.sourceLayer(mSourceLayerID!!)
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+package com.mapbox.rctmgl.components.styles.layers
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+class RCTMGLFillExtrusionLayerManager : ViewGroupManager<RCTMGLFillExtrusionLayer>() {
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): RCTMGLFillExtrusionLayer {
+        return RCTMGLFillExtrusionLayer(reactContext)
+    }
+
+    @ReactProp(name = "id")
+    fun setId(layer: RCTMGLFillExtrusionLayer, id: String?) {
+        layer.iD = id
+    }
+
+    @ReactProp(name = "existing")
+    fun setExisting(layer: RCTMGLFillExtrusionLayer, existing: Boolean) {
+        layer.setExisting(existing)
+    }
+
+    @ReactProp(name = "sourceID")
+    fun setSourceID(layer: RCTMGLFillExtrusionLayer, sourceID: String?) {
+        layer.setSourceID(sourceID)
+    }
+
+    @ReactProp(name = "aboveLayerID")
+    fun setAboveLayerID(layer: RCTMGLFillExtrusionLayer, aboveLayerID: String?) {
+        layer.setAboveLayerID(aboveLayerID)
+    }
+
+    @ReactProp(name = "belowLayerID")
+    fun setBelowLayerID(layer: RCTMGLFillExtrusionLayer, belowLayerID: String?) {
+        layer.setBelowLayerID(belowLayerID)
+    }
+
+    @ReactProp(name = "layerIndex")
+    fun setLayerIndex(layer: RCTMGLFillExtrusionLayer, layerIndex: Int) {
+        layer.setLayerIndex(layerIndex)
+    }
+
+    @ReactProp(name = "minZoomLevel")
+    fun setMinZoomLevel(layer: RCTMGLFillExtrusionLayer, minZoomLevel: Double) {
+        layer.setMinZoomLevel(minZoomLevel)
+    }
+
+    @ReactProp(name = "maxZoomLevel")
+    fun setMaxZoomLevel(layer: RCTMGLFillExtrusionLayer, maxZoomLevel: Double) {
+        layer.setMaxZoomLevel(maxZoomLevel)
+    }
+
+    @ReactProp(name = "reactStyle")
+    fun setReactStyle(layer: RCTMGLFillExtrusionLayer, style: ReadableMap?) {
+        layer.setReactStyle(style)
+    }
+
+    @ReactProp(name = "sourceLayerID")
+    fun setSourceLayerId(layer: RCTMGLFillExtrusionLayer, sourceLayerID: String?) {
+        layer.setSourceLayerID(sourceLayerID)
+    }
+
+    @ReactProp(name = "filter")
+    fun setFilter(layer: RCTMGLFillExtrusionLayer, filterList: ReadableArray?) {
+        layer.setFilter(filterList)
+    }
+
+    companion object {
+        const val REACT_CLASS = "RCTMGLFillExtrusionLayer"
+    }
+}

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

@@ -0,0 +1,40 @@
+package com.mapbox.rctmgl.components.styles.layers
+
+import android.content.Context
+import com.mapbox.maps.extension.style.expressions.generated.Expression
+import com.mapbox.maps.extension.style.layers.generated.FillLayer
+import com.mapbox.rctmgl.components.mapview.RCTMGLMapView
+import com.mapbox.rctmgl.components.styles.RCTMGLStyle
+import com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory
+
+class RCTMGLFillLayer(context: Context?) : RCTLayer<FillLayer?>(
+    context!!
+) {
+    private var mSourceLayerID: String? = null
+    override fun updateFilter(expression: Expression?) {
+        mLayer!!.filter(expression!!)
+    }
+
+    override fun addToMap(mapView: RCTMGLMapView) {
+        super.addToMap(mapView)
+    }
+
+    override fun makeLayer(): FillLayer {
+        val layer = FillLayer(iD!!, mSourceID!!)
+        if (mSourceLayerID != null) {
+            layer.sourceLayer(mSourceLayerID!!)
+        }
+        return layer
+    }
+
+    override fun addStyles() {
+        RCTMGLStyleFactory.setFillLayerStyle(mLayer, RCTMGLStyle(context, mReactStyle, mMap!!))
+    }
+
+    fun setSourceLayerID(sourceLayerID: String?) {
+        mSourceLayerID = sourceLayerID
+        if (mLayer != null) {
+            mLayer!!.sourceLayer(mSourceLayerID!!)
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+package com.mapbox.rctmgl.components.styles.layers
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+class RCTMGLFillLayerManager : ViewGroupManager<RCTMGLFillLayer>() {
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): RCTMGLFillLayer {
+        return RCTMGLFillLayer(reactContext)
+    }
+
+    @ReactProp(name = "id")
+    fun setId(layer: RCTMGLFillLayer, id: String?) {
+        layer.iD = id
+    }
+
+    @ReactProp(name = "existing")
+    fun setExisting(layer: RCTMGLFillLayer, existing: Boolean) {
+        layer.setExisting(existing)
+    }
+
+    @ReactProp(name = "sourceID")
+    fun setSourceID(layer: RCTMGLFillLayer, sourceID: String?) {
+        layer.setSourceID(sourceID)
+    }
+
+    @ReactProp(name = "sourceLayerID")
+    fun setSourceLayerId(layer: RCTMGLFillLayer, sourceLayerID: String?) {
+        layer.setSourceLayerID(sourceLayerID)
+    }
+
+    @ReactProp(name = "aboveLayerID")
+    fun setAboveLayerID(layer: RCTMGLFillLayer, aboveLayerID: String?) {
+        layer.setAboveLayerID(aboveLayerID)
+    }
+
+    @ReactProp(name = "belowLayerID")
+    fun setBelowLayerID(layer: RCTMGLFillLayer, belowLayerID: String?) {
+        layer.setBelowLayerID(belowLayerID)
+    }
+
+    @ReactProp(name = "layerIndex")
+    fun setLayerIndex(layer: RCTMGLFillLayer, layerIndex: Int) {
+        layer.setLayerIndex(layerIndex)
+    }
+
+    @ReactProp(name = "minZoomLevel")
+    fun setMinZoomLevel(layer: RCTMGLFillLayer, minZoomLevel: Double) {
+        layer.setMinZoomLevel(minZoomLevel)
+    }
+
+    @ReactProp(name = "maxZoomLevel")
+    fun setMaxZoomLevel(layer: RCTMGLFillLayer, maxZoomLevel: Double) {
+        layer.setMaxZoomLevel(maxZoomLevel)
+    }
+
+    @ReactProp(name = "reactStyle")
+    fun setReactStyle(layer: RCTMGLFillLayer, style: ReadableMap?) {
+        layer.setReactStyle(style)
+    }
+
+    @ReactProp(name = "filter")
+    fun setFilter(layer: RCTMGLFillLayer, filterList: ReadableArray?) {
+        layer.setFilter(filterList)
+    }
+
+    companion object {
+        const val REACT_CLASS = "RCTMGLFillLayer"
+    }
+}