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>
     );
   }