react-native-radar 3.31.0 → 4.0.0

package/android/src/newarch/java/com/radar/RadarModule.kt

@@ -143,7 +143,7 @@ class RadarModule(reactContext: ReactApplicationContext) :
     override fun initialize(publishableKey: String, fraud: Boolean): Unit {
         val editor = reactApplicationContext.getSharedPreferences("RadarSDK", Context.MODE_PRIVATE).edit()
         editor.putString("x_platform_sdk_type", "ReactNative")
-        editor.putString("x_platform_sdk_version", "3.31.0")
+        editor.putString("x_platform_sdk_version", "4.0.0")
         editor.apply()
 
         Radar.initialize(reactApplicationContext, publishableKey, radarReceiver, Radar.RadarLocationServicesProvider.GOOGLE, fraud, null, radarInAppMessageReceiver, currentActivity)

package/android/src/oldarch/java/com/radar/RadarModule.java

@@ -102,7 +102,7 @@ public class RadarModule extends ReactContextBaseJavaModule implements Permissio
         this.fraud = fraud;
         SharedPreferences.Editor editor = getReactApplicationContext().getSharedPreferences("RadarSDK", Context.MODE_PRIVATE).edit();
         editor.putString("x_platform_sdk_type", "ReactNative");
-        editor.putString("x_platform_sdk_version", "3.31.0");
+        editor.putString("x_platform_sdk_version", "4.0.0");
         editor.apply();
         Radar.initialize(getReactApplicationContext(), publishableKey, receiver, Radar.RadarLocationServicesProvider.GOOGLE, fraud, null, inAppMessageReceiver, getCurrentActivity());
         if (fraud) { 

package/dist/@types/types.d.ts

@@ -1,3 +1,5 @@
+import React from "react";
+import type { MapRef } from "@maplibre/maplibre-react-native";
 export type RadarMetadata = Record<string, string | number | boolean>;
 export interface RadarTrackOnceOptions {
     location?: Location;
@@ -544,7 +546,8 @@ export type RadarTripStatus = "unknown" | "started" | "approaching" | "arrived"
 export interface RadarMapOptions {
     mapStyle?: string;
     showUserLocation?: boolean;
-    onRegionDidChange?: (feature: RadarMapRegionChangeEvent) => void;
+    mapRef?: React.Ref<MapRef>;
+    onRegionDidChange?: (event: RadarMapRegionChangeEvent) => void;
     onDidFinishLoadingMap?: () => void;
     onWillStartLoadingMap?: () => void;
     onDidFailLoadingMap?: () => void;
@@ -552,7 +555,9 @@ export interface RadarMapOptions {
 export interface RadarMapRegionChangeEvent {
     center: [number, number];
     zoom: number;
-    bounds?: [number, number, number, number];
+    bounds?: [[number, number], [number, number]];
     bearing?: number;
     pitch?: number;
+    animated: boolean;
+    userInteraction: boolean;
 }

package/dist/ui/autocomplete.js

@@ -48,6 +48,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Autocomplete.js
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+let SafeAreaView;
+try {
+    SafeAreaView = require('react-native-safe-area-context').SafeAreaView;
+}
+catch (e) {
+    SafeAreaView = require('react-native').SafeAreaView;
+}
 const index_native_1 = __importDefault(require("../index.native"));
 const images_1 = require("./images");
 const styles_1 = __importDefault(require("./styles"));
@@ -183,7 +190,7 @@ const autocompleteUI = ({ options = {} }) => {
       </react_native_1.Animated.View>
       <react_native_1.Modal animationType="slide" transparent={false} visible={isOpen} onRequestClose={() => setIsOpen(false)}>
         <react_native_1.Animated.View style={{ flex: 1, opacity: modalOpacity }}>
-          <react_native_1.SafeAreaView>
+          <SafeAreaView>
             <react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === "ios" ? "padding" : "height"} keyboardVerticalOffset={50} style={styles.container}>
               <react_native_1.View style={styles.modalInputContainer}>
                 <react_native_1.TouchableOpacity onPress={() => {
@@ -208,7 +215,7 @@ const autocompleteUI = ({ options = {} }) => {
                   {renderFooter()}
                 </react_native_1.View>)}
             </react_native_1.KeyboardAvoidingView>
-          </react_native_1.SafeAreaView>
+          </SafeAreaView>
         </react_native_1.Animated.View>
       </react_native_1.Modal>
     </react_native_1.View>);

package/dist/ui/autocomplete.jsx

@@ -14,10 +14,15 @@ import {
   Dimensions,
   Easing,
   Keyboard,
-  SafeAreaView,
   Pressable,
   Platform,
 } from 'react-native';
+let SafeAreaView;
+try {
+  SafeAreaView = require('react-native-safe-area-context').SafeAreaView;
+} catch (e) {
+  SafeAreaView = require('react-native').SafeAreaView;
+}
 import Radar from '../index.native';
 import {
   BACK_ICON,

package/dist/ui/map.jsx

@@ -5,10 +5,19 @@ import { getHost, getPublishableKey } from '../helpers';
 import styles from './styles';
 
 let MapLibreGL;
+let MapLibreMap;
+let GeoJSONSource;
+let Layer;
 try {
   MapLibreGL = require('@maplibre/maplibre-react-native');
+  MapLibreMap = MapLibreGL.Map;
+  GeoJSONSource = MapLibreGL.GeoJSONSource;
+  Layer = MapLibreGL.Layer;
 } catch (e) {
   MapLibreGL = null;
+  MapLibreMap = null;
+  GeoJSONSource = null;
+  Layer = null;
 }
 
 const DEFAULT_STYLE = 'radar-default-v1';
@@ -25,8 +34,9 @@ const createStyleURL = async (style = DEFAULT_STYLE) => {
  * @param {Object} [props.mapOptions] - Map configuration options
  * @param {string} [props.mapOptions.mapStyle] - Map style identifier (defaults to 'radar-default-v1')
  * @param {boolean} [props.mapOptions.showUserLocation] - Whether to show the user's location on the map (default: true)
+ * @param {React.Ref} [props.mapOptions.mapRef] - Ref to the underlying MapLibre Map component
  * @param {function} [props.mapOptions.onRegionDidChange] - Callback fired when the map region changes
- * @param {Object} props.mapOptions.onRegionDidChange.feature - The region feature data
+ * @param {Object} props.mapOptions.onRegionDidChange.event - The region event data
  * @param {function} [props.mapOptions.onDidFinishLoadingMap] - Callback fired when the map finishes loading
  * @param {function} [props.mapOptions.onWillStartLoadingMap] - Callback fired when the map starts loading
  * @param {function} [props.mapOptions.onDidFailLoadingMap] - Callback fired when the map fails to load
@@ -80,54 +90,61 @@ const RadarMap = ({ mapOptions, children }) => {
   };
 
   const userLocationMapIndicator = (
-    <MapLibreGL.ShapeSource
+    <GeoJSONSource
       id="user-location"
-      shape={geoJSONUserLocation}
+      data={JSON.stringify(geoJSONUserLocation)}
     >
-      <MapLibreGL.CircleLayer
+      <Layer
         id="user-location-inner"
-        style={{
-          circleRadius: 15,
-          circleColor: '#000257',
-          circleOpacity: 0.2,
-          circlePitchAlignment: 'map',
+        type="circle"
+        paint={{
+          'circle-radius': 15,
+          'circle-color': '#000257',
+          'circle-opacity': 0.2,
+          'circle-pitch-alignment': 'map',
         }}
       />
-      <MapLibreGL.CircleLayer
+      <Layer
         id="user-location-middle"
-        style={{
-          circleRadius: 9,
-          circleColor: '#fff',
-          circlePitchAlignment: 'map',
+        type="circle"
+        paint={{
+          'circle-radius': 9,
+          'circle-color': '#fff',
+          'circle-pitch-alignment': 'map',
         }}
       />
-      <MapLibreGL.CircleLayer
+      <Layer
         id="user-location-outer"
-        style={{
-          circleRadius: 6,
-          circleColor: '#000257',
-          circlePitchAlignment: 'map',
+        type="circle"
+        paint={{
+          'circle-radius': 6,
+          'circle-color': '#000257',
+          'circle-pitch-alignment': 'map',
         }}
       />
-    </MapLibreGL.ShapeSource>
+    </GeoJSONSource>
   );
 
   return (
     <View style={styles.mapContainer}>
-      <MapLibreGL.MapView
+      <MapLibreMap
+        ref={mapOptions?.mapRef}
         style={styles.map}
-        pitchEnabled={false}
-        compassEnabled={false}
-        logoEnabled={false}
-        attributionEnabled
-        onRegionDidChange={mapOptions?.onRegionDidChange ? mapOptions.onRegionDidChange : null}
+        touchPitch={false}
+        compass={false}
+        logo={false}
+        attribution
+        onRegionDidChange={ mapOptions?.onRegionDidChange 
+          ? (event) => mapOptions.onRegionDidChange(event.nativeEvent) 
+          : null
+        }
         onDidFinishLoadingMap={mapOptions?.onDidFinishLoadingMap ? mapOptions.onDidFinishLoadingMap : null}
         onWillStartLoadingMap={mapOptions?.onWillStartLoadingMap ? mapOptions.onWillStartLoadingMap : null}
         onDidFailLoadingMap={mapOptions?.onDidFailLoadingMap ? mapOptions.onDidFailLoadingMap : null}
         mapStyle={styleURL}>
         {mapOptions?.showUserLocation !== false && userLocationMapIndicator}
         {children}
-      </MapLibreGL.MapView>
+      </MapLibreMap>
       <Image
         source={require('./map-logo.png')}
         style={styles.mapLogo}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.31.0";
+export declare const VERSION = "4.0.0";

package/dist/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // This file contains the version of the react-native-radar package
 // It should be updated to match the version in package.json
-exports.VERSION = '3.31.0';
+exports.VERSION = '4.0.0';

package/ios/RNRadar.mm

@@ -217,7 +217,7 @@ RCT_EXPORT_MODULE()
 RCT_EXPORT_METHOD(initialize:(NSString *)publishableKey fraud:(BOOL)fraud) {
     _publishableKey = publishableKey; 
     [[NSUserDefaults standardUserDefaults] setObject:@"ReactNative" forKey:@"radar-xPlatformSDKType"];
-    [[NSUserDefaults standardUserDefaults] setObject:@"3.31.0" forKey:@"radar-xPlatformSDKVersion"];
+    [[NSUserDefaults standardUserDefaults] setObject:@"4.0.0" forKey:@"radar-xPlatformSDKVersion"];
     [Radar initializeWithPublishableKey:publishableKey];
 }
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "React Native module for Radar, the leading geofencing and location tracking platform",
   "homepage": "https://radar.com",
   "license": "Apache-2.0",
-  "version": "3.31.0",
+  "version": "4.0.0",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -56,10 +56,11 @@
     ]
   },
   "peerDependencies": {
-    "@maplibre/maplibre-react-native": ">=10.2.1",
+    "@maplibre/maplibre-react-native": ">=11.0.0-beta.10",
     "expo": ">=43.0.5",
-    "react": ">= 16.8.6",
-    "react-native": ">= 0.60.0"
+    "react": ">= 19.1.0",
+    "react-native": ">= 0.80.0",
+    "react-native-safe-area-context": "^5.6.2"
   },
   "peerDependenciesMeta": {
     "@maplibre/maplibre-react-native": {
@@ -67,6 +68,9 @@
     },
     "expo": {
       "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
     }
   },
   "devDependencies": {

package/src/@types/maplibre-react-native.d.ts

@@ -0,0 +1,16 @@
+declare module "@maplibre/maplibre-react-native" {
+  export interface MapRef {
+    getCenter(): Promise<{ lng: number; lat: number }>;
+    getZoom(): Promise<number>;
+    getBearing(): Promise<number>;
+    getPitch(): Promise<number>;
+    getBounds(): Promise<{ ne: [number, number]; sw: [number, number] }>;
+    project(coordinate: [number, number]): Promise<{ x: number; y: number }>;
+    unproject(point: { x: number; y: number }): Promise<[number, number]>;
+    queryRenderedFeatures(
+      point: [number, number] | [[number, number], [number, number]],
+      filter?: string[],
+      layerIDs?: string[],
+    ): Promise<GeoJSON.FeatureCollection>;
+  }
+}

package/src/@types/types.ts

@@ -1,4 +1,6 @@
+import React from "react";
 import { Platform } from "react-native";
+import type { MapRef } from "@maplibre/maplibre-react-native";
 const platform = Platform.OS;
 
 export type RadarMetadata = Record<string, string | number | boolean>;
@@ -850,7 +852,8 @@ export type RadarTripStatus =
 export interface RadarMapOptions {
   mapStyle?: string;
   showUserLocation?: boolean;
-  onRegionDidChange?: (feature: RadarMapRegionChangeEvent) => void;
+  mapRef?: React.Ref<MapRef>;
+  onRegionDidChange?: (event: RadarMapRegionChangeEvent) => void;
   onDidFinishLoadingMap?: () => void;
   onWillStartLoadingMap?: () => void;
   onDidFailLoadingMap?: () => void;
@@ -859,7 +862,9 @@ export interface RadarMapOptions {
 export interface RadarMapRegionChangeEvent {
   center: [number, number];
   zoom: number;
-  bounds?: [number, number, number, number];
+  bounds?: [[number, number], [number, number]];
   bearing?: number;
   pitch?: number;
+  animated: boolean;
+  userInteraction: boolean;
 }

package/src/ui/autocomplete.jsx

@@ -14,10 +14,15 @@ import {
   Dimensions,
   Easing,
   Keyboard,
-  SafeAreaView,
   Pressable,
   Platform,
 } from 'react-native';
+let SafeAreaView;
+try {
+  SafeAreaView = require('react-native-safe-area-context').SafeAreaView;
+} catch (e) {
+  SafeAreaView = require('react-native').SafeAreaView;
+}
 import Radar from '../index.native';
 import {
   BACK_ICON,

package/src/ui/map.jsx

@@ -5,10 +5,19 @@ import { getHost, getPublishableKey } from '../helpers';
 import styles from './styles';
 
 let MapLibreGL;
+let MapLibreMap;
+let GeoJSONSource;
+let Layer;
 try {
   MapLibreGL = require('@maplibre/maplibre-react-native');
+  MapLibreMap = MapLibreGL.Map;
+  GeoJSONSource = MapLibreGL.GeoJSONSource;
+  Layer = MapLibreGL.Layer;
 } catch (e) {
   MapLibreGL = null;
+  MapLibreMap = null;
+  GeoJSONSource = null;
+  Layer = null;
 }
 
 const DEFAULT_STYLE = 'radar-default-v1';
@@ -25,8 +34,9 @@ const createStyleURL = async (style = DEFAULT_STYLE) => {
  * @param {Object} [props.mapOptions] - Map configuration options
  * @param {string} [props.mapOptions.mapStyle] - Map style identifier (defaults to 'radar-default-v1')
  * @param {boolean} [props.mapOptions.showUserLocation] - Whether to show the user's location on the map (default: true)
+ * @param {React.Ref} [props.mapOptions.mapRef] - Ref to the underlying MapLibre Map component
  * @param {function} [props.mapOptions.onRegionDidChange] - Callback fired when the map region changes
- * @param {Object} props.mapOptions.onRegionDidChange.feature - The region feature data
+ * @param {Object} props.mapOptions.onRegionDidChange.event - The region event data
  * @param {function} [props.mapOptions.onDidFinishLoadingMap] - Callback fired when the map finishes loading
  * @param {function} [props.mapOptions.onWillStartLoadingMap] - Callback fired when the map starts loading
  * @param {function} [props.mapOptions.onDidFailLoadingMap] - Callback fired when the map fails to load
@@ -80,54 +90,61 @@ const RadarMap = ({ mapOptions, children }) => {
   };
 
   const userLocationMapIndicator = (
-    <MapLibreGL.ShapeSource
+    <GeoJSONSource
       id="user-location"
-      shape={geoJSONUserLocation}
+      data={JSON.stringify(geoJSONUserLocation)}
     >
-      <MapLibreGL.CircleLayer
+      <Layer
         id="user-location-inner"
-        style={{
-          circleRadius: 15,
-          circleColor: '#000257',
-          circleOpacity: 0.2,
-          circlePitchAlignment: 'map',
+        type="circle"
+        paint={{
+          'circle-radius': 15,
+          'circle-color': '#000257',
+          'circle-opacity': 0.2,
+          'circle-pitch-alignment': 'map',
         }}
       />
-      <MapLibreGL.CircleLayer
+      <Layer
         id="user-location-middle"
-        style={{
-          circleRadius: 9,
-          circleColor: '#fff',
-          circlePitchAlignment: 'map',
+        type="circle"
+        paint={{
+          'circle-radius': 9,
+          'circle-color': '#fff',
+          'circle-pitch-alignment': 'map',
         }}
       />
-      <MapLibreGL.CircleLayer
+      <Layer
         id="user-location-outer"
-        style={{
-          circleRadius: 6,
-          circleColor: '#000257',
-          circlePitchAlignment: 'map',
+        type="circle"
+        paint={{
+          'circle-radius': 6,
+          'circle-color': '#000257',
+          'circle-pitch-alignment': 'map',
         }}
       />
-    </MapLibreGL.ShapeSource>
+    </GeoJSONSource>
   );
 
   return (
     <View style={styles.mapContainer}>
-      <MapLibreGL.MapView
+      <MapLibreMap
+        ref={mapOptions?.mapRef}
         style={styles.map}
-        pitchEnabled={false}
-        compassEnabled={false}
-        logoEnabled={false}
-        attributionEnabled
-        onRegionDidChange={mapOptions?.onRegionDidChange ? mapOptions.onRegionDidChange : null}
+        touchPitch={false}
+        compass={false}
+        logo={false}
+        attribution
+        onRegionDidChange={ mapOptions?.onRegionDidChange 
+          ? (event) => mapOptions.onRegionDidChange(event.nativeEvent) 
+          : null
+        }
         onDidFinishLoadingMap={mapOptions?.onDidFinishLoadingMap ? mapOptions.onDidFinishLoadingMap : null}
         onWillStartLoadingMap={mapOptions?.onWillStartLoadingMap ? mapOptions.onWillStartLoadingMap : null}
         onDidFailLoadingMap={mapOptions?.onDidFailLoadingMap ? mapOptions.onDidFailLoadingMap : null}
         mapStyle={styleURL}>
         {mapOptions?.showUserLocation !== false && userLocationMapIndicator}
         {children}
-      </MapLibreGL.MapView>
+      </MapLibreMap>
       <Image
         source={require('./map-logo.png')}
         style={styles.mapLogo}

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file contains the version of the react-native-radar package
 // It should be updated to match the version in package.json
-export const VERSION = '3.31.0';
+export const VERSION = '4.0.0';