react-native-radar 3.23.2 → 3.23.4

package/android/build.gradle

@@ -49,6 +49,7 @@ android {
   buildTypes {
     release {
       minifyEnabled false
+      consumerProguardFiles "proguard-rules.pro"
     }
   }
 

package/android/proguard-rules.pro

@@ -0,0 +1,4 @@
+-dontwarn com.huawei.**
+
+-dontwarn com.google.android.play.integrity.**
+-dontwarn com.google.android.play.core.integrity.**

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.23.2")
+        editor.putString("x_platform_sdk_version", "3.23.4")
         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.23.2");
+        editor.putString("x_platform_sdk_version", "3.23.4");
         editor.apply();
         Radar.initialize(getReactApplicationContext(), publishableKey, receiver, Radar.RadarLocationServicesProvider.GOOGLE, fraud, null, inAppMessageReceiver, getCurrentActivity());
         if (fraud) { 

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

@@ -541,3 +541,17 @@ export interface RadarTrackingOptionsForegroundService {
     iconColor?: string;
 }
 export type RadarTripStatus = "unknown" | "started" | "approaching" | "arrived" | "expired" | "completed" | "canceled";
+export interface RadarMapOptions {
+    mapStyle?: string;
+    onRegionDidChange?: (feature: RadarMapRegionChangeEvent) => void;
+    onDidFinishLoadingMap?: () => void;
+    onWillStartLoadingMap?: () => void;
+    onDidFailLoadingMap?: () => void;
+}
+export interface RadarMapRegionChangeEvent {
+    center: [number, number];
+    zoom: number;
+    bounds?: [number, number, number, number];
+    bearing?: number;
+    pitch?: number;
+}

package/dist/index.d.ts

@@ -7,5 +7,6 @@ declare let Autocomplete: any;
 export { Autocomplete };
 declare let Map: any;
 export { Map };
+export type { RadarMapProps } from "./ui/map";
 export * from "./@types/types";
 export * from "./@types/RadarNativeInterface";

package/dist/ui/autocomplete.jsx

@@ -0,0 +1,324 @@
+// Autocomplete.js
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import {
+  View,
+  TextInput,
+  FlatList,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  Image,
+  Modal,
+  KeyboardAvoidingView,
+  Animated,
+  Dimensions,
+  Easing,
+  Keyboard,
+  SafeAreaView,
+  Pressable,
+  Platform,
+} from 'react-native';
+import Radar from '../index.native';
+import {
+  BACK_ICON,
+  SEARCH_ICON,
+  RADAR_LOGO,
+  MARKER_ICON,
+  CLOSE_ICON,
+} from "./images";
+import { default as defaultStyles } from './styles';
+
+const defaultAutocompleteOptions = {
+  debounceMS: 200, // Debounce time in milliseconds
+  minCharacters: 3, // Minimum number of characters to trigger autocomplete
+  limit: 8, // Maximum number of results to return
+  placeholder: "Search address", // Placeholder text for the input field
+  showMarkers: true,
+  disabled: false,
+};
+
+const autocompleteUI = ({ options = {} }) => {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const animationValue = useRef(new Animated.Value(0)).current; // animation value
+  const timerRef = useRef(null);
+  const textInputRef = useRef(null);
+
+
+  const config = { ...defaultAutocompleteOptions, ...options };
+  const style = config.style || {};
+
+  const fetchResults = useCallback(
+    async (searchQuery) => {
+      if (searchQuery.length < config.minCharacters) return;
+
+      const { limit, layers, countryCode } = config;
+      const params = { query: searchQuery, limit, layers, countryCode };
+
+      if (config.near && config.near.latitude && config.near.longitude) {
+        params.near = config.near;
+      }
+
+      try {
+        const result = await Radar.autocomplete(params);
+
+        if (config.onResults && typeof config.onResults === "function") {
+          config.onResults(result.addresses);
+        }
+
+        setResults(result.addresses);
+        setIsOpen(true);
+      } catch (error) {
+        if (config.onError && typeof config.onError === "function") {
+          config.onError(error);
+        }
+      }
+    },
+    [config]
+  );
+
+  const handleInput = useCallback(
+    (text) => {
+      setQuery(text);
+
+      // Clear the existing timer
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+
+      if (text.length < config.minCharacters) {
+        return;
+      }
+
+      // Set the new timer
+      timerRef.current = setTimeout(() => {
+        fetchResults(text);
+      }, config.debounceMS);
+    },
+    [config, fetchResults]
+  );
+
+  const handleSelect = (item) => {
+    setQuery(item.formattedAddress);
+    setIsOpen(false);
+
+    if (typeof config.onSelection === "function") {
+      config.onSelection(item);
+    }
+  };
+
+  const renderFooter = () => {
+    if (results.length === 0) return null;
+
+    return (
+      <View style={styles.footerContainer}>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <Text style={styles.footerText}>Powered by</Text>
+          <Image
+            source={RADAR_LOGO}
+            resizeMode="contain"
+            style={defaultStyles.logo}
+          />
+        </View>
+      </View>
+    );
+  };
+
+  const renderItem = ({ item }) => (
+    <Pressable
+      style={({ pressed }) => [
+        {
+          ...styles.resultItem,
+          backgroundColor: pressed
+            ? styles.resultItem.pressedBackgroundColor
+            : styles.resultItem.backgroundColor,
+        },
+      ]}
+      onPress={() => handleSelect(item)}
+    >
+      <View style={styles.addressContainer}>
+        <View style={styles.pinIconContainer}>
+          {config.showMarkers ? (
+            <Image source={MARKER_ICON} style={styles.pinIcon} />
+          ) : null}
+        </View>
+        <View style={styles.addressTextContainer}>
+          <Text numberOfLines={1} style={styles.addressText}>
+            {item.addressLabel || item?.placeLabel}
+          </Text>
+          {item?.formattedAddress.length > 0 && (
+            <Text numberOfLines={1} style={styles.addressSubtext}>
+              {item?.formattedAddress?.replace(
+                `${item?.addressLabel || item?.placeLabel}, `,
+                ""
+              )}
+            </Text>
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+
+  const styles = {
+    ...defaultStyles,
+    container: StyleSheet.compose(defaultStyles.container, style.container),
+    input: StyleSheet.compose(defaultStyles.input, style.input),
+    inputContainer: StyleSheet.compose(
+      defaultStyles.inputContainer,
+      style.inputContainer
+    ),
+    modalInputContainer: StyleSheet.compose(
+      defaultStyles.modalInputContainer,
+      style.modalInputContainer
+    ),
+    resultList: StyleSheet.compose(defaultStyles.resultList, style.resultList),
+    resultItem: StyleSheet.compose({...defaultStyles.resultItem, pressedBackgroundColor: '#F6FAFC'}, style.resultItem),
+    addressContainer: StyleSheet.compose(
+      defaultStyles.addressContainer,
+      style.addressContainer
+    ),
+    pinIconContainer: StyleSheet.compose(
+      defaultStyles.pinIconContainer,
+      style.pinIconContainer
+    ),
+    pinIcon: StyleSheet.compose(defaultStyles.pinIcon, style.pinIcon),
+    addressTextContainer: StyleSheet.compose(
+      defaultStyles.addressTextContainer,
+      style.addressTextContainer
+    ),
+    addressText: StyleSheet.compose(
+      defaultStyles.addressText,
+      style.addressText
+    ),
+    addressSubtext: StyleSheet.compose(
+      defaultStyles.addressSubtext,
+      style.addressSubtext
+    ),
+    footerContainer: StyleSheet.compose(
+      defaultStyles.footerContainer,
+      style.footerContainer
+    ),
+    footerText: StyleSheet.compose(defaultStyles.footerText, style.footerText),
+  };
+
+  useEffect(() => {
+    Animated.timing(animationValue, {
+      toValue: isOpen ? 1 : 0,
+      duration: 300,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: false,
+    }).start();
+  }, [isOpen]);
+
+  const screenHeight = Dimensions.get("window").height;
+
+  const inputHeight = animationValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [40, screenHeight],
+  });
+
+  const modalOpacity = animationValue.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0, 0, 1],
+  });
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={{ height: inputHeight }}>
+        <TouchableOpacity
+          style={styles.inputContainer}
+          onPress={() => {
+            if (config.disabled) return;
+
+            setIsOpen(true);
+            // Set the focus on the other textinput after it opens
+            setTimeout(() => {
+              textInputRef.current.focus();
+            }, 100);
+          }}
+        >
+          <Image source={SEARCH_ICON} style={styles.inputIcon} />
+          <TextInput
+            style={styles.input}
+            onFocus={() => {
+              setIsOpen(true);
+              setTimeout(() => {
+                textInputRef.current.focus();
+              }, 100);
+            }}
+            value={query}
+            returnKeyType="done"
+            placeholder={config.placeholder}
+            placeholderTextColor="#acbdc8"
+          />
+        </TouchableOpacity>
+      </Animated.View>
+      <Modal
+        animationType="slide"
+        transparent={false}
+        visible={isOpen}
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <Animated.View style={{ flex: 1, opacity: modalOpacity }}>
+          <SafeAreaView>
+            <KeyboardAvoidingView
+              behavior={Platform.OS === "ios" ? "padding" : "height"}
+              keyboardVerticalOffset={50}
+              style={styles.container}
+            >
+              <View style={styles.modalInputContainer}>
+                <TouchableOpacity
+                  onPress={() => {
+                    setIsOpen(false);
+                  }}
+                >
+                  <Image source={BACK_ICON} style={styles.inputIcon} />
+                </TouchableOpacity>
+                <TextInput
+                  ref={textInputRef}
+                  style={styles.input}
+                  onChangeText={handleInput}
+                  value={query}
+                  placeholder={config.placeholder}
+                  returnKeyType="done"
+                  onSubmitEditing={() => {
+                    setIsOpen(false);
+                  }}
+                  placeholderTextColor="#acbdc8"
+                />
+                <TouchableOpacity
+                  onPress={() => {
+                    setQuery("");
+                  }}
+                >
+                  <Image source={CLOSE_ICON} style={styles.closeIcon} />
+                </TouchableOpacity>
+              </View>
+              {results.length > 0 && (
+                <View style={styles.resultListWrapper}>
+                  <FlatList
+                    style={styles.resultList}
+                    data={results}
+                    onScroll={() => {
+                      textInputRef.current.blur();
+                      Keyboard.dismiss();
+                    }}
+                    keyboardShouldPersistTaps="handled"
+                    renderItem={renderItem}
+                    keyExtractor={(item) =>
+                      item.formattedAddress + item.postalCode
+                    }
+                  />
+                  {renderFooter()}
+                </View>
+              )}
+            </KeyboardAvoidingView>
+          </SafeAreaView>
+        </Animated.View>
+      </Modal>
+    </View>
+  );
+};
+
+export default autocompleteUI;

package/dist/ui/map.d.ts

@@ -1,6 +1,21 @@
-export default RadarMap;
-declare function RadarMap({ mapOptions, children }: {
-    mapOptions: any;
-    children: any;
-}): React.JSX.Element | null;
 import React from 'react';
+import { RadarMapOptions } from '../@types/types';
+export interface RadarMapProps {
+    /**
+     * Configuration options for the RadarMap component
+     */
+    mapOptions?: RadarMapOptions;
+    /**
+     * Child components to render within the map
+     */
+    children?: React.ReactNode;
+}
+/**
+ * TypeScript wrapper for the RadarMap component that provides type safety
+ * while delegating the implementation to the JavaScript version.
+ *
+ * @param props - The props for the RadarMap component
+ * @returns The RadarMap component with proper TypeScript typing
+ */
+declare const RadarMap: React.FC<RadarMapProps>;
+export default RadarMap;

package/dist/ui/map.js

@@ -1,132 +1,18 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const index_native_1 = __importDefault(require("../index.native"));
-const helpers_1 = require("../helpers");
-const styles_1 = __importDefault(require("./styles"));
-let MapLibreGL;
-try {
-    MapLibreGL = require('@maplibre/maplibre-react-native');
-}
-catch (e) {
-    MapLibreGL = null;
-}
-const DEFAULT_STYLE = 'radar-default-v1';
-const createStyleURL = (...args_1) => __awaiter(void 0, [...args_1], void 0, function* (style = DEFAULT_STYLE) {
-    const host = yield (0, helpers_1.getHost)();
-    const publishableKey = yield (0, helpers_1.getPublishableKey)();
-    return `${host}/maps/styles/${style}?publishableKey=${publishableKey}`;
-});
-const RadarMap = ({ mapOptions, children }) => {
-    const [styleURL, setStyleURL] = (0, react_1.useState)(null);
-    const [userLocation, setUserLocation] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        createStyleURL((mapOptions === null || mapOptions === void 0 ? void 0 : mapOptions.mapStyle) || DEFAULT_STYLE).then((result) => {
-            setStyleURL(result);
-        });
-    }, [mapOptions]);
-    (0, react_1.useEffect)(() => {
-        index_native_1.default.getLocation().then((result) => {
-            var _a, _b;
-            if (((_a = result === null || result === void 0 ? void 0 : result.location) === null || _a === void 0 ? void 0 : _a.latitude) && ((_b = result === null || result === void 0 ? void 0 : result.location) === null || _b === void 0 ? void 0 : _b.longitude)) {
-                setUserLocation({
-                    latitude: result.location.latitude,
-                    longitude: result.location.longitude,
-                });
-            }
-        }).catch((err) => {
-            // eslint-disable-next-line no-console
-            console.warn(`Radar SDK: Failed to get location: ${err}`);
-        });
-    }, [mapOptions]);
-    if (!styleURL) {
-        return null;
-    }
-    if (!MapLibreGL) {
-        return null;
-    }
-    const geoJSONUserLocation = {
-        type: 'FeatureCollection',
-        features: (userLocation === null || userLocation === void 0 ? void 0 : userLocation.longitude) !== undefined ? [
-            {
-                type: 'Feature',
-                geometry: {
-                    type: 'Point',
-                    coordinates: [userLocation.longitude, userLocation.latitude],
-                },
-            },
-        ] : [],
-    };
-    const userLocationMapIndicator = (<MapLibreGL.ShapeSource id="user-location" shape={geoJSONUserLocation}>
-      <MapLibreGL.CircleLayer id="user-location-inner" style={{
-            circleRadius: 15,
-            circleColor: '#000257',
-            circleOpacity: 0.2,
-            circlePitchAlignment: 'map',
-        }}/>
-      <MapLibreGL.CircleLayer id="user-location-middle" style={{
-            circleRadius: 9,
-            circleColor: '#fff',
-            circlePitchAlignment: 'map',
-        }}/>
-      <MapLibreGL.CircleLayer id="user-location-outer" style={{
-            circleRadius: 6,
-            circleColor: '#000257',
-            circlePitchAlignment: 'map',
-        }}/>
-    </MapLibreGL.ShapeSource>);
-    return (<react_native_1.View style={styles_1.default.mapContainer}>
-      <MapLibreGL.MapView style={styles_1.default.map} pitchEnabled={false} compassEnabled={false} logoEnabled={false} attributionEnabled onRegionDidChange={(mapOptions === null || mapOptions === void 0 ? void 0 : mapOptions.onRegionDidChange) ? mapOptions.onRegionDidChange : null} mapStyle={styleURL}>
-        {userLocationMapIndicator}
-        {children}
-      </MapLibreGL.MapView>
-      <react_native_1.Image source={require('./map-logo.png')} style={styles_1.default.mapLogo}/>
-    </react_native_1.View>);
+const react_1 = __importDefault(require("react"));
+const RadarMapJS = require('./map.jsx').default;
+/**
+ * TypeScript wrapper for the RadarMap component that provides type safety
+ * while delegating the implementation to the JavaScript version.
+ *
+ * @param props - The props for the RadarMap component
+ * @returns The RadarMap component with proper TypeScript typing
+ */
+const RadarMap = (props) => {
+    return react_1.default.createElement(RadarMapJS, props);
 };
 exports.default = RadarMap;

