react-native-radar 3.7.5 → 3.7.6-beta.2

package/android/build.gradle

@@ -18,7 +18,7 @@ android {
         minSdkVersion 16
         targetSdkVersion 31
         versionCode 1
-        versionName '3.7.5'
+        versionName '3.7.6-beta.1'
     }
     lintOptions {
         abortOnError false

package/ios/RNRadar.h

@@ -1,4 +1,5 @@
 #import <RadarSDK/RadarSDK.h>
+#import <RadarSDK/RadarSettings.h>
 #import <React/RCTBridgeModule.h>
 #import <React/RCTEventEmitter.h>
 

package/ios/RNRadar.m

@@ -139,6 +139,14 @@ RCT_EXPORT_METHOD(setAnonymousTrackingEnabled:(BOOL)enabled) {
     [Radar setAnonymousTrackingEnabled:enabled];
 }
 
+RCT_EXPORT_METHOD(host:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {
+    resolve([RadarSettings host]);
+}
+
+RCT_EXPORT_METHOD(publishableKey:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {
+    resolve([RadarSettings publishableKey]);
+}
+
 RCT_REMAP_METHOD(getPermissionsStatus, getPermissionsStatusWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
     CLAuthorizationStatus status = [CLLocationManager authorizationStatus];
     NSString *statusStr;
@@ -729,19 +737,16 @@ RCT_EXPORT_METHOD(autocomplete:(NSDictionary *)optionsDict resolve:(RCTPromiseRe
     }
 
     NSDictionary *nearDict = optionsDict[@"near"];
-    if (nearDict == nil || ![nearDict isKindOfClass:[NSDictionary class]]) {
-        if (reject) {
-            reject([Radar stringForStatus:RadarStatusErrorBadRequest], [Radar stringForStatus:RadarStatusErrorBadRequest], nil);
-        }
-
-        return;
+    CLLocation *near = nil;
+    if (nearDict && [nearDict isKindOfClass:[NSDictionary class]]) {
+        double latitude = [RCTConvert double:nearDict[@"latitude"]];
+        double longitude = [RCTConvert double:nearDict[@"longitude"]];
+        NSDate *timestamp = [NSDate new];
+        near = [[CLLocation alloc] initWithCoordinate:CLLocationCoordinate2DMake(latitude, longitude) altitude:-1 horizontalAccuracy:5 verticalAccuracy:-1 timestamp:timestamp];
     }
 
+
     NSString *query = optionsDict[@"query"];
-    double latitude = [RCTConvert double:nearDict[@"latitude"]];
-    double longitude = [RCTConvert double:nearDict[@"longitude"]];
-    NSDate *timestamp = [NSDate new];
-    CLLocation *near = [[CLLocation alloc] initWithCoordinate:CLLocationCoordinate2DMake(latitude, longitude) altitude:-1 horizontalAccuracy:5 verticalAccuracy:-1 timestamp:timestamp];
     NSNumber *limitNumber = optionsDict[@"limit"];
     int limit;
     if (limitNumber != nil && [limitNumber isKindOfClass:[NSNumber class]]) {

package/js/helpers.js

@@ -0,0 +1,15 @@
+import { NativeModules, Platform } from 'react-native';
+
+if (!NativeModules.RNRadar && (Platform.OS === 'ios' || Platform.OS === 'android')) {
+  throw new Error('NativeModules.RNRadar is undefined');
+}
+
+const getHost = () => (
+  NativeModules.RNRadar.host()
+);
+
+const getPublishableKey = () => (
+  NativeModules.RNRadar.publishableKey()
+);
+
+export { getHost, getPublishableKey };

package/js/index.js

@@ -1,9 +1,12 @@
 import { Platform } from 'react-native';
 
 let module = {};
-if (Platform.OS === 'web')
-  module =  require('./index.web').default;
-else
+if (Platform.OS === 'web') {
+  module = require('./index.web').default;
+} else {
   module = require('./index.native').default;
-
+}
 export default module;
+
+export { default as Autocomplete } from './ui/autocomplete';
+export { default as Map } from './ui/map';

package/js/ui/README.md

@@ -0,0 +1,67 @@
+## Example usage
+
+We provide UI elements for autocomplete & maps to make building easy.
+
+If you're using the Map element, you'll need to install [Maplibre React Native](https://github.com/maplibre/maplibre-react-native).
+```
+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.
+
+### Adding a map
+
+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>`
+
+```
+import {StyleSheet, View} from 'react-native';
+import Radar, { Map } from 'react-native-radar';
+
+export default function App() {
+    Radar.initialize('prj_place_your_own_token_here');
+    
+    // A quirk of Map Libre requires us to set their deprecated access token to null
+    MapLibreGL.setAccessToken(null);
+
+    return (
+        <View style={styles.page}>
+            <Map />
+        </View>
+    );
+}
+```
+
+TODO: fill in details on customization, including using MapLibre elements
+
+### Adding an address autocomplete
+
+Adding an address search autocomplete is similarly easy. 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 Radar, { Map } from 'react-native-radar';
+
+export default function App() {
+    const [location, setLocation] = useState(null);
+
+    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={style.page}>
+            <Autocomplete location={location} onSelect={onSelect} />
+        </View>
+    );
+}
+```
+
+TODO: fill in details of customization

package/js/ui/autocomplete.jsx

@@ -0,0 +1,312 @@
+// 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,
+} 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,
+  threshold: 3,
+  limit: 8,
+  placeholder: "Search address",
+  showPin: true,
+};
+
+const autocompleteUI = ({ options = {}, onSelect, location, style = {} }) => {
+  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 fetchResults = useCallback(
+    async (searchQuery) => {
+      if (searchQuery.length < config.threshold) return;
+
+      const params = { query: searchQuery, limit: config.limit };
+
+      if (location && location.latitude && location.longitude) {
+        params.near = location;
+      }
+
+      try {
+        const result = await Radar.autocomplete(params);
+        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.threshold) {
+        return;
+      }
+
+      // Set the new timer
+      timerRef.current = setTimeout(() => {
+        fetchResults(text);
+      }, config.debounceMS);
+    },
+    [config, fetchResults]
+  );
+
+  const handleSelect = (item) => {
+    setQuery(item.formattedAddress);
+    setIsOpen(false);
+
+    if (typeof onSelect === "function") {
+      onSelect(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.showPin ? (
+            <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, 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={() => {
+            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/js/ui/images.js

@@ -0,0 +1,5 @@
+export const BACK_ICON = require('./back.png');
+export const SEARCH_ICON = require('./search.png');
+export const RADAR_LOGO = require('./radar-logo.png');
+export const MARKER_ICON = require('./marker.png');
+export const CLOSE_ICON = require('./close.png');

package/js/ui/map.jsx

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, View, Image } from 'react-native';
+import MapLibreGL from '@maplibre/maplibre-react-native';
+import { getHost, getPublishableKey } from '../helpers';
+
+const DEFAULT_STYLE = 'radar-default-v1';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  map: {
+    flex: 1,
+  },
+  logo: {
+    position: 'absolute',
+    bottom: -10,
+    left: 5,
+    width: 50,
+    height: 50,
+    resizeMode: 'contain',
+  },
+});
+
+const createStyleURL = async (style = DEFAULT_STYLE) => {
+  const host = await getHost();
+  const publishableKey = await getPublishableKey();
+  return `${host}/maps/styles/${style}?publishableKey=${publishableKey}`;
+};
+
+const RadarMap = ({ mapOptions, children }) => {
+  const [styleURL, setStyleURL] = useState(null);
+
+  useEffect(() => {
+    createStyleURL(mapOptions?.mapStyle || DEFAULT_STYLE).then((result) => {
+      setStyleURL(result);
+    });
+  }, [mapOptions]);
+
+  if (!styleURL) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <MapLibreGL.MapView
+        style={styles.map}
+        pitchEnabled={false}
+        compassEnabled={false}
+        logoEnabled={false}
+        attributionEnabled
+        onRegionDidChange={mapOptions.onRegionDidChange ? mapOptions.onRegionDidChange : null}
+        styleURL={styleURL}
+      >
+        <MapLibreGL.UserLocation />
+        {children}
+      </MapLibreGL.MapView>
+      <Image
+        source={require('./map-logo.png')}
+        style={styles.logo}
+      />
+    </View>
+  );
+};
+
+export default RadarMap;

package/js/ui/styles.js

@@ -0,0 +1,112 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    paddingTop: 8,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 16,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    borderColor: '#DBE5EB',
+    borderWidth: 1,
+    width: '95%', // only difference between this and the modalInputContainer
+  },
+  modalInputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 16,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    borderColor: '#DBE5EB',
+    borderWidth: 1,
+  },
+  inputIcon: {
+    marginLeft: 10,
+    height: 18,
+    width: 18,
+    backgroundColor: 'white',
+    color: 'white',
+  },
+  closeIcon: {
+    marginRight: 10,
+    height: 18,
+    width: 18,
+    backgroundColor: 'white',
+    color: 'white',
+  },
+  input: {
+    flex: 1,
+    backgroundColor: 'white',
+    height: 40,
+    fontSize: 14,
+    paddingHorizontal: 8,
+    borderRadius: 5,
+  },
+  resultListWrapper: {
+    width: '100%',
+    marginBottom: 30,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    paddingVertical: 8,
+  },
+  resultList: {
+    width: '100%',
+  },
+  resultItem: {
+    paddingRight: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    fontSize: 12,
+    backgroundColor: 'white',
+    pressedBackgroundColor: '#F6FAFC',
+  },
+  addressContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  pinIconContainer: {
+    width: 28,
+    marginRight: 8,
+  },
+  pinIcon: {
+    height: 26,
+    width: 26,
+  },
+  addressTextContainer: {
+    flex: 1,
+  },
+  addressText: {
+    fontSize: 14,
+    lineHeight: 24,
+    color: '#000',
+    fontWeight: '600',
+  },
+  addressSubtext: {
+    fontSize: 14,
+    color: '#5A6872',
+  },
+  footerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    marginRight: 16,
+    alignSelf: 'flex-end',
+  },
+  footerText: {
+    marginTop: 2,
+    marginRight: 4,
+    fontSize: 10,
+    color: '#5A6872',
+  },
+  logo: {
+    width: 50,
+    height: 15,
+    resizeMode: 'contain',
+  },
+});

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.7.5",
+  "version": "3.7.6-beta.2",
   "main": "js/index.js",
   "files": [
     "android",
@@ -25,7 +25,8 @@
   },
   "peerDependencies": {
     "react": ">= 16.8.6",
-    "react-native": ">= 0.60.0"
+    "react-native": ">= 0.60.0",
+    "@maplibre/maplibre-react-native": "^9.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",