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

package/js/ui/autocomplete.jsx

@@ -1,5 +1,5 @@
 // Autocomplete.js
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from "react";
 import {
   View,
   TextInput,
@@ -8,163 +8,65 @@ import {
   Text,
   StyleSheet,
   Image,
-} from 'react-native';
-import Radar from '../index.native';
-
-const defaultStyles = StyleSheet.create({
-  container: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 8,
-  },
-  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '95%',
-    backgroundColor: 'white',
-    borderRadius: 5,
-    shadowColor: "#061A2B",
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 12,
-    elevation: 5,
-  },
-  inputIcon: {
-    marginLeft: 10,
-    height: 18,
-    width: 18,
-    backgroundColor: 'white',
-    color: 'white',
-  },
-  input: {
-    flex: 1,
-    backgroundColor: 'white',
-    height: 40,
-    fontSize: 14,
-    paddingTop: 2,
-    paddingHorizontal: 8,
-    borderRadius: 5,
-    shadowOpacity: 0,
-  },
-  inputFocused: {
-    shadowColor: "#81BEFF",
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 1,
-    shadowRadius: 4,
-    elevation: 4,
-  },
-  resultListWrapper: {
-    width: '95%',
-    marginTop: 8,
-    backgroundColor: 'white',
-    borderRadius: 5,
-    paddingVertical: 8,
-    paddingHorizontal: 8,
-    shadowColor: "#061A2B",
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 12,
-    elevation: 5,
-  },
-  resultList: {
-    width: '100%',
-  },
-  resultItem: {
-    paddingRight: 16,
-    paddingVertical: 8,
-    height: 56,
-    fontSize: 12,
-  },
-  addressContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  pinIconContainer: {
-    width: 28,
-  },
-  pinIcon: {
-    height: 20,
-    width: 20,
-    marginRight: 8,
-    marginBottom: 14,
-  },
-  addressTextContainer: {
-    flex: 1,
-  },
-  addressText: {
-    fontSize: 14,
-    color: '#000',
-    fontWeight: '600',
-  },
-  addressSubtext: {
-    fontSize: 12,
-    color: '#5A6872',
-  },
-  footerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 10,
-    alignSelf: 'flex-end',
-  },
-  footerText: {
-    marginTop: 2,
-    marginRight: 4,
-    fontSize: 10,
-    color: '#5A6872',
-  },
-  logo: {
-    width: 50,
-    height: 15,
-    resizeMode: 'contain',
-  },
-});
+  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',
+  placeholder: "Search address",
   showPin: true,
 };
 
 const autocompleteUI = ({ options = {}, onSelect, location, style = {} }) => {
-  const [query, setQuery] = useState('');
+  const [query, setQuery] = useState("");
   const [results, setResults] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
-  const [isInputFocused, setInputFocused] = 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 fetchResults = useCallback(
+    async (searchQuery) => {
+      if (searchQuery.length < config.threshold) return;
 
-    const params = { query: searchQuery, limit: config.limit };
+      const params = { query: searchQuery, limit: config.limit };
 
-    if (location && location.latitude && location.longitude) {
-      params.near = location;
-    }
+      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);
+      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]);
+    },
+    [config]
+  );
 
   const handleInput = useCallback(
     (text) => {
@@ -184,14 +86,14 @@ const autocompleteUI = ({ options = {}, onSelect, location, style = {} }) => {
         fetchResults(text);
       }, config.debounceMS);
     },
-    [config, fetchResults],
+    [config, fetchResults]
   );
 
   const handleSelect = (item) => {
     setQuery(item.formattedAddress);
     setIsOpen(false);
 
-    if (typeof onSelect === 'function') {
+    if (typeof onSelect === "function") {
       onSelect(item);
     }
   };
@@ -201,78 +103,208 @@ const autocompleteUI = ({ options = {}, onSelect, location, style = {} }) => {
 
     return (
       <View style={styles.footerContainer}>
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
           <Text style={styles.footerText}>Powered by</Text>
-          <Image source={require('./radar-logo.png')} resizeMode="contain" style={defaultStyles.logo} />
+          <Image
+            source={RADAR_LOGO}
+            resizeMode="contain"
+            style={defaultStyles.logo}
+          />
         </View>
       </View>
     );
   };
 
   const renderItem = ({ item }) => (
-    <TouchableOpacity style={styles.resultItem} onPress={() => handleSelect(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={require('./marker.png')} style={styles.pinIcon} />
+            <Image source={MARKER_ICON} style={styles.pinIcon} />
           ) : null}
         </View>
         <View style={styles.addressTextContainer}>
           <Text numberOfLines={1} style={styles.addressText}>
             {item.addressLabel || item?.placeLabel}
           </Text>
-          <Text numberOfLines={1} style={styles.addressSubtext}>
-            {item?.formattedAddress?.replace(`${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>
-    </TouchableOpacity>
+    </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),
+    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),
+    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),
   };
 
-  const inputStyle = isInputFocused
-    ? StyleSheet.compose(styles.inputContainer, defaultStyles.inputFocused)
-    : styles.inputContainer;
+  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}>
-      <View style={inputStyle}>
-        <Image source={require('./search.png')} style={styles.inputIcon} />
-        <TextInput
-          style={styles.input}
-          onChangeText={handleInput}
-          onFocus={() => setInputFocused(true)}
-          onBlur={() => setInputFocused(false)}
-          value={query}
-          placeholder={config.placeholder}
-        />
-      </View>
-      {isOpen && (
-        <View style={defaultStyles.resultListWrapper}>
-          <FlatList
-            style={styles.resultList}
-            data={results}
-            renderItem={renderItem}
-            keyExtractor={(item) => item.formattedAddress + item.postalCode}
-            ListFooterComponent={renderFooter}
+      <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"
           />
-        </View>
-      )}
+        </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>
   );
 };

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/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.6-beta.1",
+  "version": "3.7.6-beta.2",
   "main": "js/index.js",
   "files": [
     "android",