package/dist/ui/map.jsx

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import { View, Image } from 'react-native';
+import Radar from '../index.native';
+import { getHost, getPublishableKey } from '../helpers';
+import styles from './styles';
+
+let MapLibreGL;
+try {
+  MapLibreGL = require('@maplibre/maplibre-react-native');
+} catch (e) {
+  MapLibreGL = null;
+}
+
+const DEFAULT_STYLE = 'radar-default-v1';
+
+const createStyleURL = async (style = DEFAULT_STYLE) => {
+  const host = await getHost();
+  const publishableKey = await getPublishableKey();
+  return `${host}/maps/styles/${style}?publishableKey=${publishableKey}`;
+};
+
+/**
+ * RadarMap component for displaying maps with Radar integration
+ * @param {Object} props - Component props
+ * @param {Object} [props.mapOptions] - Map configuration options
+ * @param {string} [props.mapOptions.mapStyle] - Map style identifier (defaults to 'radar-default-v1')
+ * @param {function} [props.mapOptions.onRegionDidChange] - Callback fired when the map region changes
+ * @param {Object} props.mapOptions.onRegionDidChange.feature - The region feature 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
+ * @param {React.ReactNode} [props.children] - Child components to render within the map
+ * @returns {React.Component|null} The RadarMap component or null if dependencies are missing
+ */
+
+const RadarMap = ({ mapOptions, children }) => {
+  const [styleURL, setStyleURL] = useState(null);
+  const [userLocation, setUserLocation] = useState(null);
+
+  useEffect(() => {
+    createStyleURL(mapOptions?.mapStyle || DEFAULT_STYLE).then((result) => {
+      setStyleURL(result);
+    });
+  }, [mapOptions]);
+
+  useEffect(() => {
+    Radar.getLocation().then((result) => {
+      if (result?.location?.latitude && result?.location?.longitude) {
+        setUserLocation({
+          latitude: result.location.latitude,
+          longitude: result.location.longitude,
+        });
+      }
+    }).catch((err) => {
+      // eslint-disable-next-line no-console
+      console.warn(`Radar SDK: Failed to get location: ${err}`);
+    });
+  }, [mapOptions]);
+
+  if (!styleURL) {
+    return null;
+  }
+
+  if (!MapLibreGL) {
+    return null;
+  }
+
+  const geoJSONUserLocation = {
+    type: 'FeatureCollection',
+    features: userLocation?.longitude !== undefined ? [
+      {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [userLocation.longitude, userLocation.latitude],
+        },
+      },
+    ] : [],
+  };
+
+  const userLocationMapIndicator = (
+    <MapLibreGL.ShapeSource
+      id="user-location"
+      shape={geoJSONUserLocation}
+    >
+      <MapLibreGL.CircleLayer
+        id="user-location-inner"
+        style={{
+          circleRadius: 15,
+          circleColor: '#000257',
+          circleOpacity: 0.2,
+          circlePitchAlignment: 'map',
+        }}
+      />
+      <MapLibreGL.CircleLayer
+        id="user-location-middle"
+        style={{
+          circleRadius: 9,
+          circleColor: '#fff',
+          circlePitchAlignment: 'map',
+        }}
+      />
+      <MapLibreGL.CircleLayer
+        id="user-location-outer"
+        style={{
+          circleRadius: 6,
+          circleColor: '#000257',
+          circlePitchAlignment: 'map',
+        }}
+      />
+    </MapLibreGL.ShapeSource>
+  );
+
+  return (
+    <View style={styles.mapContainer}>
+      <MapLibreGL.MapView
+        style={styles.map}
+        pitchEnabled={false}
+        compassEnabled={false}
+        logoEnabled={false}
+        attributionEnabled
+        onRegionDidChange={mapOptions?.onRegionDidChange ? mapOptions.onRegionDidChange : null}
+        onDidFinishLoadingMap={mapOptions?.onDidFinishLoadingMap ? mapOptions.onDidFinishLoadingMap : null}
+        onWillStartLoadingMap={mapOptions?.onWillStartLoadingMap ? mapOptions.onWillStartLoadingMap : null}
+        onDidFailLoadingMap={mapOptions?.onDidFailLoadingMap ? mapOptions.onDidFailLoadingMap : null}
+        mapStyle={styleURL}>
+        {userLocationMapIndicator}
+        {children}
+      </MapLibreGL.MapView>
+      <Image
+        source={require('./map-logo.png')}
+        style={styles.mapLogo}
+      />
+    </View>
+  );
+};
+
+export default RadarMap;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.23.2";
+export declare const VERSION = "3.23.4";

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.23.2';
+exports.VERSION = '3.23.4';

