Added support for styles to be updated dynamically

javascript/components/AbstractLayer.js

@@ -1,12 +1,12 @@
-/* eslint react/prop-types: 0 */
 import React from 'react';
+import MapboxStyleSheet from '../utils/MapboxStyleSheet';
 
 class AbstractLayer extends React.Component {
   get baseProps () {
     return {
       id: this.props.id,
       sourceID: this.props.sourceID,
-      reactStyle: this.props.style,
+      reactStyle: this.getStyle(),
       minZoomLevel: this.props.minZoomLevel,
       maxZoomLevel: this.props.maxZoomLevel,
       aboveLayerID: this.props.aboveLayerID,
@@ -34,6 +34,18 @@ class AbstractLayer extends React.Component {
 
     return flattenedFilter.join(';');
   }
+
+  getStyle () {
+    if (!this.props.style) {
+      return;
+    }
+
+    if (MapboxStyleSheet.isStyleSheet(this.props.style)) {
+      return this.props.style;
+    }
+
+    return MapboxStyleSheet.create(this.props.style);
+  }
 }
 
 export default AbstractLayer;

javascript/components/VectorSource.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NativeModules, requireNativeComponent } from 'react-native';
+import { cloneReactChildrenWithProps } from '../utils';
 
 const MapboxGL = NativeModules.MGLModule;
 
@@ -36,7 +37,7 @@ class VectorSource extends React.Component {
     };
     return (
       <RCTMGLVectorSource {...props}>
-        {this.props.children}
+        {cloneReactChildrenWithProps(this.props.children, { sourceID: this.props.id })}
       </RCTMGLVectorSource>
     );
   }

javascript/index.js

@@ -4,10 +4,12 @@ import * as geoUtils from './utils/geoUtils';
 // components
 import MapView from './components/MapView';
 import MapboxStyleSheet from './utils/MapboxStyleSheet';
+import Light from './components/Light';
 
 // sources
 import VectorSource from './components/VectorSource';
 import ShapeSource from './components/ShapeSource';
+import RasterSource from './components/RasterSource';
 
 // layers
 import FillLayer from './components/FillLayer';
@@ -15,16 +17,20 @@ import FillExtrusionLayer from './components/FillExtrusionLayer';
 import LineLayer from './components/LineLayer';
 import CircleLayer from './components/CircleLayer';
 import SymbolLayer from './components/SymbolLayer';
+import RasterLayer from './components/RasterLayer';
+import BackgroundLayer from './components/BackgroundLayer';
 
 let MapboxGL = { ...NativeModules.MGLModule };
 
 // components
 MapboxGL.MapView = MapView;
 MapboxGL.StyleSheet = MapboxStyleSheet;
+MapboxGL.Light = Light;
 
 // sources
 MapboxGL.VectorSource = VectorSource;
 MapboxGL.ShapeSource = ShapeSource;
+MapboxGL.RasterSource = RasterSource;
 
 // layers
 MapboxGL.FillLayer = FillLayer;
@@ -32,6 +38,8 @@ MapboxGL.FillExtrusionLayer = FillExtrusionLayer;
 MapboxGL.LineLayer = LineLayer;
 MapboxGL.CircleLayer = CircleLayer;
 MapboxGL.SymbolLayer = SymbolLayer;
+MapboxGL.RasterLayer = RasterLayer;
+MapboxGL.BackgroundLayer = BackgroundLayer;
 
 // utils
 MapboxGL.geoUtils = geoUtils;

javascript/utils/MapboxStyleSheet.js

@@ -23,7 +23,7 @@ class MapStyleTransitionItem extends MapStyleItem {
         duration: duration,
         delay: delay,
       },
-      ...extras,
+      ...extras
     });
   }
 }
@@ -32,7 +32,7 @@ class MapStyleTranslationItem extends MapStyleItem {
   constructor (x, y, extras = {}) {
     super(StyleTypes.Translation, {
       value: [x, y],
-      ...extras,
+      ...extras
     });
   }
 }
@@ -80,7 +80,8 @@ class MapStyleFunctionItem extends MapStyleItem {
 function makeStyleValue (prop, value, extras = {}) {
   let item;
 
-  if (!isUndefined(value.type), !isUndefined(value.payload)) { // function
+  if (!isUndefined(value.type) && !isUndefined(value.payload)) { // function
+    console.log(prop, value);
     item = value;
     item.processStops(prop);
   } else if (styleMap[prop] === StyleTypes.Transition) {
@@ -123,10 +124,7 @@ class MapboxStyleSheet {
       style[styleProp] = makeStyleValue(styleProp, userStyle);
     }
 
-    if (depth === 0) {
-      style.__MAPBOX_STYLESHEET__ = true;
-    }
-
+    style.__MAPBOX_STYLESHEET__ = true;
     return style;
   }
 
@@ -161,6 +159,10 @@ class MapboxStyleSheet {
     return stylesheet.__MAPBOX_STYLESHEET__ || false;
   }
 
+  static isStyleItem (item) {
+    return item instanceof MapStyleItem;
+  }
+
   // helpers
 
   static identity (attrName) {