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

package/android/rctmln/src/main/java/com/maplibre/rctmln/modules/RCTMLNSnapshotModule.java

@@ -16,13 +16,13 @@ import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.module.annotations.ReactModule;
-import com.mapbox.geojson.Feature;
-import com.mapbox.geojson.FeatureCollection;
-import com.mapbox.geojson.Point;
-import com.mapbox.mapboxsdk.camera.CameraPosition;
-import com.mapbox.mapboxsdk.snapshotter.MapSnapshot;
-import com.mapbox.mapboxsdk.snapshotter.MapSnapshotter;
-import com.mapbox.mapboxsdk.storage.FileSource;
+import org.maplibre.geojson.Feature;
+import org.maplibre.geojson.FeatureCollection;
+import org.maplibre.geojson.Point;
+import org.maplibre.android.camera.CameraPosition;
+import org.maplibre.android.snapshotter.MapSnapshot;
+import org.maplibre.android.snapshotter.MapSnapshotter;
+import org.maplibre.android.storage.FileSource;
 import com.maplibre.rctmln.utils.BitmapUtils;
 import com.maplibre.rctmln.utils.GeoJSONUtils;
 

package/android/rctmln/src/main/java/com/maplibre/rctmln/utils/ClusterPropertyEntry.java

@@ -1,6 +1,6 @@
 package com.maplibre.rctmln.utils;
 
-import com.mapbox.mapboxsdk.style.expressions.Expression;
+import org.maplibre.android.style.expressions.Expression;
 
 public class ClusterPropertyEntry {
     public Expression operator;

package/android/rctmln/src/main/java/com/maplibre/rctmln/utils/DownloadMapImageTask.java

@@ -20,8 +20,8 @@ import com.facebook.imagepipeline.image.CloseableStaticBitmap;
 import com.facebook.imagepipeline.request.ImageRequest;
 import com.facebook.imagepipeline.request.ImageRequestBuilder;
 import com.facebook.react.views.imagehelper.ImageSource;
-import com.mapbox.mapboxsdk.maps.MapboxMap;
-import com.mapbox.mapboxsdk.maps.Style;
+import org.maplibre.android.maps.MapLibreMap;
+import org.maplibre.android.maps.Style;
 
 import java.io.File;
 import java.lang.ref.WeakReference;
@@ -41,12 +41,12 @@ public class DownloadMapImageTask extends AsyncTask<Map.Entry<String, ImageEntry
     public static final String LOG_TAG = "DownloadMapImageTask";
 
     private WeakReference<Context> mContext;
-    private WeakReference<MapboxMap> mMap;
+    private WeakReference<MapLibreMap> mMap;
     @Nullable
     private OnAllImagesLoaded mCallback;
     private final Object mCallerContext;
 
-    public DownloadMapImageTask(Context context, MapboxMap map, @Nullable OnAllImagesLoaded callback) {
+    public DownloadMapImageTask(Context context, MapLibreMap map, @Nullable OnAllImagesLoaded callback) {
         mContext = new WeakReference<>(context.getApplicationContext());
         mMap = new WeakReference<>(map);
         mCallback = callback;
@@ -130,7 +130,7 @@ public class DownloadMapImageTask extends AsyncTask<Map.Entry<String, ImageEntry
 
     @Override
     protected void onPostExecute(List<Map.Entry<String, Bitmap>> images) {
-        MapboxMap map = mMap.get();
+        MapLibreMap map = mMap.get();
         if (map != null && images != null && images.size() > 0) {
             Style style = map.getStyle();
             if (style != null) {

package/android/rctmln/src/main/java/com/maplibre/rctmln/utils/ExpressionParser.java

@@ -4,8 +4,8 @@ import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.google.gson.JsonArray;
-import com.mapbox.mapboxsdk.style.expressions.Expression;
-import com.mapbox.mapboxsdk.style.expressions.Expression.Converter;
+import org.maplibre.android.style.expressions.Expression;
+import org.maplibre.android.style.expressions.Expression.Converter;
 
 import org.json.JSONArray;
 

package/android/rctmln/src/main/java/com/maplibre/rctmln/utils/GeoJSONUtils.java

@@ -6,19 +6,19 @@ import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeArray;
 import com.facebook.react.bridge.WritableNativeMap;
-import com.mapbox.geojson.Feature;
-import com.mapbox.geojson.FeatureCollection;
-import com.mapbox.geojson.Geometry;
-import com.mapbox.geojson.GeometryCollection;
-import com.mapbox.geojson.LineString;
-import com.mapbox.geojson.MultiPoint;
-import com.mapbox.geojson.Point;
-import com.mapbox.geojson.Polygon;
-import com.mapbox.mapboxsdk.geometry.LatLng;
-import com.mapbox.mapboxsdk.geometry.LatLngBounds;
-import com.mapbox.mapboxsdk.geometry.LatLngQuad;
-import com.mapbox.mapboxsdk.style.light.Position;
-import com.mapbox.turf.TurfMeasurement;
+import org.maplibre.geojson.Feature;
+import org.maplibre.geojson.FeatureCollection;
+import org.maplibre.geojson.Geometry;
+import org.maplibre.geojson.GeometryCollection;
+import org.maplibre.geojson.LineString;
+import org.maplibre.geojson.MultiPoint;
+import org.maplibre.geojson.Point;
+import org.maplibre.geojson.Polygon;
+import org.maplibre.android.geometry.LatLng;
+import org.maplibre.android.geometry.LatLngBounds;
+import org.maplibre.android.geometry.LatLngQuad;
+import org.maplibre.android.style.light.Position;
+import org.maplibre.turf.TurfMeasurement;
 
 import java.util.ArrayList;
 import java.util.List;

package/android/rctmln/src/main/java/com/maplibre/rctmln/utils/GeoViewport.java

@@ -2,9 +2,9 @@ package com.maplibre.rctmln.utils;
 
 import android.graphics.PointF;
 
-import com.mapbox.mapboxsdk.geometry.LatLng;
-import com.mapbox.mapboxsdk.geometry.LatLngBounds;
-import com.mapbox.mapboxsdk.geometry.VisibleRegion;
+import org.maplibre.android.geometry.LatLng;
+import org.maplibre.android.geometry.LatLngBounds;
+import org.maplibre.android.geometry.VisibleRegion;
 
 /**
  * Created by nickitaliano on 1/5/18.

package/android/rctmln/src/main/java/com/maplibre/rctmln/utils/SimpleEventCallback.java

@@ -1,6 +1,6 @@
 package com.maplibre.rctmln.utils;
 
-import com.mapbox.mapboxsdk.maps.MapboxMap;
+import org.maplibre.android.maps.MapLibreMap;
 
 import com.maplibre.rctmln.components.AbstractEventEmitter;
 import com.maplibre.rctmln.events.IEvent;
@@ -9,7 +9,7 @@ import com.maplibre.rctmln.events.IEvent;
  * Created by nickitaliano on 8/31/17.
  */
 
-public class SimpleEventCallback implements MapboxMap.CancelableCallback {
+public class SimpleEventCallback implements MapLibreMap.CancelableCallback {
     private AbstractEventEmitter mEventEmitter;
     private IEvent mEvent;
 

package/android/rctmln/src/main/java/com/maplibre/rctmln/utils/SphericalMercator.java

@@ -3,7 +3,7 @@ package com.maplibre.rctmln.utils;
 import android.graphics.Point;
 import android.graphics.PointF;
 
-import com.mapbox.mapboxsdk.geometry.LatLng;
+import org.maplibre.android.geometry.LatLng;
 
 import java.util.ArrayList;
 import java.util.HashMap;

package/docs/Camera.md

@@ -34,9 +34,9 @@ Map camera transitions to fit provided bounds
 ##### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `northEastCoordinates` | `Array` | `Yes` | North east coordinate of bound |
-| `southWestCoordinates` | `Array` | `Yes` | South west coordinate of bound |
-| `padding` | `n/a` | `No` | Padding for the bounds |
+| `northEastCoordinates` | `GeoJSON.Position` | `Yes` | North east coordinate of bound |
+| `southWestCoordinates` | `GeoJSON.Position` | `Yes` | South west coordinate of bound |
+| `padding` | `Number \| Array` | `No` | Padding for the bounds |
 | `animationDuration` | `Number` | `No` | Duration of camera animation |
 
 

package/docs/MapView.md

@@ -16,40 +16,16 @@
 | pitchEnabled | `boolean` | `true` | `false` | Enable/Disable pitch on map |
 | rotateEnabled | `boolean` | `true` | `false` | Enable/Disable rotation on map |
 | attributionEnabled | `boolean` | `true` | `false` | Enable/Disable attribution on map.<br/><br/>This must be enabled for Mapbox-hosted tiles and styles. Please refer to the Mapbox Terms of Service.<br/>Other providers do not require this. |
-| attributionPosition | `\| {
-    top?: number;
-    left?: number;
-  }
-\| {
-    top?: number;
-    right?: number;
-  }
-\| {
-    bottom?: number;
-    left?: number;
-  }
-\| {
-    bottom?: number;
-    right?: number;
-  }` | `none` | `false` | Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map |
+| attributionPosition | `\| {top?: number; left?: number}
+\| {top?: number; right?: number}
+\| {bottom?: number; left?: number}
+\| {bottom?: number; right?: number}` | `none` | `false` | Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map |
 | tintColor | `string \| unknown[]` | `none` | `false` | MapView's tintColor |
 | logoEnabled | `boolean` | `false` | `false` | Enable/Disable the logo on the map. |
-| logoPosition | `\| {
-    top?: number;
-    left?: number;
-  }
-\| {
-    top?: number;
-    right?: number;
-  }
-\| {
-    bottom?: number;
-    left?: number;
-  }
-\| {
-    bottom?: number;
-    right?: number;
-  }` | `none` | `false` | Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map |
+| logoPosition | `\| {top?: number; left?: number}
+\| {top?: number; right?: number}
+\| {bottom?: number; left?: number}
+\| {bottom?: number; right?: number}` | `none` | `false` | Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map |
 | compassEnabled | `boolean` | `none` | `false` | Enable/Disable the compass from appearing on the map |
 | compassViewPosition | `number` | `none` | `false` | Change corner of map the compass starts at. 0: TopLeft, 1: TopRight, 2: BottomLeft, 3: BottomRight |
 | compassViewMargins | `object` | `none` | `false` | Add margins to the compass with x and y values |
@@ -115,7 +91,7 @@ Returns an array of rendered map features that intersect with a given point.
 ##### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `point` | `tuple` | `Yes` | A point expressed in the map view’s coordinate system. |
+| `point` | `tuple` | `Yes` | undefined |
 | `filter` | `FilterExpression` | `No` | A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array. |
 | `layerIDs` | `Array` | `No` | A array of layer id's to filter the features by |
 

package/docs/UserLocation.md

@@ -14,14 +14,22 @@
 | children | `ReactElement \| ReactElement[]` | `none` | `false` | Custom location icon of type mapbox-gl-native components<br/><br/>NOTE: Forking maintainer does not understand the above comment. |
 
 ### methods
-#### setLocationManager({running}: {running: boolean})
+#### setLocationManager({
+  running,
+}: {
+  running: boolean;
+})
 
 Whether to start or stop listening to the locationManager<br/><br/>Notice, that listening will start automatically when<br/>either `onUpdate` or `visible` are set
 
 ##### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `{running}: {running: boolean}` | `{running:boolean}` | `Yes` | undefined |
+| `{
+  running,
+}: {
+  running: boolean;
+}` | `{running:boolean;}` | `Yes` | undefined |
 
 
 #### needsLocationManagerRunning()

package/docs/docs.json

@@ -25,24 +25,9 @@
       {
         "name": "symbolStyle",
         "docblock": null,
-        "modifiers": [
-          "get"
-        ],
+        "modifiers": [],
         "params": [],
-        "returns": {
-          "type": {
-            "name": "union",
-            "raw": "SymbolLayerStyleProps | undefined",
-            "elements": [
-              {
-                "name": "SymbolLayerStyleProps"
-              },
-              {
-                "name": "undefined"
-              }
-            ]
-          }
-        }
+        "returns": null
       }
     ],
     "props": [
@@ -268,14 +253,14 @@
     "methods": [
       {
         "name": "fitBounds",
-        "docblock": "Map camera transitions to fit provided bounds\n\n@example\nthis.camera.fitBounds([lng, lat], [lng, lat])\nthis.camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides\nthis.camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)\nthis.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)\n\n@param {Array<Number>} northEastCoordinates - North east coordinate of bound\n@param {Array<Number>} southWestCoordinates - South west coordinate of bound\n@param {Number|Array<Number>=} padding - Padding for the bounds\n@param {Number=} animationDuration - Duration of camera animation\n@return {void}",
+        "docblock": "Map camera transitions to fit provided bounds\n\n@example\nthis.camera.fitBounds([lng, lat], [lng, lat])\nthis.camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides\nthis.camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)\nthis.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)\n\n@param {Array<Number>} northEastCoordinates - North east coordinate of bound\n@param {Array<Number>} southWestCoordinates - South west coordinate of bound\n@param {Number|Array<Number>|undefined} padding - Padding for the bounds\n@param {Number=} animationDuration - Duration of camera animation\n@return {void}",
         "modifiers": [],
         "params": [
           {
             "name": "northEastCoordinates",
             "description": "North east coordinate of bound",
             "type": {
-              "name": "Array"
+              "name": "GeoJSON.Position"
             },
             "optional": false
           },
@@ -283,7 +268,7 @@
             "name": "southWestCoordinates",
             "description": "South west coordinate of bound",
             "type": {
-              "name": "Array"
+              "name": "GeoJSON.Position"
             },
             "optional": false
           },
@@ -291,7 +276,7 @@
             "name": "padding",
             "description": "Padding for the bounds",
             "type": {
-              "name": null
+              "name": "Number \\| Array"
             },
             "optional": true
           },
@@ -1586,7 +1571,8 @@
       }
     ],
     "composes": [
-      "BaseProps"
+      "BaseProps",
+      "BaseLayerProps"
     ],
     "fileNameWithExt": "Light.tsx",
     "name": "Light",
@@ -2136,7 +2122,7 @@
       },
       {
         "name": "getVisibleBounds",
-        "docblock": "The coordinate bounds(ne, sw) visible in the users’s viewport.\n\n@example\nconst visibleBounds = await this._map.getVisibleBounds();\n\n@return {VisibleBounds}",
+        "docblock": "The coordinate bounds(ne, sw) visible in the users’s viewport.\n\n@example\nconst visibleBounds = await this._map.getVisibleBounds();\n\n@return {Array}",
         "modifiers": [
           "async"
         ],
@@ -2169,18 +2155,17 @@
       },
       {
         "name": "queryRenderedFeaturesAtPoint",
-        "docblock": "Returns an array of rendered map features that intersect with a given point.\n\n@example\nthis._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])\n\n@typedef {number} ScreenPointX\n@typedef {number} ScreenPointY\n@param  {[ScreenPointX, ScreenPointY]} point - A point expressed in the map view’s coordinate system.\n@param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.\n@param  {Array=} layerIDs - A array of layer id's to filter the features by\n@return {GeoJSON.FeatureCollection}",
+        "docblock": "Returns an array of rendered map features that intersect with a given point.\n\n@example\nthis._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])\n\n@param  {Array<Number>} coordinate - A point expressed in the map view’s coordinate system.\n@param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.\n@param  {Array=} layerIDs - A array of layer id's to filter the features by\n@return {GeoJSON.FeatureCollection}",
         "modifiers": [
           "async"
         ],
         "params": [
           {
             "name": "point",
-            "description": "A point expressed in the map view’s coordinate system.",
+            "optional": false,
             "type": {
               "name": "tuple"
-            },
-            "optional": false
+            }
           },
           {
             "name": "filter",
@@ -2500,7 +2485,7 @@
       {
         "name": "attributionPosition",
         "required": false,
-        "type": "\\| {\n    top?: number;\n    left?: number;\n  }\n\\| {\n    top?: number;\n    right?: number;\n  }\n\\| {\n    bottom?: number;\n    left?: number;\n  }\n\\| {\n    bottom?: number;\n    right?: number;\n  }",
+        "type": "\\| {top?: number; left?: number}\n\\| {top?: number; right?: number}\n\\| {bottom?: number; left?: number}\n\\| {bottom?: number; right?: number}",
         "default": "none",
         "description": "Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map"
       },
@@ -2521,7 +2506,7 @@
       {
         "name": "logoPosition",
         "required": false,
-        "type": "\\| {\n    top?: number;\n    left?: number;\n  }\n\\| {\n    top?: number;\n    right?: number;\n  }\n\\| {\n    bottom?: number;\n    left?: number;\n  }\n\\| {\n    bottom?: number;\n    right?: number;\n  }",
+        "type": "\\| {top?: number; left?: number}\n\\| {top?: number; right?: number}\n\\| {bottom?: number; left?: number}\n\\| {bottom?: number; right?: number}",
         "default": "none",
         "description": "Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map"
       },
@@ -4778,10 +4763,10 @@
         ],
         "params": [
           {
-            "name": "{running}: {running: boolean}",
+            "name": "{\n  running,\n}: {\n  running: boolean;\n}",
             "optional": false,
             "type": {
-              "name": "{running:boolean}"
+              "name": "{running:boolean;}"
             }
           }
         ],

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);