react-native-google-places-autocomplete 2.5.5 → 2.5.7

package/GooglePlacesAutocomplete.d.ts

@@ -286,11 +286,15 @@ interface GooglePlaceData {
 interface Point {
   lat: number;
   lng: number;
+  latitude: number;
+  longitude: number;
 }
 
 interface AddressComponent {
   long_name: string;
   short_name: string;
+  longText: string;
+  shortText: string;
   types: PlaceType[];
 }
 
@@ -323,6 +327,11 @@ interface GooglePlaceDetail {
   url: string;
   utc_offset: number;
   vicinity: string;
+  // New Places API parameters
+  addressComponents: AddressComponent[];
+  adrFormatAddress: string;
+  formattedAddress: string;
+  location: Point;
 }
 
 /** @see https://developers.google.com/places/web-service/autocomplete */
@@ -431,6 +440,8 @@ interface GooglePlacesAutocompleteProps {
   /** text input props */
   textInputProps?: TextInputProps | Object;
   timeout?: number;
+  isNewPlacesAPI?: boolean;
+  fields?: string;
 }
 
 export type GooglePlacesAutocompleteRef = {

package/GooglePlacesAutocomplete.js

@@ -2,6 +2,7 @@
 import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
 import Qs from 'qs';
+import { v4 as uuidv4 } from 'uuid';
 import React, {
   forwardRef,
   useMemo,
@@ -9,6 +10,7 @@ import React, {
   useImperativeHandle,
   useRef,
   useState,
+  useCallback,
 } from 'react';
 import {
   ActivityIndicator,
@@ -84,36 +86,46 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     }
   };
 
-  const buildRowsFromResults = (results, text) => {
-    let res = [];
-    const shouldDisplayPredefinedPlaces = text
-      ? results.length === 0 && text.length === 0
-      : results.length === 0;
-    if (
-      shouldDisplayPredefinedPlaces ||
-      props.predefinedPlacesAlwaysVisible === true
-    ) {
-      res = [
-        ...props.predefinedPlaces.filter((place) => place?.description.length),
-      ];
-
-      if (props.currentLocation === true && hasNavigator()) {
-        res.unshift({
-          description: props.currentLocationLabel,
-          isCurrentLocation: true,
-        });
+  const buildRowsFromResults = useCallback(
+    (results, text) => {
+      let res = [];
+      const shouldDisplayPredefinedPlaces = text
+        ? results.length === 0 && text.length === 0
+        : results.length === 0;
+      if (
+        shouldDisplayPredefinedPlaces ||
+        props.predefinedPlacesAlwaysVisible === true
+      ) {
+        res = [
+          ...props.predefinedPlaces.filter(
+            (place) => place?.description.length,
+          ),
+        ];
+
+        if (props.currentLocation === true && hasNavigator()) {
+          res.unshift({
+            description: props.currentLocationLabel,
+            isCurrentLocation: true,
+          });
+        }
       }
-    }
 
-    res = res.map((place) => ({
-      ...place,
-      isPredefinedPlace: true,
-    }));
+      res = res.map((place) => ({
+        ...place,
+        isPredefinedPlace: true,
+      }));
 
-    return [...res, ...results];
-  };
+      return [...res, ...results];
+    },
+    [
+      props.currentLocation,
+      props.currentLocationLabel,
+      props.predefinedPlaces,
+      props.predefinedPlacesAlwaysVisible,
+    ],
+  );
 
-  const getRequestUrl = (requestUrl) => {
+  const getRequestUrl = useCallback((requestUrl) => {
     if (requestUrl) {
       if (requestUrl.useOnPlatform === 'all') {
         return requestUrl.url;
@@ -127,7 +139,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     } else {
       return 'https://maps.googleapis.com/maps/api';
     }
-  };
+  }, []);
 
   const getRequestHeaders = (requestUrl) => {
     return requestUrl?.headers || {};
@@ -144,10 +156,14 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
   const [listViewDisplayed, setListViewDisplayed] = useState(
     props.listViewDisplayed === 'auto' ? false : props.listViewDisplayed,
   );
-  const [url] = useState(getRequestUrl(props.requestUrl));
+  const [url, setUrl] = useState(getRequestUrl(props.requestUrl));
   const [listLoaderDisplayed, setListLoaderDisplayed] = useState(false);
 
   const inputRef = useRef();
+  const [sessionToken, setSessionToken] = useState(uuidv4());
+  useEffect(() => {
+    setUrl(getRequestUrl(props.requestUrl));
+  }, [getRequestUrl, props.requestUrl]);
 
   useEffect(() => {
     // This will load the search results after the query object ref gets changed
@@ -157,10 +173,11 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.query]);
+
   useEffect(() => {
     // Update dataSource if props.predefinedPlaces changed
     setDataSource(buildRowsFromResults([]));
-  }, [props.predefinedPlaces]);
+  }, [buildRowsFromResults, props.predefinedPlaces]);
 
   useImperativeHandle(ref, () => ({
     setAddressText: (address) => {
@@ -265,10 +282,14 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
 
         if (request.status === 200) {
           const responseJSON = JSON.parse(request.responseText);
-
-          if (responseJSON.status === 'OK') {
+          if (
+            responseJSON.status === 'OK' ||
+            (props.isNewPlacesAPI && responseJSON.id)
+          ) {
             // if (_isMounted === true) {
-            const details = responseJSON.result;
+            const details = props.isNewPlacesAPI
+              ? responseJSON
+              : responseJSON.result;
             _disableRowLoaders();
             _onBlur();
 
@@ -306,16 +327,29 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
         }
       };
 
-      request.open(
-        'GET',
-        `${url}/place/details/json?` +
-          Qs.stringify({
-            key: props.query.key,
-            placeid: rowData.place_id,
-            language: props.query.language,
-            ...props.GooglePlacesDetailsQuery,
-          }),
-      );
+      if (props.isNewPlacesAPI) {
+        request.open(
+          'GET',
+          `${url}/v1/places/${rowData.place_id}?` +
+            Qs.stringify({
+              key: props.query.key,
+              sessionToken,
+              fields: props.fields,
+            }),
+        );
+        setSessionToken(uuidv4());
+      } else {
+        request.open(
+          'GET',
+          `${url}/place/details/json?` +
+            Qs.stringify({
+              key: props.query.key,
+              placeid: rowData.place_id,
+              language: props.query.language,
+              ...props.GooglePlacesDetailsQuery,
+            }),
+        );
+      }
 
       request.withCredentials = requestShouldUseWithCredentials();
       setRequestHeaders(request, getRequestHeaders(props.requestUrl));
@@ -403,6 +437,29 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     return results;
   };
 
+  const _filterResultsByPlacePredictions = (unfilteredResults) => {
+    const results = [];
+    for (let i = 0; i < unfilteredResults.length; i++) {
+      if (unfilteredResults[i].placePrediction) {
+        results.push({
+          description: unfilteredResults[i].placePrediction.text?.text,
+          place_id: unfilteredResults[i].placePrediction.placeId,
+          reference: unfilteredResults[i].placePrediction.placeId,
+          structured_formatting: {
+            main_text:
+              unfilteredResults[i].placePrediction.structuredFormat?.mainText
+                ?.text,
+            secondary_text:
+              unfilteredResults[i].placePrediction.structuredFormat
+                ?.secondaryText?.text,
+          },
+          types: unfilteredResults[i].placePrediction.types ?? [],
+        });
+      }
+    }
+    return results;
+  };
+
   const _requestNearby = (latitude, longitude) => {
     _abortRequests();
 
@@ -508,6 +565,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
         setListLoaderDisplayed(false);
         if (request.status === 200) {
           const responseJSON = JSON.parse(request.responseText);
+
           if (typeof responseJSON.predictions !== 'undefined') {
             // if (_isMounted === true) {
             const results =
@@ -522,6 +580,14 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
             setDataSource(buildRowsFromResults(results, text));
             // }
           }
+          if (typeof responseJSON.suggestions !== 'undefined') {
+            const results = _filterResultsByPlacePredictions(
+              responseJSON.suggestions,
+            );
+
+            _results = results;
+            setDataSource(buildRowsFromResults(results, text));
+          }
           if (typeof responseJSON.error_message !== 'undefined') {
             if (!props.onFail)
               console.warn(
@@ -540,18 +606,39 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
         setStateText(props.preProcess(text));
       }
 
-      request.open(
-        'GET',
-        `${url}/place/autocomplete/json?input=` +
-          encodeURIComponent(text) +
-          '&' +
-          Qs.stringify(props.query),
-      );
+      if (props.isNewPlacesAPI) {
+        const keyQueryParam = props.query.key
+          ? '?' +
+            Qs.stringify({
+              key: props.query.key,
+            })
+          : '';
+        request.open('POST', `${url}/v1/places:autocomplete${keyQueryParam}`);
+      } else {
+        request.open(
+          'GET',
+          `${url}/place/autocomplete/json?input=` +
+            encodeURIComponent(text) +
+            '&' +
+            Qs.stringify(props.query),
+        );
+      }
 
       request.withCredentials = requestShouldUseWithCredentials();
       setRequestHeaders(request, getRequestHeaders(props.requestUrl));
 
-      request.send();
+      if (props.isNewPlacesAPI) {
+        const { key, locationbias, types, ...rest } = props.query;
+        request.send(
+          JSON.stringify({
+            input: text,
+            sessionToken,
+            ...rest,
+          }),
+        );
+      } else {
+        request.send();
+      }
     } else {
       _results = [];
       setDataSource(buildRowsFromResults([]));
@@ -561,6 +648,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debounceData = useMemo(() => debounce(_request, props.debounce), [
     props.query,
+    url,
   ]);
 
   const _onChangeText = (text) => {
@@ -888,8 +976,8 @@ GooglePlacesAutocomplete.propTypes = {
   inbetweenCompo: PropTypes.object,
   isRowScrollable: PropTypes.bool,
   keyboardShouldPersistTaps: PropTypes.oneOf(['never', 'always', 'handled']),
-  listEmptyComponent: PropTypes.func,
-  listLoaderComponent: PropTypes.func,
+  listEmptyComponent: PropTypes.element,
+  listLoaderComponent: PropTypes.element,
   listHoverColor: PropTypes.string,
   listUnderlayColor: PropTypes.string,
   // Must write it this way: https://stackoverflow.com/a/54290946/7180620
@@ -925,6 +1013,8 @@ GooglePlacesAutocomplete.propTypes = {
   textInputHide: PropTypes.bool,
   textInputProps: PropTypes.object,
   timeout: PropTypes.number,
+  isNewPlacesAPI: PropTypes.bool,
+  fields: PropTypes.string,
 };
 
 GooglePlacesAutocomplete.defaultProps = {
@@ -969,6 +1059,8 @@ GooglePlacesAutocomplete.defaultProps = {
   textInputHide: false,
   textInputProps: {},
   timeout: 20000,
+  isNewPlacesAPI: false,
+  fields: '*',
 };
 
 GooglePlacesAutocomplete.displayName = 'GooglePlacesAutocomplete';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-native-google-places-autocomplete",
-  "version": "2.5.5",
+  "version": "2.5.7",
   "description": "Customizable Google Places autocomplete component for iOS and Android React-Native apps",
   "main": "GooglePlacesAutocomplete.js",
   "types": "GooglePlacesAutocomplete.d.ts",
   "scripts": {
     "lint": "eslint . && prettier --write .",
-    "release": "npx release-it"
+    "release": "npx release-it",
+    "prettier": "prettier --write ."
   },
   "author": "Farid from Safi",
   "license": "MIT",
@@ -30,7 +31,8 @@
   "dependencies": {
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2",
-    "qs": "~6.9.1"
+    "qs": "~6.9.1",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "2.0.0",