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

package/javascript/Maplibre.ts

@@ -5,10 +5,12 @@ export {
   type CameraPadding,
   type CameraAnimationMode,
   type CameraBounds,
+  type CameraRef,
 } from './components/Camera';
-export {default as MapView, type MapViewState} from './components/MapView';
+export {default as MapView, type MapViewRef} from './components/MapView';
 export {default as Light} from './components/Light';
 export {default as PointAnnotation} from './components/PointAnnotation';
+export type {PointAnnotationRef} from './components/PointAnnotation';
 export {default as Annotation} from './components/annotations/Annotation';
 export {default as Callout} from './components/Callout';
 export {requestAndroidLocationPermissions} from './requestAndroidLocationPermissions';
@@ -16,8 +18,10 @@ export {
   default as UserLocation,
   UserLocationRenderMode,
 } from './components/UserLocation';
+export type {UserLocationRef} from './components/UserLocation';
 export {default as VectorSource} from './components/VectorSource';
 export {default as ShapeSource} from './components/ShapeSource';
+export type {ShapeSourceRef} from './components/ShapeSource';
 export {default as RasterSource} from './components/RasterSource';
 export {default as ImageSource} from './components/ImageSource';
 export {default as Images} from './components/Images';

package/javascript/components/BackgroundLayer.tsx

@@ -1,16 +1,18 @@
 import {BackgroundLayerStyleProps} from '../utils/MaplibreStyles';
 import BaseProps from '../types/BaseProps';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from '../hooks/useAbstractLayer';
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
-
-import React, {ReactNode} from 'react';
+import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
 const MapLibreGL = NativeModules.MLNModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMLNBackgroundLayer';
 
-interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
+export interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -21,23 +23,28 @@ interface NativeProps
   extends Omit<BackgroundLayerProps, 'style'>,
     NativeBaseProps {}
 
-class BackgroundLayer extends AbstractLayer<BackgroundLayerProps, NativeProps> {
-  static defaultProps = {
-    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  render(): ReactNode {
-    return (
-      <RCTMLNBackgroundLayer
-        testID="rctmlnBackgroundLayer"
-        ref={this.setNativeLayer}
-        {...this.baseProps}
-      />
-    );
-  }
-}
-
 const RCTMLNBackgroundLayer =
   requireNativeComponent<BackgroundLayerProps>(NATIVE_MODULE_NAME);
 
+const BackgroundLayer: React.FC<BackgroundLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: BackgroundLayerProps) => {
+  const {baseProps, setNativeLayer} = useAbstractLayer<
+    BackgroundLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return (
+    <RCTMLNBackgroundLayer
+      testID="rctmlnBackgroundLayer"
+      ref={setNativeLayer}
+      {...baseProps}
+    />
+  );
+};
+
 export default BackgroundLayer;

package/javascript/components/Callout.tsx

@@ -82,59 +82,59 @@ interface NativeProps extends Omit<CalloutProps, 'style'> {
 /**
  *  Callout that displays information about a selected annotation near the annotation.
  */
-class Callout extends React.PureComponent<CalloutProps> {
-  get _containerStyle(): ViewStyle[] {
-    const style = [
-      {
-        position: 'absolute',
-        zIndex: 999,
-        backgroundColor: 'transparent',
-      } as ViewStyle,
-    ];
+const Callout = (props: CalloutProps): ReactElement => {
+  const {
+    title,
+    style,
+    containerStyle,
+    contentStyle,
+    tipStyle,
+    textStyle,
+    children,
+  } = props;
 
-    if (this.props.containerStyle) {
-      style.push(this.props.containerStyle);
-    }
+  const _containerStyle: ViewStyle[] = [
+    {
+      position: 'absolute',
+      zIndex: 999,
+      backgroundColor: 'transparent',
+      ...containerStyle,
+    } as ViewStyle,
+  ];
 
-    return style;
-  }
+  const _hasChildren = React.Children.count(children) > 0;
 
-  get _hasChildren(): boolean {
-    return React.Children.count(this.props.children) > 0;
-  }
-
-  _renderDefaultCallout(): ReactElement {
+  const _renderDefaultCallout = (): ReactElement => {
     return (
-      <Animated.View style={[styles.container, this.props.style]}>
-        <View style={[styles.content, this.props.contentStyle]}>
-          <Text style={[styles.title, this.props.textStyle]}>
-            {this.props.title}
+      <Animated.View testID="container" style={[styles.container, style]}>
+        <View testID="wrapper" style={[styles.content, contentStyle]}>
+          <Text testID="title" style={[styles.title, textStyle]}>
+            {title}
           </Text>
         </View>
-        <View style={[styles.tip, this.props.tipStyle]} />
+        <View testID="tip" style={[styles.tip, tipStyle]} />
       </Animated.View>
     );
-  }
+  };
 
-  _renderCustomCallout(): ReactElement {
+  const _renderCustomCallout = (): ReactElement => {
     return (
-      <Animated.View {...this.props} style={this.props.style}>
-        {this.props.children}
+      <Animated.View testID="container" {...props} style={style}>
+        {children}
       </Animated.View>
     );
-  }
+  };
 
-  render(): ReactElement {
-    const calloutContent = this._hasChildren
-      ? this._renderCustomCallout()
-      : this._renderDefaultCallout();
-    return (
-      <RCTMLNCallout style={this._containerStyle}>
-        {calloutContent}
-      </RCTMLNCallout>
-    );
-  }
-}
+  const calloutContent = _hasChildren
+    ? _renderCustomCallout()
+    : _renderDefaultCallout();
+
+  return (
+    <RCTMLNCallout testID="callout" style={_containerStyle}>
+      {calloutContent}
+    </RCTMLNCallout>
+  );
+};
 
 const RCTMLNCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);