react-native-radar 3.20.4 → 3.21.0-beta.1

package/src/plugin/withRadarIOS.ts

@@ -0,0 +1,80 @@
+import { ConfigPlugin, withInfoPlist, withDangerousMod } from "expo/config-plugins";
+import type { RadarPluginProps } from "./types";
+import fs from 'fs/promises';
+import path from 'path';
+
+export const withRadarIOS: ConfigPlugin<RadarPluginProps> = (config, args) => {
+  config = withInfoPlist(config, (config) => {
+    config.modResults.NSLocationWhenInUseUsageDescription =
+      args.iosNSLocationWhenInUseUsageDescription ??
+      "This app uses the location service to provide location-based services.";
+    if (args.iosNSLocationAlwaysAndWhenInUseUsageDescription) {
+      config.modResults.NSLocationAlwaysAndWhenInUseUsageDescription =
+        args.iosNSLocationAlwaysAndWhenInUseUsageDescription; 
+    }
+    if (args.iosBackgroundMode) {
+      config.modResults.UIBackgroundModes = ["location", "fetch"];
+    }
+    if (args.iosFraud) {
+      config.modResults.NSAppTransportSecurity = {
+        NSAllowsArbitraryLoads: false,
+        NSPinnedDomains: {
+          "api-verified.radar.io": {
+            NSIncludesSubdomains: true,
+            NSPinnedLeafIdentities: [
+              {
+                "SPKI-SHA256-BASE64":
+                  "15ktYXSSU2llpy7YyCgeqUKDBkjcimK/weUcec960sI=",
+              },
+              {
+                "SPKI-SHA256-BASE64":
+                  "15ktYXSSU2llpy7YyCgeqUKDBkjcimK/weUcec960sI=",
+              },
+            ],
+          },
+        },
+      };
+    }
+    if (args.addRadarSDKMotion) {
+      config.modResults.NSMotionUsageDescription =
+        args.iosNSMotionUsageDescription ??
+        "This app uses the motion service to provide motion-based services.";
+    }
+
+    return config;
+  });
+
+  if (args.addRadarSDKMotion) {
+    config = withDangerousMod(config, [
+      'ios',
+      async config => {
+        const filePath = path.join(config.modRequest.platformProjectRoot, 'Podfile');
+        const contents = await fs.readFile(filePath, 'utf-8');
+
+        // Check if the pod declaration already exists
+        if (contents.indexOf("pod 'RadarSDKMotion', '3.20.1'") === -1) {
+          // Find the target block
+          const targetRegex = /target '(\w+)' do/g;
+          const match = targetRegex.exec(contents);
+          if (match) {
+            const targetStartIndex = match.index;
+            const targetEndIndex = contents.indexOf('end', targetStartIndex) + 3;
+
+            // Insert the pod declaration within the target block
+            const targetBlock = contents.substring(targetStartIndex, targetEndIndex);
+            // Just for this version of the SDK, we will be using 3.21.1 of the SDKMotion pod. There is no difference between the source code of 3.21.2 and 3.21.1 for RadarSDKMotion.
+            const updatedTargetBlock = targetBlock.replace(/(target '(\w+)' do)/, `$1\n  pod 'RadarSDKMotion', '3.20.1'`);
+            const newContents = contents.replace(targetBlock, updatedTargetBlock);
+
+            // Write the updated contents back to the Podfile
+            await fs.writeFile(filePath, newContents);
+          }
+        }
+
+        return config;
+      },
+    ]);
+  }
+
+  return config;
+};

package/src/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/src/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/src/ui/map.jsx

@@ -0,0 +1,122 @@
+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}`;
+};
+
+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}
+        styleURL={styleURL}
+      >
+        {userLocationMapIndicator}
+        {children}
+      </MapLibreGL.MapView>
+      <Image
+        source={require('./map-logo.png')}
+        style={styles.mapLogo}
+      />
+    </View>
+  );
+};
+
+export default RadarMap;

package/src/ui/styles.js

@@ -0,0 +1,125 @@
+import { StyleSheet } from 'react-native';
+
+const styles = 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',
+  },
+  closeIcon: {
+    marginRight: 10,
+    height: 18,
+    width: 18,
+    backgroundColor: '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',
+  },
+  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',
+  },
+  mapContainer: {
+    flex: 1,
+  },
+  map: {
+    flex: 1,
+  },
+  mapLogo: {
+    position: 'absolute',
+    bottom: -10,
+    left: 5,
+    width: 50,
+    height: 50,
+    resizeMode: 'contain',
+  },
+});
+
+export default styles;

package/src/version.ts

@@ -0,0 +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.21.0-beta.1';