@maplibre/maplibre-react-native 10.0.0-alpha.2 → 10.0.0-alpha.21

package/javascript/components/Light.tsx

@@ -1,67 +1,40 @@
-import {LightLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
-import {StyleValue, transformStyle} from '../utils/StyleValue';
+import React from "react";
+import { requireNativeComponent } from "react-native";
 
-import AbstractLayer, {BaseLayerProps} from './AbstractLayer';
+import useAbstractLayer, { BaseLayerProps } from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { LightLayerStyleProps } from "../utils/MaplibreStyles";
+import { StyleValue } from "../utils/StyleValue";
 
-import React, {
-  Component,
-  createRef,
-  MutableRefObject,
-  ReactElement,
-} from 'react';
-import {NativeMethods, requireNativeComponent} from 'react-native';
+export const NATIVE_MODULE_NAME = "RCTMLNLight";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLLight';
-
-interface LightProps extends BaseProps {
+interface LightProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
   style?: LightLayerStyleProps;
 }
 
-interface NativeProps extends Omit<LightProps, 'style'> {
-  reactStyle?: {[key: string]: StyleValue};
+interface NativeProps extends Omit<LightProps, "style"> {
+  reactStyle?: { [key: string]: StyleValue };
 }
+
+const RCTMLNLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
 /**
  * Light represents the light source for extruded geometries
  */
-class Light extends AbstractLayer<LightProps, NativeProps> {
-  lightRef: MutableRefObject<
-    (Component<NativeProps> & Readonly<NativeMethods>) | null
-  >;
-
-  constructor(props: LightProps & BaseLayerProps) {
-    super(props);
-
-    this.lightRef = createRef<
-      (Component<NativeProps> & Readonly<NativeMethods>) | null
-    >();
-  }
-
-  setNativeProps(props: LightProps): void {
-    if (this.lightRef.current && props.style) {
-      const nativeProps = {
-        ...props,
-        reactStyle: transformStyle(props.style),
-      };
-      this.lightRef.current.setNativeProps(nativeProps);
-    }
-  }
-
-  render(): ReactElement {
-    return (
-      <RCTMGLLight
-        ref={this.lightRef}
-        testID="rctmglLight"
-        {...this.props}
-        reactStyle={this.getStyle()}
-      />
-    );
-  }
-}
-
-const RCTMGLLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const Light: React.FC<LightProps> = (props: LightProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    LightProps,
+    NativeProps
+  >({
+    ...props,
+  });
+
+  return (
+    <RCTMLNLight ref={setNativeLayer} testID="rctmlnLight" {...baseProps} />
+  );
+};
 
 export default Light;

package/javascript/components/LineLayer.tsx

@@ -1,42 +1,45 @@
-import {LineLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { LineLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactElement} from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
+const MapLibreGL = NativeModules.MLNModule;
 
-const MapLibreGL = NativeModules.MGLModule;
+export const NATIVE_MODULE_NAME = "RCTMLNLineLayer";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLLineLayer';
-
-interface LineLayerProps extends BaseProps, BaseLayerProps {
+export interface LineLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
   style?: LineLayerStyleProps;
 }
 
-interface NativeProps extends Omit<LineLayerProps, 'style'>, NativeBaseProps {}
+interface NativeProps extends Omit<LineLayerProps, "style">, NativeBaseProps {}
+
+const RCTMLNLineLayer =
+  requireNativeComponent<NativeBaseProps>(NATIVE_MODULE_NAME);
 
 /**
  * LineLayer is a style layer that renders one or more stroked polylines on the map.
  */
-class LineLayer extends AbstractLayer<LineLayerProps, NativeProps> {
-  static defaultProps = {
-    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  render(): ReactElement {
-    const props = {
-      ...this.baseProps,
-      sourceLayerID: this.props.sourceLayerID,
-    };
-    return <RCTMGLLineLayer ref={this.setNativeLayer} {...props} />;
-  }
-}
-
-const RCTMGLLineLayer =
-  requireNativeComponent<NativeBaseProps>(NATIVE_MODULE_NAME);
+const LineLayer: React.FC<LineLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: LineLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    LineLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNLineLayer ref={setNativeLayer} {...baseProps} />;
+};
 
 export default LineLayer;