react-native-radar 3.8.3 → 3.8.5

package/android/build.gradle

@@ -18,7 +18,7 @@ android {
         minSdkVersion 16
         targetSdkVersion 31
         versionCode 1
-        versionName '3.8.2'
+        versionName '3.8.6'
     }
     lintOptions {
         abortOnError false
@@ -45,5 +45,5 @@ repositories {
 
 dependencies {
     api 'com.facebook.react:react-native:+'
-    api 'io.radar:sdk:3.8.5'
+    api 'io.radar:sdk:3.8.6'
 }

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

@@ -78,9 +78,13 @@ public class RNRadarModule extends ReactContextBaseJavaModule implements Permiss
     }
 
     @ReactMethod
-    public void initialize(String publishableKey) {
-        Radar.initialize(getReactApplicationContext(), publishableKey);
-        Radar.setReceiver(receiver);
+    public void initialize(String publishableKey, boolean fraud) {
+        if (fraud) {
+            Radar.initialize(getReactApplicationContext(), publishableKey, receiver, Radar.RadarLocationServicesProvider.GOOGLE, fraud);
+        } else {
+            Radar.initialize(getReactApplicationContext(), publishableKey);
+            Radar.setReceiver(receiver);
+        }
     }
 
     @ReactMethod
@@ -871,7 +875,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

@@ -91,7 +91,7 @@ RCT_EXPORT_MODULE();
     }
 }
 
-RCT_EXPORT_METHOD(initialize:(NSString *)publishableKey) {
+RCT_EXPORT_METHOD(initialize:(NSString *)publishableKey fraud:(BOOL)fraud) {
     [Radar initializeWithPublishableKey:publishableKey];
 }
 
@@ -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/index.native.js

@@ -6,8 +6,8 @@ if (!NativeModules.RNRadar && (Platform.OS === 'ios' || Platform.OS === 'android
 
 const eventEmitter = new NativeEventEmitter(NativeModules.RNRadar);
 
-const initialize = (publishableKey) => {
-  NativeModules.RNRadar.initialize(publishableKey);
+const initialize = (publishableKey, fraud) => {
+  NativeModules.RNRadar.initialize(publishableKey, fraud);
 };
 
 const setLogLevel = (level) => {

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);
@@ -43,20 +44,28 @@ const autocompleteUI = ({ options = {}, onSelect, location, style = {} }) => {
   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.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 +102,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 +138,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>
@@ -163,7 +172,7 @@ const autocompleteUI = ({ options = {}, onSelect, location, style = {} }) => {
       style.modalInputContainer
     ),
     resultList: StyleSheet.compose(defaultStyles.resultList, style.resultList),
-    resultItem: StyleSheet.compose(defaultStyles.resultItem, style.resultItem),
+    resultItem: StyleSheet.compose({...defaultStyles.resultItem, pressedBackgroundColor: '#F6FAFC'}, style.resultItem),
     addressContainer: StyleSheet.compose(
       defaultStyles.addressContainer,
       style.addressContainer
@@ -219,6 +228,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/js/ui/map.jsx

@@ -66,17 +66,29 @@ const RadarMap = ({ mapOptions, children }) => {
     >
       <MapLibreGL.CircleLayer
         id="user-location-inner"
-        style={styles.userLocation.pulse}
+        style={{
+          circleRadius: 15,
+          circleColor: '#000257',
+          circleOpacity: 0.2,
+          circlePitchAlignment: 'map',
+        }}
       />
       <MapLibreGL.CircleLayer
         id="user-location-middle"
-        style={styles.userLocation.background}
+        style={{
+          circleRadius: 9,
+          circleColor: '#fff',
+          circlePitchAlignment: 'map',
+        }}
       />
       <MapLibreGL.CircleLayer
         id="user-location-outer"
-        style={styles.userLocation.foreground}
+        style={{
+          circleRadius: 6,
+          circleColor: '#000257',
+          circlePitchAlignment: 'map',
+        }}
       />
-
     </MapLibreGL.ShapeSource>
   );
 

package/js/ui/styles.js

@@ -62,7 +62,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     fontSize: 12,
     backgroundColor: 'white',
-    pressedBackgroundColor: '#F6FAFC',
   },
   addressContainer: {
     flexDirection: 'row',
@@ -121,24 +120,6 @@ const styles = StyleSheet.create({
     height: 50,
     resizeMode: 'contain',
   },
-  userLocation: {
-    pulse: {
-      circleRadius: 15,
-      circleColor: '#000257',
-      circleOpacity: 0.2,
-      circlePitchAlignment: 'map',
-    },
-    background: {
-      circleRadius: 9,
-      circleColor: '#fff',
-      circlePitchAlignment: 'map',
-    },
-    foreground: {
-      circleRadius: 6,
-      circleColor: '#000257',
-      circlePitchAlignment: 'map',
-    },
-  },
 });
 
 export default styles;

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.5",
   "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>
-  );
-```