@maplibre/maplibre-react-native 10.0.0-alpha.7 → 10.0.0-alpha.9

package/javascript/components/Style.tsx

@@ -1,30 +1,30 @@
-import {ExpressionField, FilterExpression} from '../utils/MaplibreStyles';
-import {BaseLayerProps} from '../hooks/useAbstractLayer';
-
-import CircleLayer from './CircleLayer';
-import RasterLayer from './RasterLayer';
-import SymbolLayer from './SymbolLayer';
-import LineLayer from './LineLayer';
-import FillLayer from './FillLayer';
-import FillExtrusionLayer from './FillExtrusionLayer';
-import BackgroundLayer from './BackgroundLayer';
-import HeatmapLayer from './HeatmapLayer';
-import VectorSource from './VectorSource';
-import RasterSource from './RasterSource';
-import ImageSource from './ImageSource';
-import ShapeSource from './ShapeSource';
-
 import React, {
   useMemo,
   useState,
   useEffect,
   ReactElement,
   ComponentType,
-} from 'react';
+} from "react";
+
+import BackgroundLayer, { BackgroundLayerProps } from "./BackgroundLayer";
+import CircleLayer, { CircleLayerProps } from "./CircleLayer";
+import FillExtrusionLayer, {
+  FillExtrusionLayerProps,
+} from "./FillExtrusionLayer";
+import FillLayer, { FillLayerProps } from "./FillLayer";
+import HeatmapLayer, { HeatmapLayerProps } from "./HeatmapLayer";
+import ImageSource from "./ImageSource";
+import LineLayer, { LineLayerProps } from "./LineLayer";
+import RasterLayer, { RasterLayerProps } from "./RasterLayer";
+import RasterSource from "./RasterSource";
+import ShapeSource from "./ShapeSource";
+import SymbolLayer, { SymbolLayerProps } from "./SymbolLayer";
+import VectorSource from "./VectorSource";
+import { ExpressionField, FilterExpression } from "../utils/MaplibreStyles";
 
 function toCamelCase(s: string): string {
-  return s.replace(/([-_][a-z])/gi, $1 => {
-    return $1.toUpperCase().replace('-', '').replace('_', '');
+  return s.replace(/([-_][a-z])/gi, ($1) => {
+    return $1.toUpperCase().replace("-", "").replace("_", "");
   });
 }
 
@@ -37,9 +37,9 @@ function toCamelCaseKeys(
     return {};
   }
   const newObj: Record<string, unknown> = {};
-  Object.keys(oldObj).forEach(key => {
+  Object.keys(oldObj).forEach((key) => {
     const value = oldObj[key];
-    if (key.includes('-')) {
+    if (key.includes("-")) {
       newObj[toCamelCase(key)] = value;
     } else {
       newObj[key] = value;
@@ -48,27 +48,37 @@ function toCamelCaseKeys(
   return newObj;
 }
 
+type LayerProps =
+  | CircleLayerProps
+  | SymbolLayerProps
+  | RasterLayerProps
+  | LineLayerProps
+  | FillLayerProps
+  | FillExtrusionLayerProps
+  | BackgroundLayerProps
+  | HeatmapLayerProps;
+
 function getLayerComponentType(
   layer: MaplibreJSONLayer,
-): ComponentType<BaseLayerProps> | null {
-  const {type} = layer;
+): ComponentType<LayerProps> | null {
+  const { type } = layer;
 
   switch (type) {
-    case 'circle':
+    case "circle":
       return CircleLayer;
-    case 'symbol':
+    case "symbol":
       return SymbolLayer;
-    case 'raster':
+    case "raster":
       return RasterLayer;
-    case 'line':
+    case "line":
       return LineLayer;
-    case 'fill':
+    case "fill":
       return FillLayer;
-    case 'fill-extrusion':
+    case "fill-extrusion":
       return FillExtrusionLayer;
-    case 'background':
+    case "background":
       return BackgroundLayer;
-    case 'heatmap':
+    case "heatmap":
       return HeatmapLayer;
   }
 
@@ -79,10 +89,10 @@ function getLayerComponentType(
 
 interface MaplibreJSONLayer {
   type: string;
-  paint: {[k: string]: unknown};
-  layout: {[k: string]: unknown};
+  paint: { [k: string]: unknown };
+  layout: { [k: string]: unknown };
   source?: string;
-  'source-layer'?: string;
+  "source-layer"?: string;
   minzoom?: number;
   maxzoom?: number;
   filter?: FilterExpression;
@@ -91,7 +101,7 @@ interface MaplibreJSONLayer {
 
 function asLayerComponent(
   layer: MaplibreJSONLayer,
-): ReactElement<BaseLayerProps> | null {
+): ReactElement<LayerProps> | null {
   const LayerComponent = getLayerComponentType(layer);
 
   if (!LayerComponent) {
@@ -103,13 +113,13 @@ function asLayerComponent(
     ...toCamelCaseKeys(layer.layout),
   };
 
-  const layerProps: Partial<BaseLayerProps> = {};
+  const layerProps: Partial<LayerProps> = {};
 
   if (layer.source) {
     layerProps.sourceID = layer.source;
   }
-  if (layer['source-layer']) {
-    layerProps.sourceLayerID = layer['source-layer'];
+  if (layer["source-layer"]) {
+    layerProps.sourceLayerID = layer["source-layer"];
   }
   if (layer.minzoom) {
     layerProps.minZoomLevel = layer.minzoom;
@@ -134,7 +144,7 @@ interface MaplibreJSONSource {
   minzoom?: number;
   maxzoom?: number;
   attribution?: string;
-  scheme?: 'xyz' | 'tms';
+  scheme?: "xyz" | "tms";
   bounds?: number[];
   buffer?: number;
   tileSize?: number;
@@ -148,7 +158,7 @@ interface MaplibreJSONSource {
   clusterMaxZoom?: number;
   clusterMinPoints?: number;
   clusterRadius?: number;
-  clusterProperties?: {[propertyName: string]: ExpressionField};
+  clusterProperties?: { [propertyName: string]: ExpressionField };
   data?: string | object;
   filter?: FilterExpression;
   generateId?: boolean;
@@ -182,19 +192,19 @@ function getTileSourceProps(source: MaplibreJSONSource): SourceProps {
   if (source.attribution) {
     sourceProps.attribution = source.attribution;
   }
-  if (source.scheme && source.scheme === 'tms') {
+  if (source.scheme && source.scheme === "tms") {
     sourceProps.tms = true;
   }
   return sourceProps;
 }
 
 function getVectorSource(id: string, source: MaplibreJSONSource): ReactElement {
-  const sourceProps = {...getTileSourceProps(source)};
+  const sourceProps = { ...getTileSourceProps(source) };
   return <VectorSource key={id} id={id} {...sourceProps} />;
 }
 
 function getRasterSource(id: string, source: MaplibreJSONSource): ReactElement {
-  const sourceProps: SourceProps & {tileSize?: number} = {
+  const sourceProps: SourceProps & { tileSize?: number } = {
     ...getTileSourceProps(source),
   };
   if (source.tileSize) {
@@ -211,7 +221,7 @@ function getImageSource(id: string, source: MaplibreJSONSource): ReactElement {
   return <ImageSource key={id} id={id} {...sourceProps} />;
 }
 
-type ShapeSourceShape = (typeof ShapeSource.prototype.props)['shape'];
+type ShapeSourceShape = (typeof ShapeSource.prototype.props)["shape"];
 
 function getShapeSource(id: string, source: MaplibreJSONSource): ReactElement {
   const sourceProps: SourceProps & {
@@ -219,14 +229,14 @@ function getShapeSource(id: string, source: MaplibreJSONSource): ReactElement {
     cluster?: boolean;
     clusterRadius?: number;
     clusterMaxZoomLevel?: number;
-    clusterProperties?: {[propertyName: string]: ExpressionField};
+    clusterProperties?: { [propertyName: string]: ExpressionField };
     buffer?: number;
     tolerance?: number;
     lineMetrics?: boolean;
   } = {};
-  if (source.data && typeof source.data === 'string') {
+  if (source.data && typeof source.data === "string") {
     sourceProps.url = source.data;
-  } else if (source.data && typeof source.data === 'object') {
+  } else if (source.data && typeof source.data === "object") {
     sourceProps.shape = source.data as ShapeSourceShape;
   }
   if (source.cluster !== undefined) {
@@ -261,13 +271,13 @@ function asSourceComponent(
   source: MaplibreJSONSource,
 ): ReactElement | null {
   switch (source.type) {
-    case 'vector':
+    case "vector":
       return getVectorSource(id, source);
-    case 'raster':
+    case "raster":
       return getRasterSource(id, source);
-    case 'image':
+    case "image":
       return getImageSource(id, source);
-    case 'geojson':
+    case "geojson":
       return getShapeSource(id, source);
   }
 
@@ -278,7 +288,7 @@ function asSourceComponent(
 
 interface MaplibreJSON {
   layers?: MaplibreJSONLayer[];
-  sources?: {[key: string]: MaplibreJSONSource};
+  sources?: { [key: string]: MaplibreJSONSource };
 }
 
 interface StyleProps {
@@ -298,7 +308,7 @@ interface StyleProps {
 const Style = (props: StyleProps): ReactElement => {
   const [fetchedJson, setFetchedJson] = useState({});
   const json: MaplibreJSON =
-    typeof props.json === 'object' ? props.json : fetchedJson;
+    typeof props.json === "object" ? props.json : fetchedJson;
 
   // Fetch style when props.json is a URL
   useEffect(() => {
@@ -311,14 +321,14 @@ const Style = (props: StyleProps): ReactElement => {
         const responseJson = await response.json();
         setFetchedJson(responseJson);
       } catch (error: unknown) {
-        const e = error as {name?: string};
-        if (e.name === 'AbortError') {
+        const e = error as { name?: string };
+        if (e.name === "AbortError") {
           return;
         }
         throw e;
       }
     };
-    if (typeof props.json === 'string') {
+    if (typeof props.json === "string") {
       fetchStyleJson(props.json);
     }
     return function cleanup(): void {
@@ -338,13 +348,13 @@ const Style = (props: StyleProps): ReactElement => {
 
   // Extract source components from json
   const sourceComponents = useMemo(() => {
-    const {sources} = json;
+    const { sources } = json;
     if (!sources || !Object.keys(sources)) {
       return [];
     }
     return Object.keys(sources)
-      .map(id => asSourceComponent(id, sources[id]))
-      .filter(x => !!x);
+      .map((id) => asSourceComponent(id, sources[id]))
+      .filter((x) => !!x);
   }, [json]);
 
   return (

package/javascript/components/SymbolLayer.tsx

@@ -1,16 +1,16 @@
-import {type SymbolLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
+import React, { ReactElement } from "react";
+import { View, NativeModules, requireNativeComponent } from "react-native";
+
 import useAbstractLayer, {
   BaseLayerProps,
   NativeBaseProps,
-} from '../hooks/useAbstractLayer';
-
-import React, {ReactElement} from 'react';
-import {View, NativeModules, requireNativeComponent} from 'react-native';
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { type SymbolLayerStyleProps } from "../utils/MaplibreStyles";
 
 const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMLNSymbolLayer';
+export const NATIVE_MODULE_NAME = "RCTMLNSymbolLayer";
 
 export interface SymbolLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -25,7 +25,7 @@ export interface SymbolLayerProps extends BaseProps, BaseLayerProps {
   children?: ReactElement | ReactElement[];
 }
 
-interface NativeProps extends Omit<SymbolLayerProps, 'style'>, NativeBaseProps {
+interface NativeProps extends Omit<SymbolLayerProps, "style">, NativeBaseProps {
   snapshot: boolean;
 }
 
@@ -39,7 +39,7 @@ const SymbolLayer: React.FC<SymbolLayerProps> = ({
   sourceID = MapLibreGL.StyleSource.DefaultSourceID,
   ...props
 }: SymbolLayerProps) => {
-  const {baseProps, setNativeLayer} = useAbstractLayer<
+  const { baseProps, setNativeLayer } = useAbstractLayer<
     SymbolLayerProps,
     NativeBaseProps
   >({
@@ -54,7 +54,7 @@ const SymbolLayer: React.FC<SymbolLayerProps> = ({
       return isSnapshot;
     }
 
-    React.Children.forEach(props.children, child => {
+    React.Children.forEach(props.children, (child) => {
       if (child?.type === View) {
         isSnapshot = true;
       }

package/javascript/components/UserLocation.tsx

@@ -1,31 +1,30 @@
-import locationManager, {Location} from '../modules/location/locationManager';
-import {CircleLayerStyleProps} from '../utils/MaplibreStyles';
+import React, { ReactElement, useEffect, useImperativeHandle } from "react";
 
-import Annotation from './annotations/Annotation';
-import CircleLayer from './CircleLayer';
-import HeadingIndicator from './HeadingIndicator';
-import NativeUserLocation from './NativeUserLocation';
+import CircleLayer from "./CircleLayer";
+import HeadingIndicator from "./HeadingIndicator";
+import NativeUserLocation from "./NativeUserLocation";
+import Annotation from "./annotations/Annotation";
+import locationManager, { Location } from "../modules/location/locationManager";
+import { CircleLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactElement, useEffect, useImperativeHandle} from 'react';
-
-const mapboxBlue = 'rgba(51, 181, 229, 100)';
+const mapboxBlue = "rgba(51, 181, 229, 100)";
 
 const layerStyles: Record<string, CircleLayerStyleProps> = {
   pluse: {
     circleRadius: 15,
     circleColor: mapboxBlue,
     circleOpacity: 0.2,
-    circlePitchAlignment: 'map',
+    circlePitchAlignment: "map",
   },
   background: {
     circleRadius: 9,
-    circleColor: '#fff',
-    circlePitchAlignment: 'map',
+    circleColor: "#fff",
+    circlePitchAlignment: "map",
   },
   foreground: {
     circleRadius: 6,
     circleColor: mapboxBlue,
-    circlePitchAlignment: 'map',
+    circlePitchAlignment: "map",
   },
 };
 
@@ -50,7 +49,7 @@ export const normalIcon = (
     style={layerStyles.foreground}
   />,
   ...(showsUserHeadingIndicator && heading
-    ? [HeadingIndicator({heading})]
+    ? [HeadingIndicator({ heading })]
     : []),
 ];
 
@@ -63,7 +62,7 @@ interface UserLocationProps {
    * Which render mode to use.
    * Can either be `normal` or `native`
    */
-  renderMode?: 'normal' | 'native';
+  renderMode?: "normal" | "native";
   /**
    * native/android only render mode
    *
@@ -73,7 +72,7 @@ interface UserLocationProps {
    *
    * @platform android
    */
-  androidRenderMode?: 'normal' | 'compass' | 'gps';
+  androidRenderMode?: "normal" | "compass" | "gps";
   /**
    * Whether location icon is visible
    */
@@ -109,12 +108,12 @@ interface UserLocationState {
 }
 
 export enum UserLocationRenderMode {
-  Native = 'native',
-  Normal = 'normal',
+  Native = "native",
+  Normal = "normal",
 }
 
 export interface UserLocationRef {
-  setLocationManager: (props: {running: boolean}) => Promise<void>;
+  setLocationManager: (props: { running: boolean }) => Promise<void>;
   needsLocationManagerRunning: () => boolean;
   _onLocationUpdate: (location: Location | null) => void;
 }
@@ -127,7 +126,7 @@ const UserLocation = React.memo(
         visible = true,
         showsUserHeadingIndicator = false,
         minDisplacement = 0,
-        renderMode = 'normal',
+        renderMode = "normal",
         androidRenderMode,
         children,
         onUpdate,
@@ -183,7 +182,7 @@ const UserLocation = React.memo(
 
         return (): void => {
           _isMounted.current = false;
-          setLocationManager({running: false});
+          setLocationManager({ running: false });
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, []);
@@ -236,7 +235,7 @@ const UserLocation = React.memo(
         let heading;
 
         if (location && location.coords) {
-          const {longitude, latitude} = location.coords;
+          const { longitude, latitude } = location.coords;
           heading = location.coords.heading;
           coordinates = [longitude, latitude];
         }
@@ -277,7 +276,8 @@ const UserLocation = React.memo(
           coordinates={userLocationState.coordinates}
           style={{
             iconRotate: userLocationState.heading,
-          }}>
+          }}
+        >
           {children ||
             normalIcon(showsUserHeadingIndicator, userLocationState.heading)}
         </Annotation>

package/javascript/components/VectorSource.tsx

@@ -1,23 +1,23 @@
-import {FilterExpression} from '../utils/MaplibreStyles';
-import {cloneReactChildrenWithProps, isFunction, isAndroid} from '../utils';
-import {getFilter} from '../utils/filterUtils';
-import {copyPropertiesAsDeprecated} from '../utils/deprecation';
-import BaseProps from '../types/BaseProps';
-import OnPressEvent from '../types/OnPressEvent';
-import useAbstractSource from '../hooks/useAbstractSource';
-import useNativeBridge from '../hooks/useNativeBridge';
-
-import React, {memo, useImperativeHandle} from 'react';
+import { featureCollection } from "@turf/helpers";
+import React, { memo, useImperativeHandle } from "react";
 import {
   NativeModules,
   NativeSyntheticEvent,
   requireNativeComponent,
-} from 'react-native';
-import {featureCollection} from '@turf/helpers';
+} from "react-native";
+
+import useAbstractSource from "../hooks/useAbstractSource";
+import useNativeBridge from "../hooks/useNativeBridge";
+import BaseProps from "../types/BaseProps";
+import OnPressEvent from "../types/OnPressEvent";
+import { cloneReactChildrenWithProps, isFunction, isAndroid } from "../utils";
+import { FilterExpression } from "../utils/MaplibreStyles";
+import { copyPropertiesAsDeprecated } from "../utils/deprecation";
+import { getFilter } from "../utils/filterUtils";
 
 const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMLNVectorSource';
+export const NATIVE_MODULE_NAME = "RCTMLNVectorSource";
 
 interface VectorSourceProps extends BaseProps {
   /**
@@ -122,7 +122,7 @@ const VectorSource = memo(
         //  _runPendingNativeCommands,
         _onAndroidCallback,
       } = useNativeBridge(NATIVE_MODULE_NAME);
-      const {setNativeRef, _nativeRef} = useAbstractSource<NativeProps>();
+      const { setNativeRef, _nativeRef } = useAbstractSource<NativeProps>();
 
       // const _setNativeRef = (
       //   nativeRef: (Component<NativeProps> & Readonly<NativeMethods>) | null,
@@ -140,8 +140,8 @@ const VectorSource = memo(
         if (!_nativeRef) {
           return featureCollection([]);
         }
-        const res: {data: string | GeoJSON.FeatureCollection} =
-          await _runNativeCommand('features', _nativeRef, [
+        const res: { data: string | GeoJSON.FeatureCollection } =
+          await _runNativeCommand("features", _nativeRef, [
             [[layerIDs, getFilter(filter)]],
           ]);
 
@@ -153,16 +153,16 @@ const VectorSource = memo(
       };
 
       const onPress = (
-        event: NativeSyntheticEvent<{payload: OnPressEvent}>,
+        event: NativeSyntheticEvent<{ payload: OnPressEvent }>,
       ): void => {
-        const {onPress} = props;
+        const { onPress } = props;
 
         if (!onPress) {
           return;
         }
         const {
           nativeEvent: {
-            payload: {features, coordinates, point},
+            payload: { features, coordinates, point },
           },
         } = event;
         let newEvent = {

package/javascript/components/annotations/Annotation.tsx

@@ -1,16 +1,16 @@
-import SymbolLayer from '../SymbolLayer';
-import Animated from '../../utils/animated/Animated';
-import AnimatedMapPoint from '../../utils/animated/AnimatedPoint';
-import OnPressEvent from '../../types/OnPressEvent';
-import {SymbolLayerStyleProps} from '../../utils/MaplibreStyles';
-
 import React, {
   ReactElement,
   useCallback,
   useEffect,
   useImperativeHandle,
-} from 'react';
-import {Animated as RNAnimated, Easing} from 'react-native';
+} from "react";
+import { Animated as RNAnimated, Easing } from "react-native";
+
+import OnPressEvent from "../../types/OnPressEvent";
+import { SymbolLayerStyleProps } from "../../utils/MaplibreStyles";
+import { AnimatedShapeSource } from "../../utils/animated/Animated";
+import AnimatedMapPoint from "../../utils/animated/AnimatedPoint";
+import SymbolLayer from "../SymbolLayer";
 
 interface AnnotationProps {
   id: string;
@@ -29,7 +29,7 @@ type Shape = AnimatedMapPoint | GeoJSON.Point;
 function getShapeFromProps(props: Partial<AnnotationProps> = {}): Shape {
   const lng = props.coordinates?.[0] || 0;
   const lat = props.coordinates?.[1] || 0;
-  const point: GeoJSON.Point = {type: 'Point', coordinates: [lng, lat]};
+  const point: GeoJSON.Point = { type: "Point", coordinates: [lng, lat] };
 
   if (props.animated) {
     return new AnimatedMapPoint(point);
@@ -77,7 +77,7 @@ const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
     );
 
     // this will run useEffect only when actual coordinates values change
-    const coordinateDeps = props.coordinates?.join(',');
+    const coordinateDeps = props.coordinates?.join(",");
 
     useEffect(() => {
       if (!Array.isArray(props.coordinates)) {
@@ -127,7 +127,7 @@ const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
 
     const children = [];
     const symbolStyle: SymbolLayerStyleProps | undefined = props.icon
-      ? {...props.style, iconImage: props.icon}
+      ? { ...props.style, iconImage: props.icon }
       : undefined;
 
     if (symbolStyle) {
@@ -145,16 +145,17 @@ const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
     }
 
     return (
-      <Animated.ShapeSource
+      <AnimatedShapeSource
         id={props.id}
         onPress={_onPress}
-        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}>
+        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}
+      >
         {children}
-      </Animated.ShapeSource>
+      </AnimatedShapeSource>
     );
   },
 );
 
-Annotation.displayName = 'Annotation';
+Annotation.displayName = "Annotation";
 
 export default Annotation;

package/javascript/hooks/useAbstractLayer.ts

@@ -1,15 +1,15 @@
-import {StyleValue, transformStyle} from '../utils/StyleValue';
-import {getFilter} from '../utils/filterUtils';
+import React, { useMemo, useRef } from "react";
+import { processColor, NativeMethods } from "react-native";
+
+import BaseProps from "../types/BaseProps";
 import {
   AllLayerStyleProps,
   ExpressionField,
   ExpressionName,
   FilterExpression,
-} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
-
-import React, {useMemo, useRef} from 'react';
-import {processColor, NativeMethods} from 'react-native';
+} from "../utils/MaplibreStyles";
+import { StyleValue, transformStyle } from "../utils/StyleValue";
+import { getFilter } from "../utils/filterUtils";
 
 export interface BaseLayerProps {
   /**
@@ -57,7 +57,7 @@ export interface BaseLayerProps {
 }
 
 export interface NativeBaseProps {
-  reactStyle?: {[key: string]: StyleValue};
+  reactStyle?: { [key: string]: StyleValue };
 }
 
 export default function useAbstractLayer<
@@ -71,7 +71,7 @@ export default function useAbstractLayer<
     instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
   ) => void;
   getStyleTypeFormatter: (styleType: string) => typeof processColor | undefined;
-  setNativeProps: (nativeProps: {[key: string]: unknown}) => void;
+  setNativeProps: (nativeProps: { [key: string]: unknown }) => void;
 } {
   const nativeLayer = useRef<
     (React.Component<NativeProps> & Readonly<NativeMethods>) | null
@@ -102,14 +102,17 @@ export default function useAbstractLayer<
   const getStyleTypeFormatter = (
     styleType: string,
   ): typeof processColor | undefined => {
-    return styleType === 'color' ? processColor : undefined;
+    return styleType === "color" ? processColor : undefined;
   };
 
-  const setNativeProps = (nativeProps: {[key: string]: unknown}): void => {
+  const setNativeProps = (nativeProps: { [key: string]: unknown }): void => {
     if (nativeLayer.current) {
       let propsToPass = nativeProps;
       if (nativeProps.style) {
-        propsToPass = {...nativeProps, reactStyle: transformStyle(props.style)};
+        propsToPass = {
+          ...nativeProps,
+          reactStyle: transformStyle(props.style),
+        };
       }
       nativeLayer.current.setNativeProps(propsToPass);
     }

package/javascript/hooks/useAbstractSource.ts

@@ -1,5 +1,5 @@
-import React, {useRef} from 'react';
-import {NativeMethods} from 'react-native';
+import React, { useRef } from "react";
+import { NativeMethods } from "react-native";
 
 export default function useAbstractSource<NativePropsType extends object>(): {
   _nativeRef: