react-native-radar 3.8.3 → 3.8.4

package/android/src/main/java/io/radar/react/RNRadarModule.java

@@ -871,7 +871,7 @@ public class RNRadarModule extends ReactContextBaseJavaModule implements Permiss
         near.setLatitude(latitude);
         near.setLongitude(longitude);
         int limit = optionsMap.hasKey("limit") ? optionsMap.getInt("limit") : 10;
-        String country = optionsMap.hasKey("country") ? optionsMap.getString("country") : null;
+        String country = optionsMap.hasKey("countryCode") ? optionsMap.getString("countryCode") : optionsMap.hasKey("country") ? optionsMap.getString("country") : null;
         String[] layers = optionsMap.hasKey("layers") ? RNRadarUtils.stringArrayForArray(optionsMap.getArray("layers")) : null;
 
         Radar.autocomplete(query, near, layers, limit, country, new Radar.RadarGeocodeCallback() {

package/ios/RNRadar.m

@@ -756,7 +756,10 @@ RCT_EXPORT_METHOD(autocomplete:(NSDictionary *)optionsDict resolve:(RCTPromiseRe
     }
 
     NSArray *layers = optionsDict[@"layers"];
-    NSString *country = optionsDict[@"country"];
+    NSString *country = optionsDict[@"countryCode"];
+    if (country == nil) {
+        country = optionsDict[@"country"];
+    }
 
     __block RCTPromiseResolveBlock resolver = resolve;
     __block RCTPromiseRejectBlock rejecter = reject;

package/js/ui/autocomplete.jsx

@@ -28,14 +28,15 @@ import {
 import { default as defaultStyles } from './styles';
 
 const defaultAutocompleteOptions = {
-  debounceMS: 200,
-  threshold: 3,
-  limit: 8,
-  placeholder: "Search address",
-  showPin: true,
+  debounceMS: 200, // Debounce time in milliseconds
+  threshold: 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 = {}, onSelect, location, style = {} }) => {
+const autocompleteUI = ({ options = {} }) => {
   const [query, setQuery] = useState("");
   const [results, setResults] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
@@ -44,19 +45,26 @@ const autocompleteUI = ({ options = {}, onSelect, location, style = {} }) => {
   const textInputRef = useRef(null);
 
   const config = { ...defaultAutocompleteOptions, ...options };
+  const style = config.style || {};
 
   const fetchResults = useCallback(
     async (searchQuery) => {
       if (searchQuery.length < config.threshold) return;
 
-      const params = { query: searchQuery, limit: config.limit };
+      const { limit, layers, countryCode } = config;
+      const params = { query: searchQuery, limit, layers, countryCode };
 
-      if (location && location.latitude && location.longitude) {
-        params.near = location;
+      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) {
@@ -93,8 +101,8 @@ const autocompleteUI = ({ options = {}, onSelect, location, style = {} }) => {
     setQuery(item.formattedAddress);
     setIsOpen(false);
 
-    if (typeof onSelect === "function") {
-      onSelect(item);
+    if (typeof config.onSelection === "function") {
+      config.onSelection(item);
     }
   };
 
@@ -129,7 +137,7 @@ const autocompleteUI = ({ options = {}, onSelect, location, style = {} }) => {
     >
       <View style={styles.addressContainer}>
         <View style={styles.pinIconContainer}>
-          {config.showPin ? (
+          {config.showMarkers ? (
             <Image source={MARKER_ICON} style={styles.pinIcon} />
           ) : null}
         </View>
@@ -219,6 +227,8 @@ const autocompleteUI = ({ options = {}, onSelect, location, style = {} }) => {
         <TouchableOpacity
           style={styles.inputContainer}
           onPress={() => {
+            if (config.disabled) return;
+
             setIsOpen(true);
             // Set the focus on the other textinput after it opens
             setTimeout(() => {

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.8.3",
+  "version": "3.8.4",
   "main": "js/index.js",
   "files": [
     "android",

package/js/ui/README.md

@@ -1,157 +0,0 @@
-## Example usage
-
-We provide UI elements for autocomplete & maps to make building easy.
-
-### Adding an address autocomplete
-
-Adding an address search autocomplete is straightforward. Our `<Autocomplete>` element is comprised of a TextInput and Flatlist with the results.
-
-The example below provides optional `location` and `onSelect` props to the component. Providing a location will improve autocomplete result quality. Without it, the API utilizes the IP address location to rank results.
-
-```
-import { View } from 'react-native';
-import { useState, useEffect } from 'react';
-import Radar, { Autocomplete } from 'react-native-radar';
-
-export default function App() {
-  const [location, setLocation] = useState(null);
-
-  useEffect(() => {
-    Radar.initialize('prj_live_pk_...');
-
-    Radar.trackOnce().then((result) => {
-        setLocation({
-          latitude: result.location.latitude,
-          longitude: result.location.longitude,
-        });
-      });
-  }, []);
-
-  const onSelect = (selectedAddress) => {
-      // Do something with the selected address
-  }
-
-  return (
-      <View style={{ marginTop: 50}}>
-          <Autocomplete location={location} onSelect={onSelect} />
-      </View>
-  );
-}
-
-```
-
-### Adding a map
-
-If you're using the Map element, you'll need to install [Maplibre React Native](https://github.com/maplibre/maplibre-react-native), which `react-native-radar` has an optional peer dependency.
-```
-npm install @maplibre/maplibre-react-native
-```
-
-Then make sure to complete required [platform specific installation steps](https://github.com/maplibre/maplibre-react-native/blob/main/docs/GettingStarted.md#review-platform-specific-info) as well.
-
-
-We've taken care of linking the map tile server to the map, so all you need to do is make sure you've initialized the Radar SDK and use `<Map>`. Here's a minimal example:
-
-```
-import {View} from 'react-native';
-import Radar, { Map } from 'react-native-radar';
-import MapLibreGL from '@maplibre/maplibre-react-native';
-
-    
-// A quirk of Map Libre requires us to set their deprecated access token to null
-MapLibreGL.setAccessToken(null);
-
-export default function App() {
-
-    useEffect(() => {
-        Radar.initialize('prj_live_pk_...');
-    }, []);
-
-    return (
-        <View style={{ width: '100%', height: '95%'}}>
-            <Map />
-        </View>
-    );
-}
-```
-
-And here's how you might add a custom pin to the map and control the camera:
-```
-  // ... rest of your file
-
-  const [cameraConfig, setCameraConfig] = useState({
-    triggerKey: Date.now(),
-    centerCoordinate: [-73.9911, 40.7342],
-    animationMode: 'flyTo',
-    animationDuration: 600,
-    zoomLevel: 12,
-  });
-
-  const onRegionDidChange = (event) => {
-    // handle region change
-  }
-
-  const mapOptions = {
-    onRegionDidChange: onRegionDidChange,
-  }
-
-  const onSelect = (selectedAddress) => {
-      // Do something with the selected address
-  }
-
-  const pointsCollection = {
-    type: "FeatureCollection",
-    features: [{
-      type: "Feature",
-      properties: {
-        _id: '123',
-      },
-      geometry: {
-        type: "Point",
-        coordinates: [-73.9911, 40.7342]
-      }
-    }]
-  }; 
-  
-  const onPressIcon = (event) => {
-    // do something with the symbol, such as scrolling to the geofence
-    // associated with the icon in the list
-  }
-    
-  return (
-      <View style={{ width: '100%', marginTop: '10%', height: '90%'}}>
-        <Map mapOptions={mapOptions}>
-          <MapLibreGL.Camera
-          {...cameraConfig}
-          />
-          <MapLibreGL.Images
-            images={{
-              icon: require('./assets/marker.png'),
-            }}
-          />
-          <MapLibreGL.ShapeSource
-            id="points"
-            shape={pointsCollection}
-            onPress={onPressIcon}
-          >
-
-           <MapLibreGL.SymbolLayer
-              id="symbol"
-              style={{
-                iconImage: 'icon',
-                iconSize: [
-                  'interpolate',
-                  ['linear'],
-                  ['zoom'],
-                  0, 0.2, // Adjust the icon size for zoom level 0
-                  12, 0.4, // Adjust the icon size for zoom level 12
-                  22, 0.8, // Adjust the icon size for zoom level 22
-                ],
-                iconAllowOverlap: true,
-              }}
-            />
-          </MapLibreGL.ShapeSource>
-        </Map>
-      </View>
-  );
-```