package/ios/RNRadar.mm

@@ -186,7 +186,7 @@ RCT_EXPORT_MODULE()
 
 RCT_EXPORT_METHOD(initialize:(NSString *)publishableKey fraud:(BOOL)fraud) {
     [[NSUserDefaults standardUserDefaults] setObject:@"ReactNative" forKey:@"radar-xPlatformSDKType"];
-    [[NSUserDefaults standardUserDefaults] setObject:@"3.23.2" forKey:@"radar-xPlatformSDKVersion"];
+    [[NSUserDefaults standardUserDefaults] setObject:@"3.23.4" 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.23.2",
+  "version": "3.23.4",
   "main": "dist/index.js",
   "files": [
     "dist",

package/src/@types/types.ts

@@ -846,3 +846,19 @@ export type RadarTripStatus =
   | "expired"
   | "completed"
   | "canceled";
+
+export interface RadarMapOptions {
+  mapStyle?: string;
+  onRegionDidChange?: (feature: RadarMapRegionChangeEvent) => void;
+  onDidFinishLoadingMap?: () => void;
+  onWillStartLoadingMap?: () => void;
+  onDidFailLoadingMap?: () => void;
+}
+
+export interface RadarMapRegionChangeEvent {
+  center: [number, number];
+  zoom: number;
+  bounds?: [number, number, number, number];
+  bearing?: number;
+  pitch?: number;
+}

package/src/index.tsx

@@ -21,5 +21,7 @@ export { Autocomplete };
 let Map = Platform.OS !== "web" ? require("./ui/map").default : {};
 export { Map };
 
+export type { RadarMapProps } from "./ui/map";
+
 export * from "./@types/types";
 export * from "./@types/RadarNativeInterface";

package/src/ui/map.jsx

@@ -19,6 +19,20 @@ const createStyleURL = async (style = DEFAULT_STYLE) => {
   return `${host}/maps/styles/${style}?publishableKey=${publishableKey}`;
 };
 
+/**
+ * RadarMap component for displaying maps with Radar integration
+ * @param {Object} props - Component props
+ * @param {Object} [props.mapOptions] - Map configuration options
+ * @param {string} [props.mapOptions.mapStyle] - Map style identifier (defaults to 'radar-default-v1')
+ * @param {function} [props.mapOptions.onRegionDidChange] - Callback fired when the map region changes
+ * @param {Object} props.mapOptions.onRegionDidChange.feature - The region feature 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
+ * @param {React.ReactNode} [props.children] - Child components to render within the map
+ * @returns {React.Component|null} The RadarMap component or null if dependencies are missing
+ */
+
 const RadarMap = ({ mapOptions, children }) => {
   const [styleURL, setStyleURL] = useState(null);
   const [userLocation, setUserLocation] = useState(null);
@@ -106,6 +120,9 @@ const RadarMap = ({ mapOptions, children }) => {
         logoEnabled={false}
         attributionEnabled
         onRegionDidChange={mapOptions?.onRegionDidChange ? mapOptions.onRegionDidChange : null}
+        onDidFinishLoadingMap={mapOptions?.onDidFinishLoadingMap ? mapOptions.onDidFinishLoadingMap : null}
+        onWillStartLoadingMap={mapOptions?.onWillStartLoadingMap ? mapOptions.onWillStartLoadingMap : null}
+        onDidFailLoadingMap={mapOptions?.onDidFailLoadingMap ? mapOptions.onDidFailLoadingMap : null}
         mapStyle={styleURL}>
         {userLocationMapIndicator}
         {children}

package/src/ui/map.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { RadarMapOptions } from '../@types/types';
+
+const RadarMapJS = require('./map.jsx').default;
+
+export interface RadarMapProps {
+  /**
+   * Configuration options for the RadarMap component
+   */
+  mapOptions?: RadarMapOptions;
+  /**
+   * Child components to render within the map
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * TypeScript wrapper for the RadarMap component that provides type safety
+ * while delegating the implementation to the JavaScript version.
+ * 
+ * @param props - The props for the RadarMap component
+ * @returns The RadarMap component with proper TypeScript typing
+ */
+const RadarMap: React.FC<RadarMapProps> = (props) => {
+  return React.createElement(RadarMapJS, props);
+};
+
+export default RadarMap;

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.23.2';
+export const VERSION = '3.23.4';