@rnmapbox/maps 10.0.0-beta.42 → 10.0.0-beta.44

package/index.d.ts

@@ -22,6 +22,7 @@ import {
   FeatureCollection,
 } from '@turf/helpers';
 
+import type { SymbolLayerStyleProps } from './javascript/utils/MapboxStyles';
 import {
   Camera as _Camera,
   CameraStop as _CameraStop,
@@ -38,6 +39,14 @@ import {
 import { MarkerView as _MarkerView } from './javascript/components/MarkerView';
 import { PointAnnotation as _PointAnnotation } from './javascript/components/PointAnnotation';
 import { Atmosphere as _Atmosphere } from './javascript/components/Atmosphere';
+import {
+  SymbolLayer as _SymbolLayer,
+  Props as _SymbolLayerProps,
+} from './javascript/components/SymbolLayer';
+import {
+  ShapeSource as _ShapeSource,
+  Props as _ShapeSourceProps,
+} from './javascript/components/ShapeSource';
 import type {
   MapboxGLEvent as _MapboxGLEvent,
   AnimatedPoint as _AnimatedPoint,
@@ -96,7 +105,7 @@ type AutoAlignment = Alignment | 'auto';
 
 type NamedStyles<T> = {
   [P in keyof T]:
-    | SymbolLayerStyle
+    | SymbolLayerStyleProps
     | RasterLayerStyle
     | LineLayerStyle
     | FillLayerStyle
@@ -142,6 +151,8 @@ declare namespace MapboxGL {
   const Atmosphere = _Atmosphere;
   const MarkerView = _MarkerView;
   const PointAnnotation = _PointAnnotation;
+  const SymbolLayer = _SymbolLayer;
+  const ShapeSource = _ShapeSource;
 
   type MapboxGLEvent = _MapboxGLEvent;
   type UserTrackingMode = _UserTrackingMode;
@@ -238,7 +249,7 @@ declare namespace MapboxGL {
 
   namespace Animated {
     // sources
-    class ShapeSource extends Component<ShapeSourceProps> {}
+    class ShapeSource extends Component<_ShapeSourceProps> {}
     class ImageSource extends Component<ImageSourceProps> {}
 
     // layers
@@ -246,7 +257,7 @@ declare namespace MapboxGL {
     class FillExtrusionLayer extends Component<FillExtrusionLayerProps> {}
     class LineLayer extends Component<LineLayerProps> {}
     class CircleLayer extends Component<CircleLayerProps> {}
-    class SymbolLayer extends Component<SymbolLayerProps> {}
+    class SymbolLayer extends Component<_SymbolLayerProps> {}
     class RasterLayer extends Component<RasterLayerProps> {}
     class BackgroundLayer extends Component<BackgroundLayerProps> {}
   }
@@ -358,33 +369,6 @@ declare namespace MapboxGL {
    * Sources
    */
   class VectorSource extends Component<VectorSourceProps> {}
-  class ShapeSource extends Component<ShapeSourceProps> {
-    features(
-      filter?: Expression,
-    ): Promise<FeatureCollection<Geometry, Properties>>;
-
-    getClusterExpansionZoom(
-      feature: Feature<Geometry, Properties> | number,
-    ): Promise<number>;
-    /**
-     * Returns all the leaves of a cluster with pagination support.
-     * @param cluster feature cluster
-     * @param limit the number of leaves to return
-     * @param offset the amount of points to skip (for pagination)
-     */
-    getClusterLeaves: (
-      feature: Feature<Geometry, Properties> | number,
-      limit: number,
-      offset: number,
-    ) => Promise<FeatureCollection<Geometry, Properties>>;
-    /**
-     * Returns the children of a cluster (on the next zoom level).
-     * @param cluster feature cluster
-     */
-    getClusterChildren: (
-      feature: Feature<Geometry, Properties> | number,
-    ) => Promise<FeatureCollection<Geometry, Properties>>;
-  }
   class RasterSource extends Component<RasterSourceProps> {}
   class RasterDemSource extends Component<RasterSourceProps> {}
 
@@ -397,7 +381,6 @@ declare namespace MapboxGL {
   class FillLayer extends Component<FillLayerProps> {}
   class LineLayer extends Component<LineLayerProps> {}
   class RasterLayer extends Component<RasterLayerProps> {}
-  class SymbolLayer extends Component<SymbolLayerProps> {}
   class HeatmapLayer extends Component<HeatmapLayerProps> {}
   class Images extends Component<ImagesProps> {}
   class ImageSource extends Component<ImageSourceProps> {}
@@ -752,75 +735,8 @@ export type TextVariableAnchorValues =
   | 'bottom-left'
   | 'bottom-right';
 
-export interface SymbolLayerStyle {
-  symbolPlacement?: 'point' | 'line' | Expression;
-  symbolSpacing?: number | Expression;
-  symbolAvoidEdges?: boolean | Expression;
-  symbolSortKey?: number | Expression;
-  symbolZOrder?: 'auto' | 'viewport-y' | 'source' | Expression;
-  iconAllowOverlap?: boolean | Expression;
-  iconIgnorePlacement?: boolean | Expression;
-  iconOptional?: boolean | Expression;
-  iconRotationAlignment?: AutoAlignment | Expression;
-  iconSize?: number | Expression;
-  iconTextFit?: 'none' | 'width' | 'height' | 'both' | Expression;
-  iconTextFitPadding?: Array<number> | Expression;
-  iconImage?: string | Expression;
-  iconRotate?: number | Expression;
-  iconPadding?: number | Expression;
-  iconKeepUpright?: boolean | Expression;
-  iconOffset?: Array<number> | Expression;
-  iconAnchor?: Anchor | Expression;
-  iconPitchAlignment?: AutoAlignment | Expression;
-  textPitchAlignment?: AutoAlignment | Expression;
-  textRotationAlignment?: AutoAlignment | Expression;
-  textField?: string | Expression;
-  textFont?: Array<string> | Expression;
-  textSize?: number | Expression;
-  textMaxWidth?: number | Expression;
-  textLineHeight?: number | Expression;
-  textLetterSpacing?: number | Expression;
-  textJustify?: 'left' | 'center' | 'right' | Expression;
-  textAnchor?: Anchor | Expression;
-  textMaxAngle?: number | Expression;
-  textRotate?: number | Expression;
-  textPadding?: number | Expression;
-  textKeepUpright?: boolean | Expression;
-  textTransform?: 'none' | 'uppercase' | 'lowercase' | Expression;
-  textOffset?: Array<number> | Expression;
-  textAllowOverlap?: boolean | Expression;
-  textIgnorePlacement?: boolean | Expression;
-  textOptional?: boolean | Expression;
-  textVariableAnchor?: Array<TextVariableAnchorValues>;
-  textRadialOffset?: number | Expression;
-  visibility?: Visibility | Expression;
-  iconOpacity?: number | Expression;
-  iconOpacityTransition?: Transition | Expression;
-  iconColor?: string | Expression;
-  iconColorTransition?: Transition | Expression;
-  iconHaloColor?: string | Expression;
-  iconHaloColorTransition?: Transition | Expression;
-  iconHaloWidth?: number | Expression;
-  iconHaloWidthTransition?: Transition | Expression;
-  iconHaloBlur?: number | Expression;
-  iconHaloBlurTransition?: Transition | Expression;
-  iconTranslate?: Array<number> | Expression;
-  iconTranslateTransition?: Transition | Expression;
-  iconTranslateAnchor?: Alignment | Expression;
-  textOpacity?: number | Expression;
-  textOpacityTransition?: Transition | Expression;
-  textColor?: string | Expression;
-  textColorTransition?: Transition | Expression;
-  textHaloColor?: string | Expression;
-  textHaloColorTransition?: Transition | Expression;
-  textHaloWidth?: number | Expression;
-  textHaloWidthTransition?: Transition | Expression;
-  textHaloBlur?: number | Expression;
-  textHaloBlurTransition?: Transition | Expression;
-  textTranslate?: Array<number> | Expression;
-  textTranslateTransition?: Transition | Expression;
-  textTranslateAnchor?: Alignment | Expression;
-}
+/** @deprecated Will be removed in next betas */
+export type SymbolLayerStyle = SymbolLayerStyleProps;
 
 export interface HeatmapLayerStyle {
   visibility?: Visibility | Expression;
@@ -872,30 +788,6 @@ export interface VectorSourceProps extends TileSourceProps {
   };
 }
 
-export interface ShapeSourceProps extends ViewProps {
-  id: string;
-  url?: string;
-  shape?:
-    | GeoJSON.GeometryCollection
-    | GeoJSON.Feature
-    | GeoJSON.FeatureCollection
-    | GeoJSON.Geometry;
-  cluster?: boolean;
-  clusterRadius?: number;
-  clusterMaxZoomLevel?: number;
-  clusterProperties?: object;
-  maxZoomLevel?: number;
-  buffer?: number;
-  tolerance?: number;
-  lineMetrics?: boolean;
-  images?: { assets?: string[] } & { [key: string]: ImageSourcePropType };
-  onPress?: (event: OnPressEvent) => void;
-  hitbox?: {
-    width: number;
-    height: number;
-  };
-}
-
 export interface RasterSourceProps extends TileSourceProps {
   tileSize?: number;
 }
@@ -937,10 +829,6 @@ export interface RasterLayerProps extends LayerBaseProps {
   style?: StyleProp<RasterLayerStyle>;
 }
 
-export interface SymbolLayerProps extends LayerBaseProps {
-  style?: StyleProp<SymbolLayerStyle>;
-}
-
 export interface HeatmapLayerProps extends LayerBaseProps {
   style?: StyleProp<HeatmapLayerStyle>;
 }

package/ios/RCTMGL-v10/RCTMGLCamera.swift

@@ -1,8 +1,8 @@
 import Foundation
-@_spi(Experimental) import MapboxMaps
+import MapboxMaps
 import Turf
 
-protocol RCTMGLMapComponent : class {
+protocol RCTMGLMapComponent : AnyObject {
   func addToMap(_ map: RCTMGLMapView, style: Style)
   func removeFromMap(_ map: RCTMGLMapView)
   
@@ -14,7 +14,7 @@ enum CameraMode: String, CaseIterable {
 }
 
 enum UserTrackingMode: String {
-  case none,compass, course, normal
+  case none, compass, course, normal
 }
 
 struct CameraUpdateItem {
@@ -29,10 +29,7 @@ struct CameraUpdateItem {
       }
       switch mode {
         case .flight:
-          var _camera = camera
-          _camera.padding = nil
-          map.camera.fly(to: _camera, duration: duration)
-          changePadding(map: map, cameraAnimator: &cameraAnimator, curve: .linear)
+          map.camera.fly(to: camera, duration: duration)
         case .ease:
           map.camera.ease(to: camera, duration: duration ?? 0, curve: .easeInOut, completion: nil)
         case .linear:
@@ -42,18 +39,6 @@ struct CameraUpdateItem {
       }
     }
   }
-  
-  /// Padding is not currently animatable on the camera's `fly(to:)` method, so we create a separate animator instead.
-  /// If this changes, remove this and call `fly(to:)` with an unmodified `camera`.
-  func changePadding(map: RCTMGLMapView, cameraAnimator: inout BasicCameraAnimator?, curve: UIView.AnimationCurve) {
-    if let cameraAnimator = cameraAnimator {
-      cameraAnimator.stopAnimation()
-    }
-    cameraAnimator = map.camera.makeAnimator(duration: duration ?? 0, curve: curve) { (transition) in
-      transition.padding.toValue = camera.padding
-    }
-    cameraAnimator?.startAnimation()
-  }
 }
 
 class CameraUpdateQueue {
@@ -203,7 +188,7 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
 
   func _updateCameraFromTrackingMode() {
     withMapView { map in
-      let userTrackingMode = UserTrackingMode(rawValue: self.followUserMode ?? "none")
+      let userTrackingMode = UserTrackingMode(rawValue: self.followUserMode ?? UserTrackingMode.normal.rawValue)
       guard let userTrackingMode = userTrackingMode else {
         Logger.error("RCTMGLCamera: Unexpected followUserMode \(optional: self.followUserMode)")
         self._disableUsetTracking(map)
@@ -454,7 +439,6 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
   }
 }
 
-/// Converts milliseconds to seconds.
 private func toSeconds(_ ms: Double) -> TimeInterval {
   return ms * 0.001
 }

package/ios/install.md

@@ -56,10 +56,11 @@ Add the following to the beginning of your podfile
 $RNMapboxMapsImpl = 'mapbox'
 ```
 
-You can also specify the version to use. *Warning:* if you set a version, then later update, the `rnamapbox/maps` library it's possible that you'll end up using Mapbox older version than supported. Make sure you revise this value with `rnmapbox/maps` updates.
+You can also override the version to use. *Warning:* if you set a version, then later update, the `rnamapbox/maps` library it's possible that you'll end up using Mapbox older version than supported. Make sure you revise this value with `rnmapbox/maps` updates.
 
 ```ruby
-$RNMapboxMapsVersion = '~> 10.9.0'
+# Warning: only for advanced use cases, only do this if you know what you're doing.
+# $RNMapboxMapsVersion = '~> 10.9.0'
 ```
 
 You will need to authorize your download of the Maps SDK with a secret access token with the `DOWNLOADS:READ` scope. This [guide](https://docs.mapbox.com/ios/maps/guides/install/#configure-credentials) explains how to configure the secret token under section `Configure your secret token`.

package/javascript/components/AbstractLayer.tsx

@@ -0,0 +1,72 @@
+/* eslint react/prop-types:0  */
+import React from 'react';
+import { NativeMethods, processColor } from 'react-native';
+
+import { getFilter } from '../utils/filterUtils';
+import { transformStyle } from '../utils/StyleValue';
+import { AllLayerStyleProps } from '../utils/MapboxStyles';
+
+type PropsBase = {
+  id: string;
+  sourceID?: string;
+  minZoomLevel?: number;
+  maxZoomLevel?: number;
+  aboveLayerID?: string;
+  belowLayerID?: string;
+  layerIndex?: number;
+  filter?: string[];
+  style: AllLayerStyleProps;
+};
+
+class AbstractLayer<
+  PropsType extends PropsBase,
+  NativePropsType,
+> extends React.PureComponent<PropsType> {
+  get baseProps(): PropsType {
+    return {
+      ...this.props,
+      id: this.props.id,
+      sourceID: this.props.sourceID,
+      reactStyle: this.getStyle(this.props.style),
+      minZoomLevel: this.props.minZoomLevel,
+      maxZoomLevel: this.props.maxZoomLevel,
+      aboveLayerID: this.props.aboveLayerID,
+      belowLayerID: this.props.belowLayerID,
+      layerIndex: this.props.layerIndex,
+      filter: getFilter(this.props.filter),
+      style: undefined,
+    };
+  }
+
+  nativeLayer:
+    | (React.Component<NativePropsType> & Readonly<NativeMethods>)
+    | undefined = undefined;
+
+  setNativeLayer = (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) => {
+    this.nativeLayer = instance;
+  };
+
+  getStyleTypeFormatter(styleType: string) {
+    if (styleType === 'color') {
+      return processColor;
+    }
+  }
+
+  getStyle(style: AllLayerStyleProps) {
+    return transformStyle(style);
+  }
+
+  setNativeProps(props: { [key: string]: unknown }) {
+    if (this.nativeLayer) {
+      let propsToPass = props;
+      if (props.style) {
+        propsToPass = { ...props, reactStyle: this.getStyle(props.style) };
+      }
+      this.nativeLayer?.setNativeProps(propsToPass);
+    }
+  }
+}
+
+export default AbstractLayer;

package/javascript/components/AbstractSource.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { NativeMethods } from 'react-native';
+
+class AbstractSource<
+  PropsType,
+  NativePropsType extends object,
+> extends React.PureComponent<PropsType> {
+  _nativeRef?: React.Component<NativePropsType> & Readonly<NativeMethods>;
+
+  setNativeProps(props: NativePropsType) {
+    if (this._nativeRef) {
+      this._nativeRef.setNativeProps(props);
+    }
+  }
+
+  setNativeRef: (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) => void = (instance) => {
+    this._nativeRef = instance;
+  };
+}
+
+export default AbstractSource;

package/javascript/components/BackgroundLayer.js

@@ -79,7 +79,7 @@ class BackgroundLayer extends AbstractLayer {
     return (
       <RCTMGLBackgroundLayer
         testID="rctmglBackgroundLayer"
-        ref="nativeLayer"
+        ref={this.setNativeLayer}
         {...this.baseProps}
       />
     );

package/javascript/components/CircleLayer.js

@@ -83,7 +83,7 @@ class CircleLayer extends AbstractLayer {
     return (
       <RCTMGLCircleLayer
         testID="rctmglCircleLayer"
-        ref="nativeLayer"
+        ref={this.setNativeLayer}
         {...this.baseProps}
       />
     );

package/javascript/components/FillExtrusionLayer.js

@@ -83,7 +83,7 @@ class FillExtrusionLayer extends AbstractLayer {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLFillExtrusionLayer ref="nativeLayer" {...props} />;
+    return <RCTMGLFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 

package/javascript/components/FillLayer.js

@@ -83,7 +83,7 @@ class FillLayer extends AbstractLayer {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLFillLayer ref="nativeLayer" {...props} />;
+    return <RCTMGLFillLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 

package/javascript/components/{HeadingIndicator.js → HeadingIndicator.tsx}

@@ -1,18 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import headingIcon from '../../assets/heading.png';
 
-import SymbolLayer from './SymbolLayer';
+import { SymbolLayer } from './SymbolLayer';
 
 const style = {
   iconImage: headingIcon,
   iconAllowOverlap: true,
   iconPitchAlignment: 'map',
   iconRotationAlignment: 'map',
+} as const;
+
+type Props = {
+  heading?: number;
 };
 
-const HeadingIndicator = (heading) => (
+const HeadingIndicator = ({ heading }: Props) => (
   <SymbolLayer
     key="mapboxUserLocationHeadingIndicator"
     id="mapboxUserLocationHeadingIndicator"
@@ -24,8 +27,4 @@ const HeadingIndicator = (heading) => (
   />
 );
 
-HeadingIndicator.propTypes = {
-  heading: PropTypes.number,
-};
-
 export default HeadingIndicator;

package/javascript/components/HeatmapLayer.js

@@ -84,7 +84,7 @@ class HeatmapLayer extends AbstractLayer {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLHeatmapLayer ref="nativeLayer" {...props} />;
+    return <RCTMGLHeatmapLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 

package/javascript/components/Images.js

@@ -4,7 +4,7 @@ import { requireNativeComponent, Image } from 'react-native';
 
 import { viewPropTypes } from '../utils';
 
-import ShapeSource from './ShapeSource';
+import { ShapeSource } from './ShapeSource';
 
 export const NATIVE_MODULE_NAME = 'RCTMGLImages';
 

package/javascript/components/LineLayer.js

@@ -83,7 +83,7 @@ class LineLayer extends AbstractLayer {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLLineLayer ref="nativeLayer" {...props} />;
+    return <RCTMGLLineLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 

package/javascript/components/MapView.js

@@ -42,7 +42,10 @@ const defaultStyleURL = MapboxGL.StyleURL.Street;
 /**
  * MapView backed by Mapbox Native GL
  */
-class MapView extends NativeBridgeComponent(React.Component) {
+class MapView extends NativeBridgeComponent(
+  React.Component,
+  NATIVE_MODULE_NAME,
+) {
   static propTypes = {
     ...viewPropTypes,
 
@@ -306,7 +309,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
   };
 
   constructor(props) {
-    super(props, NATIVE_MODULE_NAME);
+    super(props);
 
     this.logger = Logger.sharedInstance();
     this.logger.start();

package/javascript/components/MarkerView.tsx

@@ -97,6 +97,7 @@ class MarkerView extends React.PureComponent<{
             <RCTMGLMarkerViewWrapper
               style={{
                 alignSelf: 'flex-start',
+                position: 'absolute',
               }}
             >
               {child}

package/javascript/components/NativeBridgeComponent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { runNativeCommand, isAndroid } from '../utils';
+import { type NativeArg, runNativeCommand, isAndroid } from '../utils';
 
 let callbackIncrement = 0;
 
@@ -9,18 +9,24 @@ export type RNMBEvent<PayloadType = { [key: string]: string }> = {
   type: string;
 };
 
-const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
-  class extends B {
+const NativeBridgeComponent = <
+  Props extends object,
+  BaseComponent extends new (...ags: any[]) => React.Component<Props>,
+>(
+  Base: BaseComponent,
+  nativeModuleName: string,
+) =>
+  class extends Base {
     _nativeModuleName: string;
     _onAndroidCallback: (e: any) => void;
     _callbackMap: Map<string, any>;
     _preRefMapMethodQueue: Array<{
-      method: { name: string; args: Array<string> };
-      resolver: (value: unknown) => void;
+      method: { name: string; args: NativeArg[] };
+      resolver: (value: NativeArg) => void;
     }>;
 
-    constructor(props: T, nativeModuleName: string) {
-      super(props);
+    constructor(...args: any[]) {
+      super(...args);
 
       this._nativeModuleName = nativeModuleName;
       this._onAndroidCallback = this._onAndroidCallbackO.bind(this);
@@ -28,9 +34,9 @@ const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
       this._preRefMapMethodQueue = [];
     }
 
-    _addAddAndroidCallback(
+    _addAddAndroidCallback<ReturnType>(
       id: string,
-      resolve: (value: string) => void,
+      resolve: (value: ReturnType) => void,
       reject: (error: Error) => void,
     ) {
       this._callbackMap.set(id, { resolve, reject });
@@ -74,16 +80,16 @@ const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
       }
     }
 
-    _runNativeCommand<RefType>(
+    _runNativeCommand<RefType, ReturnType = NativeArg>(
       methodName: string,
       nativeRef: RefType,
-      args: string[] = [],
-    ) {
+      args: NativeArg[] = [],
+    ): Promise<ReturnType> {
       if (!nativeRef) {
-        return new Promise((resolve) => {
+        return new Promise<ReturnType>((resolve) => {
           this._preRefMapMethodQueue.push({
             method: { name: methodName, args },
-            resolver: resolve,
+            resolver: resolve as (args: NativeArg) => void,
           });
         });
       }

package/javascript/components/PointAnnotation.tsx

@@ -120,6 +120,7 @@ type PointAnnotationProps = {
  */
 class PointAnnotation extends NativeBridgeComponent(
   React.PureComponent<PointAnnotationProps>,
+  NATIVE_MODULE_NAME,
 ) {
   static defaultProps = {
     anchor: { x: 0.5, y: 0.5 },
@@ -129,7 +130,7 @@ class PointAnnotation extends NativeBridgeComponent(
   _nativeRef: NativePointAnnotationRef | null = null;
 
   constructor(props: PointAnnotationProps) {
-    super(props, NATIVE_MODULE_NAME);
+    super(props);
     this._onSelected = this._onSelected.bind(this);
     this._onDeselected = this._onDeselected.bind(this);
     this._onDragStart = this._onDragStart.bind(this);

package/javascript/components/RasterLayer.js

@@ -80,7 +80,7 @@ class RasterLayer extends AbstractLayer {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLRasterLayer ref="nativeLayer" {...props} />;
+    return <RCTMGLRasterLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 

package/javascript/components/RasterSource.js

@@ -107,7 +107,7 @@ class RasterSource extends AbstractSource {
       attribution: this.props.attribution,
     };
     return (
-      <RCTMGLRasterSource ref="nativeSource" {...props}>
+      <RCTMGLRasterSource ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}