@maplibre/maplibre-react-native 10.0.0-beta.11 → 10.0.0-beta.13

package/src/components/MapView.tsx

@@ -22,17 +22,17 @@ import {
   type NativeSyntheticEvent,
 } from "react-native";
 
-import useNativeBridge from "../hooks/useNativeBridge";
-import useOnce from "../hooks/useOnce";
-import { type Location } from "../modules/location/locationManager";
+import { useNativeBridge } from "../hooks/useNativeBridge";
+import { useOnce } from "../hooks/useOnce";
+import { type Location } from "../modules/location/LocationManager";
 import { type BaseProps } from "../types/BaseProps";
 import { type FilterExpression } from "../types/MapLibreRNStyles";
 import { isFunction, isAndroid } from "../utils";
-import Logger from "../utils/Logger";
+import { Logger } from "../utils/Logger";
 import { getFilter } from "../utils/filterUtils";
 
-const MapLibreRN = NativeModules.MLRNModule;
-if (MapLibreRN == null) {
+const MLRNModule = NativeModules.MLRNModule;
+if (MLRNModule == null) {
   console.error(
     "Native module of @maplibre/maplibre-react-native library was not registered properly, please consult the docs: https://github.com/maplibre/maplibre-react-native",
   );
@@ -67,7 +67,7 @@ interface MapViewProps extends BaseProps {
    */
   style?: ViewProps["style"];
   /**
-   * Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `MapLibreRN.StyleURL.Default`
+   * Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `StyleURL.Default`
    */
   mapStyle?: string | object;
   /**
@@ -278,7 +278,7 @@ export interface MapViewRef {
 /**
  * MapView backed by MapLibre Native
  */
-const MapView = memo(
+export const MapView = memo(
   forwardRef<MapViewRef, MapViewProps>(
     (
       {
@@ -433,46 +433,46 @@ const MapView = memo(
           const events = [];
 
           if (props.onRegionWillChange) {
-            events.push(MapLibreRN.EventTypes.RegionWillChange);
+            events.push(MLRNModule.EventTypes.RegionWillChange);
           }
           if (props.onRegionIsChanging) {
-            events.push(MapLibreRN.EventTypes.RegionIsChanging);
+            events.push(MLRNModule.EventTypes.RegionIsChanging);
           }
           if (props.onRegionDidChange) {
-            events.push(MapLibreRN.EventTypes.RegionDidChange);
+            events.push(MLRNModule.EventTypes.RegionDidChange);
           }
           if (props.onUserLocationUpdate) {
-            events.push(MapLibreRN.EventTypes.UserLocationUpdated);
+            events.push(MLRNModule.EventTypes.UserLocationUpdated);
           }
           if (props.onWillStartLoadingMap) {
-            events.push(MapLibreRN.EventTypes.WillStartLoadingMap);
+            events.push(MLRNModule.EventTypes.WillStartLoadingMap);
           }
           if (props.onDidFinishLoadingMap) {
-            events.push(MapLibreRN.EventTypes.DidFinishLoadingMap);
+            events.push(MLRNModule.EventTypes.DidFinishLoadingMap);
           }
           if (props.onDidFailLoadingMap) {
-            events.push(MapLibreRN.EventTypes.DidFailLoadingMap);
+            events.push(MLRNModule.EventTypes.DidFailLoadingMap);
           }
           if (props.onWillStartRenderingFrame) {
-            events.push(MapLibreRN.EventTypes.WillStartRenderingFrame);
+            events.push(MLRNModule.EventTypes.WillStartRenderingFrame);
           }
           if (props.onDidFinishRenderingFrame) {
-            events.push(MapLibreRN.EventTypes.DidFinishRenderingFrame);
+            events.push(MLRNModule.EventTypes.DidFinishRenderingFrame);
           }
           if (props.onDidFinishRenderingFrameFully) {
-            events.push(MapLibreRN.EventTypes.DidFinishRenderingFrameFully);
+            events.push(MLRNModule.EventTypes.DidFinishRenderingFrameFully);
           }
           if (props.onWillStartRenderingMap) {
-            events.push(MapLibreRN.EventTypes.WillStartRenderingMap);
+            events.push(MLRNModule.EventTypes.WillStartRenderingMap);
           }
           if (props.onDidFinishRenderingMap) {
-            events.push(MapLibreRN.EventTypes.DidFinishRenderingMap);
+            events.push(MLRNModule.EventTypes.DidFinishRenderingMap);
           }
           if (props.onDidFinishRenderingMapFully) {
-            events.push(MapLibreRN.EventTypes.DidFinishRenderingMapFully);
+            events.push(MLRNModule.EventTypes.DidFinishRenderingMapFully);
           }
           if (props.onDidFinishLoadingStyle) {
-            events.push(MapLibreRN.EventTypes.DidFinishLoadingStyle);
+            events.push(MLRNModule.EventTypes.DidFinishLoadingStyle);
           }
 
           _runNativeCommand(
@@ -656,7 +656,7 @@ const MapView = memo(
         let propName: CallableProps | undefined;
 
         switch (type) {
-          case MapLibreRN.EventTypes.RegionWillChange:
+          case MLRNModule.EventTypes.RegionWillChange:
             if (
               regionWillChangeDebounceTime &&
               regionWillChangeDebounceTime > 0
@@ -670,10 +670,10 @@ const MapView = memo(
               propName = "onRegionWillChange";
             }
             break;
-          case MapLibreRN.EventTypes.RegionIsChanging:
+          case MLRNModule.EventTypes.RegionIsChanging:
             propName = "onRegionIsChanging";
             break;
-          case MapLibreRN.EventTypes.RegionDidChange:
+          case MLRNModule.EventTypes.RegionDidChange:
             if (
               regionDidChangeDebounceTime &&
               regionDidChangeDebounceTime > 0
@@ -687,37 +687,37 @@ const MapView = memo(
               propName = "onRegionDidChange";
             }
             break;
-          case MapLibreRN.EventTypes.UserLocationUpdated:
+          case MLRNModule.EventTypes.UserLocationUpdated:
             propName = "onUserLocationUpdate";
             break;
-          case MapLibreRN.EventTypes.WillStartLoadingMap:
+          case MLRNModule.EventTypes.WillStartLoadingMap:
             propName = "onWillStartLoadingMap";
             break;
-          case MapLibreRN.EventTypes.DidFinishLoadingMap:
+          case MLRNModule.EventTypes.DidFinishLoadingMap:
             propName = "onDidFinishLoadingMap";
             break;
-          case MapLibreRN.EventTypes.DidFailLoadingMap:
+          case MLRNModule.EventTypes.DidFailLoadingMap:
             propName = "onDidFailLoadingMap";
             break;
-          case MapLibreRN.EventTypes.WillStartRenderingFrame:
+          case MLRNModule.EventTypes.WillStartRenderingFrame:
             propName = "onWillStartRenderingFrame";
             break;
-          case MapLibreRN.EventTypes.DidFinishRenderingFrame:
+          case MLRNModule.EventTypes.DidFinishRenderingFrame:
             propName = "onDidFinishRenderingFrame";
             break;
-          case MapLibreRN.EventTypes.DidFinishRenderingFrameFully:
+          case MLRNModule.EventTypes.DidFinishRenderingFrameFully:
             propName = "onDidFinishRenderingFrameFully";
             break;
-          case MapLibreRN.EventTypes.WillStartRenderingMap:
+          case MLRNModule.EventTypes.WillStartRenderingMap:
             propName = "onWillStartRenderingMap";
             break;
-          case MapLibreRN.EventTypes.DidFinishRenderingMap:
+          case MLRNModule.EventTypes.DidFinishRenderingMap:
             propName = "onDidFinishRenderingMap";
             break;
-          case MapLibreRN.EventTypes.DidFinishRenderingMapFully:
+          case MLRNModule.EventTypes.DidFinishRenderingMapFully:
             propName = "onDidFinishRenderingMapFully";
             break;
-          case MapLibreRN.EventTypes.DidFinishLoadingStyle:
+          case MLRNModule.EventTypes.DidFinishLoadingStyle:
             propName = "onDidFinishLoadingStyle";
             break;
           default:
@@ -852,4 +852,3 @@ if (isAndroid()) {
     ANDROID_TEXTURE_NATIVE_MODULE_NAME,
   );
 }
-export default MapView;

package/src/components/MarkerView.tsx

@@ -2,7 +2,7 @@ import { point } from "@turf/helpers";
 import { type ReactElement, useMemo } from "react";
 import { Platform, requireNativeComponent, type ViewProps } from "react-native";
 
-import PointAnnotation from "./PointAnnotation";
+import { PointAnnotation } from "./PointAnnotation";
 import { toJSONString } from "../utils";
 
 export const NATIVE_MODULE_NAME = "MLRNMarkerView";
@@ -35,7 +35,7 @@ interface MarkerViewProps extends ViewProps {
   /**
    * Expects one child - can be container with multiple elements
    */
-  children: React.ReactElement;
+  children: ReactElement;
 }
 
 interface NativeProps extends ViewProps {
@@ -53,12 +53,12 @@ interface NativeProps extends ViewProps {
  * This is based on [MakerView plugin](https://docs.mapbox.com/android/plugins/overview/markerview/) on Android
  * and PointAnnotation on iOS.
  */
-const MarkerView = ({
+export const MarkerView = ({
   anchor = { x: 0.5, y: 0.5 },
   allowOverlap = false,
   isSelected = false,
   ...rest
-}: MarkerViewProps): ReactElement => {
+}: MarkerViewProps) => {
   const props = { anchor, allowOverlap, isSelected, ...rest };
   const coordinate = props.coordinate
     ? toJSONString(point(props.coordinate))
@@ -84,5 +84,3 @@ const MarkerView = ({
 let lastId = 0;
 
 const MLRNMarkerView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export default MarkerView;

package/src/components/NativeUserLocation.tsx

@@ -1,4 +1,3 @@
-import { type ReactElement } from "react";
 import { requireNativeComponent } from "react-native";
 
 const NATIVE_MODULE_NAME = "MLRNNativeUserLocation";
@@ -26,10 +25,8 @@ interface NativeUserLocationProps {
   androidPreferredFramesPerSecond?: number;
 }
 
-const NativeUserLocation = (props: NativeUserLocationProps): ReactElement => {
+export const NativeUserLocation = (props: NativeUserLocationProps) => {
   return <MLRNNativeUserLocation {...props} />;
 };
 
 const MLRNNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);
-
-export default NativeUserLocation;

package/src/components/PointAnnotation.tsx

@@ -14,7 +14,7 @@ import {
   requireNativeComponent,
 } from "react-native";
 
-import useNativeBridge, { type RNMLEvent } from "../hooks/useNativeBridge";
+import { useNativeBridge, type RNMLEvent } from "../hooks/useNativeBridge";
 import { isFunction, toJSONString } from "../utils";
 
 export const NATIVE_MODULE_NAME = "MLRNPointAnnotation";
@@ -102,7 +102,7 @@ export interface PointAnnotationProps {
   /**
    * Expects one child, and an optional callout can be added as well
    */
-  children: React.ReactElement | [React.ReactElement, React.ReactElement];
+  children: ReactElement | [ReactElement, ReactElement];
 
   style?: ViewProps["style"];
 }
@@ -125,7 +125,10 @@ export interface PointAnnotationRef {
  * If you need interctive views please use MarkerView,
  * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
  */
-const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
+export const PointAnnotation = forwardRef<
+  PointAnnotationRef,
+  PointAnnotationProps
+>(
   (
     {
       anchor = { x: 0.5, y: 0.5 },
@@ -133,7 +136,7 @@ const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
       ...props
     }: PointAnnotationProps,
     ref,
-  ): ReactElement => {
+  ) => {
     useImperativeHandle(
       ref,
       (): PointAnnotationRef => ({
@@ -241,5 +244,3 @@ PointAnnotation.displayName = "PointAnnotation";
 
 const MLRNPointAnnotation =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export default PointAnnotation;

package/src/components/RasterLayer.tsx

@@ -1,14 +1,14 @@
-import React from "react";
 import { NativeModules, requireNativeComponent } from "react-native";
 
-import useAbstractLayer, {
+import {
+  useAbstractLayer,
   type BaseLayerProps,
   type NativeBaseProps,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
 import { type RasterLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNRasterLayer";
 
@@ -25,8 +25,8 @@ interface NativeProps
 
 const MLRNRasterLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
-const RasterLayer: React.FC<RasterLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const RasterLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: RasterLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -39,5 +39,3 @@ const RasterLayer: React.FC<RasterLayerProps> = ({
 
   return <MLRNRasterLayer ref={setNativeLayer} {...baseProps} />;
 };
-
-export default RasterLayer;

package/src/components/RasterSource.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import { type ReactNode } from "react";
 import { NativeModules, requireNativeComponent } from "react-native";
 
-import useAbstractSource from "../hooks/useAbstractSource";
-import useOnce from "../hooks/useOnce";
+import { useAbstractSource } from "../hooks/useAbstractSource";
+import { useOnce } from "../hooks/useOnce";
 import { type BaseProps } from "../types/BaseProps";
 import { cloneReactChildrenWithProps } from "../utils";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNRasterSource";
 
@@ -55,7 +55,7 @@ interface RasterSourceProps extends BaseProps {
    */
   attribution?: string;
 
-  children?: React.ReactElement | React.ReactElement[];
+  children?: ReactNode;
 }
 
 type NativeProps = RasterSourceProps;
@@ -68,8 +68,8 @@ const MLRNRasterSource =
  * The location of and metadata about the tiles are defined either by an option dictionary
  * or by an external file that conforms to the TileJSON specification.
  */
-const RasterSource: React.FC<RasterSourceProps> = ({
-  id = MapLibreRN.StyleSource.DefaultSourceID,
+export const RasterSource = ({
+  id = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: RasterSourceProps) => {
   useOnce(() => {
@@ -110,5 +110,3 @@ const RasterSource: React.FC<RasterSourceProps> = ({
     </MLRNRasterSource>
   );
 };
-
-export default RasterSource;

package/src/components/ShapeSource.tsx

@@ -1,8 +1,8 @@
 import {
   Component,
-  type ReactElement,
   forwardRef,
   memo,
+  type ReactNode,
   useImperativeHandle,
   useRef,
 } from "react";
@@ -13,7 +13,7 @@ import {
   requireNativeComponent,
 } from "react-native";
 
-import useNativeBridge from "../hooks/useNativeBridge";
+import { useNativeBridge } from "../hooks/useNativeBridge";
 import { type BaseProps } from "../types/BaseProps";
 import {
   type ExpressionField,
@@ -28,7 +28,7 @@ import {
 } from "../utils";
 import { getFilter } from "../utils/filterUtils";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 export const NATIVE_MODULE_NAME = "MLRNShapeSource";
 
 interface NativeProps {
@@ -133,7 +133,7 @@ export interface ShapeSourceProps extends BaseProps {
     height: number;
   };
 
-  children?: ReactElement | ReactElement[];
+  children?: ReactNode;
 }
 
 export interface ShapeSourceRef {
@@ -158,11 +158,11 @@ export interface ShapeSourceRef {
  * ShapeSource is a map content source that supplies vector shapes to be shown on the map.
  * The shape may be a url or a GeoJSON object
  */
-const ShapeSource = memo(
+export const ShapeSource = memo(
   forwardRef<ShapeSourceRef, ShapeSourceProps>(
     (
       {
-        id: shapeId = MapLibreRN.StyleSource.DefaultSourceID,
+        id: shapeId = MLRNModule.StyleSource.DefaultSourceID,
         ...props
       }: ShapeSourceProps,
       ref,
@@ -364,5 +364,3 @@ const ShapeSource = memo(
 );
 
 const MLRNShapeSource = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export default ShapeSource;

package/src/components/SymbolLayer.tsx

@@ -1,13 +1,14 @@
 import { NativeModules, requireNativeComponent } from "react-native";
 
-import useAbstractLayer, {
+import {
+  useAbstractLayer,
   type BaseLayerProps,
   type NativeBaseProps,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
 import { type SymbolLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNSymbolLayer";
 
@@ -27,8 +28,8 @@ const MLRNSymbolLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 /**
  * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
  */
-const SymbolLayer: React.FC<SymbolLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const SymbolLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: SymbolLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -45,5 +46,3 @@ const SymbolLayer: React.FC<SymbolLayerProps> = ({
 
   return <MLRNSymbolLayer ref={setNativeLayer} {...updatedProps} />;
 };
-
-export default SymbolLayer;

package/src/components/UserLocation.tsx

@@ -1,20 +1,21 @@
 import {
   forwardRef,
   memo,
-  type ReactElement,
+  type ReactNode,
   useEffect,
   useImperativeHandle,
   useRef,
   useState,
 } from "react";
 
-import Annotation from "./Annotation";
-import CircleLayer from "./CircleLayer";
-import HeadingIndicator from "./HeadingIndicator";
-import NativeUserLocation from "./NativeUserLocation";
-import locationManager, {
+import { Annotation } from "./Annotation";
+import { CircleLayer } from "./CircleLayer";
+import { HeadingIndicator } from "./HeadingIndicator";
+import { NativeUserLocation } from "./NativeUserLocation";
+import {
   type Location,
-} from "../modules/location/locationManager";
+  LocationManager,
+} from "../modules/location/LocationManager";
 import { type CircleLayerStyle } from "../types/MapLibreRNStyles";
 
 const mapboxBlue = "rgba(51, 181, 229, 100)";
@@ -41,7 +42,7 @@ const layerStyles: Record<string, CircleLayerStyle> = {
 export const normalIcon = (
   showsUserHeadingIndicator?: boolean,
   heading?: number,
-): ReactElement[] => [
+) => [
   <CircleLayer
     key="mapboxUserLocationPluseCircle"
     id="mapboxUserLocationPluseCircle"
@@ -114,7 +115,7 @@ interface UserLocationProps {
    *
    * NOTE: Forking maintainer does not understand the above comment.
    */
-  children?: ReactElement | ReactElement[];
+  children?: ReactNode;
 }
 
 interface UserLocationState {
@@ -134,7 +135,7 @@ export interface UserLocationRef {
   _onLocationUpdate: (location: Location | null) => void;
 }
 
-const UserLocation = memo(
+export const UserLocation = memo(
   forwardRef<UserLocationRef, UserLocationProps>(
     (
       {
@@ -163,7 +164,7 @@ const UserLocation = memo(
         ref,
         (): UserLocationRef => ({
           /**
-           * Whether to start or stop listening to the locationManager
+           * Whether to start or stop listening to the LocationManager
            *
            * Notice, that listening will start automatically when
            * either `onUpdate` or `visible` are set
@@ -175,7 +176,7 @@ const UserLocation = memo(
           setLocationManager,
           /**
            *
-           * If locationManager should be running
+           * If LocationManager should be running
            *
            * @return {boolean}
            */
@@ -194,7 +195,7 @@ const UserLocation = memo(
             return;
           }
 
-          locationManager.setMinDisplacement(minDisplacement ?? 0);
+          LocationManager.setMinDisplacement(minDisplacement ?? 0);
         });
 
         return (): void => {
@@ -205,7 +206,7 @@ const UserLocation = memo(
       }, []);
 
       useEffect(() => {
-        locationManager.setMinDisplacement(minDisplacement ?? 0);
+        LocationManager.setMinDisplacement(minDisplacement ?? 0);
       }, [minDisplacement]);
 
       useEffect(() => {
@@ -227,11 +228,11 @@ const UserLocation = memo(
           locationManagerRunning.current = running;
 
           if (running) {
-            locationManager.addListener(_onLocationUpdate);
-            const location = await locationManager.getLastKnownLocation();
+            LocationManager.addListener(_onLocationUpdate);
+            const location = await LocationManager.getLastKnownLocation();
             _onLocationUpdate(location);
           } else {
-            locationManager.removeListener(_onLocationUpdate);
+            LocationManager.removeListener(_onLocationUpdate);
           }
         }
       }
@@ -303,5 +304,3 @@ const UserLocation = memo(
     },
   ),
 );
-
-export default UserLocation;

package/src/components/VectorSource.tsx

@@ -1,20 +1,20 @@
 import { featureCollection } from "@turf/helpers";
-import { forwardRef, memo, useImperativeHandle } from "react";
+import { forwardRef, memo, type ReactNode, useImperativeHandle } from "react";
 import {
   NativeModules,
   type NativeSyntheticEvent,
   requireNativeComponent,
 } from "react-native";
 
-import useAbstractSource from "../hooks/useAbstractSource";
-import useNativeBridge from "../hooks/useNativeBridge";
+import { useAbstractSource } from "../hooks/useAbstractSource";
+import { useNativeBridge } from "../hooks/useNativeBridge";
 import { type BaseProps } from "../types/BaseProps";
 import { type FilterExpression } from "../types/MapLibreRNStyles";
 import { type OnPressEvent } from "../types/OnPressEvent";
 import { cloneReactChildrenWithProps, isFunction, isAndroid } from "../utils";
 import { getFilter } from "../utils/filterUtils";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNVectorSource";
 
@@ -77,7 +77,7 @@ interface VectorSourceProps extends BaseProps {
     height: number;
   };
 
-  children?: React.ReactElement | React.ReactElement[];
+  children?: ReactNode;
 }
 
 type NativeProps = VectorSourceProps;
@@ -89,11 +89,11 @@ const MLRNVectorSource =
  * VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format to be shown on the map.
  * The location of and metadata about the tiles are defined either by an option dictionary or by an external file that conforms to the TileJSON specification.
  */
-const VectorSource = memo(
+export const VectorSource = memo(
   forwardRef(
     (
       {
-        id = MapLibreRN.StyleSource.DefaultSourceID,
+        id = MLRNModule.StyleSource.DefaultSourceID,
         ...props
       }: VectorSourceProps,
       ref,
@@ -198,5 +198,3 @@ const VectorSource = memo(
     },
   ),
 );
-
-export default VectorSource;

package/src/hooks/useAbstractLayer.ts

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from "react";
+import { type Component, useMemo, useRef } from "react";
 import { processColor, type NativeMethods } from "react-native";
 
 import { type BaseProps } from "../types/BaseProps";
@@ -60,7 +60,7 @@ export interface NativeBaseProps {
   reactStyle?: { [key: string]: StyleValue };
 }
 
-export default function useAbstractLayer<
+export function useAbstractLayer<
   Props extends BaseProps,
   NativeProps extends NativeBaseProps,
 >(
@@ -68,13 +68,13 @@ export default function useAbstractLayer<
 ): {
   baseProps: Props & BaseLayerProps;
   setNativeLayer: (
-    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+    instance: (Component<NativeProps> & Readonly<NativeMethods>) | null,
   ) => void;
   getStyleTypeFormatter: (styleType: string) => typeof processColor | undefined;
   setNativeProps: (nativeProps: { [key: string]: unknown }) => void;
 } {
   const nativeLayer = useRef<
-    (React.Component<NativeProps> & Readonly<NativeMethods>) | null
+    (Component<NativeProps> & Readonly<NativeMethods>) | null
   >(null);
 
   const baseProps = useMemo(() => {
@@ -94,7 +94,7 @@ export default function useAbstractLayer<
   }, [props]);
 
   const setNativeLayer = (
-    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+    instance: (Component<NativeProps> & Readonly<NativeMethods>) | null,
   ): void => {
     nativeLayer.current = instance;
   };