react-native-google-places-autocomplete 2.5.6 → 2.6.0

package/GooglePlacesAutocomplete.js

@@ -1,7 +1,7 @@
 /* eslint-disable react-native/no-inline-styles */
 import debounce from 'lodash.debounce';
-import PropTypes from 'prop-types';
 import Qs from 'qs';
+import { randomUUID } from 'expo-crypto';
 import React, {
   forwardRef,
   useMemo,
@@ -25,6 +25,10 @@ import {
   View,
 } from 'react-native';
 
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
 const defaultStyles = {
   container: {
     flex: 1,
@@ -42,7 +46,9 @@ const defaultStyles = {
     flex: 1,
     marginBottom: 5,
   },
-  listView: {},
+  listView: {
+    backgroundColor: '#FFFFFF',
+  },
   row: {
     backgroundColor: '#FFFFFF',
     padding: 13,
@@ -70,40 +76,195 @@ const defaultStyles = {
   powered: {},
 };
 
+// ============================================================================
+// COMPONENT
+// ============================================================================
+
 export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
-  let _results = [];
-  let _requests = [];
+  // ==========================================================================
+  // PROPS DESTRUCTURING
+  // ==========================================================================
+  const {
+    autoFillOnNotFound = false,
+    currentLocation = false,
+    currentLocationLabel = 'Current location',
+    debounce: debounceMs = 0,
+    disableScroll = false,
+    enableHighAccuracyLocation = true,
+    enablePoweredByContainer = true,
+    fetchDetails = false,
+    filterReverseGeocodingByTypes = [],
+    GooglePlacesDetailsQuery = {},
+    GooglePlacesSearchQuery = {
+      rankby: 'distance',
+      type: 'restaurant',
+    },
+    GoogleReverseGeocodingQuery = {},
+    isRowScrollable = true,
+    keyboardShouldPersistTaps = 'always',
+    listHoverColor = '#ececec',
+    listUnderlayColor = '#c8c7cc',
+    listViewDisplayed: listViewDisplayedProp = 'auto',
+    keepResultsAfterBlur = false,
+    minLength = 0,
+    nearbyPlacesAPI = 'GooglePlacesSearch',
+    numberOfLines = 1,
+    onFail = () => {},
+    onNotFound = () => {},
+    onPress = () => {},
+    onTimeout = () =>
+      console.warn('google places autocomplete: request timeout'),
+    placeholder = '',
+    predefinedPlaces: predefinedPlacesProp = [],
+    predefinedPlacesAlwaysVisible = false,
+    query = {
+      key: 'missing api key',
+      language: 'en',
+      types: 'geocode',
+    },
+    styles = {},
+    suppressDefaultStyles = false,
+    textInputHide = false,
+    textInputProps = {},
+    timeout = 20000,
+    isNewPlacesAPI = false,
+    fields = '*',
+    ...restProps
+  } = props;
+
+  // ==========================================================================
+  // STATE & REFS
+  // ==========================================================================
+  const predefinedPlaces = useMemo(() => predefinedPlacesProp || [], [
+    predefinedPlacesProp,
+  ]);
+
+  // Store results array - useRef prevents re-renders when updating results, allows access to latest results in callbacks
+  const resultsRef = useRef([]);
+
+  // Store active XMLHttpRequest objects - needed to abort requests when component unmounts or new search starts
+  const requestsRef = useRef([]);
+
+  // Track if navigator warning has been shown - prevents duplicate console warnings
+  const hasWarnedAboutNavigator = useRef(false);
+
+  // Reference to TextInput component - enables imperative methods (focus, blur, clear) via ref
+  const inputRef = useRef(null);
+
+  // Store current query object - allows access to latest query in callbacks without stale closures
+  const queryRef = useRef(query);
+
+  // Store previous query string - used to detect query changes without causing re-renders
+  const prevQueryStringRef = useRef(JSON.stringify(query));
+
+  // Store latest _request function - ensures debounced function always calls current version with latest closures
+  const requestRef = useRef(_request);
+  const queryString = useMemo(() => JSON.stringify(query), [query]);
+
+  const [stateText, setStateText] = useState('');
+  const [dataSource, setDataSource] = useState([]);
+  const [listViewDisplayed, setListViewDisplayed] = useState(
+    listViewDisplayedProp === 'auto' ? false : listViewDisplayedProp,
+  );
+  const [url, setUrl] = useState('');
+  const [listLoaderDisplayed, setListLoaderDisplayed] = useState(false);
+  const [sessionToken, setSessionToken] = useState(randomUUID());
+
+  // ==========================================================================
+  // UTILITY FUNCTIONS
+  // ==========================================================================
 
-  const hasNavigator = () => {
+  const hasNavigator = useCallback(() => {
     if (navigator?.geolocation) {
       return true;
-    } else {
+    }
+    if (!hasWarnedAboutNavigator.current) {
+      if (Platform.OS === 'web') {
+        console.warn(
+          'Geolocation is not available. For web, ensure your site is served over HTTPS or localhost to use geolocation features.',
+        );
+      } else {
+        console.warn(
+          'Geolocation is not available. For React Native, you may need to install and configure @react-native-community/geolocation or expo-location to enable currentLocation.',
+        );
+      }
+      hasWarnedAboutNavigator.current = true;
+    }
+    return false;
+  }, []);
+
+  const supportedPlatform = () => {
+    if (Platform.OS === 'web' && !props.requestUrl) {
       console.warn(
-        'If you are using React Native v0.60.0+ you must follow these instructions to enable currentLocation: https://git.io/Jf4AR',
+        'This library cannot be used for the web unless you specify the requestUrl prop. See https://git.io/JflFv for more for details.',
       );
       return false;
     }
+    return true;
+  };
+
+  const getRequestUrl = (requestUrl) => {
+    if (requestUrl) {
+      if (requestUrl.useOnPlatform === 'all') {
+        return requestUrl.url;
+      }
+      if (requestUrl.useOnPlatform === 'web') {
+        return Platform.select({
+          web: requestUrl.url,
+          default: 'https://maps.googleapis.com/maps/api',
+        });
+      }
+    }
+    return 'https://maps.googleapis.com/maps/api';
+  };
+
+  const getRequestHeaders = (requestUrl) => {
+    return requestUrl?.headers || {};
   };
 
+  const setRequestHeaders = (request, headers) => {
+    Object.keys(headers).forEach((headerKey) =>
+      request.setRequestHeader(headerKey, headers[headerKey]),
+    );
+  };
+
+  const requestShouldUseWithCredentials = useCallback(() => {
+    return url === 'https://maps.googleapis.com/maps/api';
+  }, [url]);
+
+  const _abortRequests = useCallback(() => {
+    requestsRef.current.forEach((request) => {
+      request.onreadystatechange = null;
+      request.abort();
+    });
+    requestsRef.current = [];
+  }, []);
+
+  // ==========================================================================
+  // DATA PROCESSING FUNCTIONS
+  // ==========================================================================
+
   const buildRowsFromResults = useCallback(
     (results, text) => {
       let res = [];
-      const shouldDisplayPredefinedPlaces = text
-        ? results.length === 0 && text.length === 0
-        : results.length === 0;
+      // Show predefined places if:
+      // 1. No text entered and no results, OR
+      // 2. predefinedPlacesAlwaysVisible is true
+      const shouldDisplayPredefinedPlaces =
+        (!text || text.length === 0) && results.length === 0;
       if (
         shouldDisplayPredefinedPlaces ||
-        props.predefinedPlacesAlwaysVisible === true
+        predefinedPlacesAlwaysVisible === true
       ) {
-        res = [
-          ...props.predefinedPlaces.filter(
-            (place) => place?.description.length,
-          ),
-        ];
+        if (predefinedPlaces.length > 0) {
+          res = [
+            ...predefinedPlaces.filter((place) => place?.description?.length),
+          ];
+        }
 
-        if (props.currentLocation === true && hasNavigator()) {
+        if (currentLocation === true && hasNavigator()) {
           res.unshift({
-            description: props.currentLocationLabel,
+            description: currentLocationLabel,
             isCurrentLocation: true,
           });
         }
@@ -117,109 +278,310 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
       return [...res, ...results];
     },
     [
-      props.currentLocation,
-      props.currentLocationLabel,
-      props.predefinedPlaces,
-      props.predefinedPlacesAlwaysVisible,
+      predefinedPlacesAlwaysVisible,
+      predefinedPlaces,
+      currentLocation,
+      currentLocationLabel,
+      hasNavigator,
     ],
   );
 
-  const getRequestUrl = useCallback((requestUrl) => {
-    if (requestUrl) {
-      if (requestUrl.useOnPlatform === 'all') {
-        return requestUrl.url;
+  const _filterResultsByTypes = useCallback((unfilteredResults, types) => {
+    if (!types || types.length === 0) return unfilteredResults;
+
+    const results = [];
+    for (let i = 0; i < unfilteredResults.length; i++) {
+      let found = false;
+
+      for (let j = 0; j < types.length; j++) {
+        if (unfilteredResults[i].types?.indexOf(types[j]) !== -1) {
+          found = true;
+          break;
+        }
       }
-      if (requestUrl.useOnPlatform === 'web') {
-        return Platform.select({
-          web: requestUrl.url,
-          default: 'https://maps.googleapis.com/maps/api',
-        });
+
+      if (found === true) {
+        results.push(unfilteredResults[i]);
       }
-    } else {
-      return 'https://maps.googleapis.com/maps/api';
     }
+    return results;
   }, []);
 
-  const getRequestHeaders = (requestUrl) => {
-    return requestUrl?.headers || {};
+  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 setRequestHeaders = (request, headers) => {
-    Object.keys(headers).map((headerKey) =>
-      request.setRequestHeader(headerKey, headers[headerKey]),
-    );
-  };
+  const _getPredefinedPlace = (rowData) => {
+    if (rowData.isPredefinedPlace !== true) {
+      return rowData;
+    }
 
-  const [stateText, setStateText] = useState('');
-  const [dataSource, setDataSource] = useState(buildRowsFromResults([]));
-  const [listViewDisplayed, setListViewDisplayed] = useState(
-    props.listViewDisplayed === 'auto' ? false : props.listViewDisplayed,
-  );
-  const [url, setUrl] = useState(getRequestUrl(props.requestUrl));
-  const [listLoaderDisplayed, setListLoaderDisplayed] = useState(false);
+    if (predefinedPlaces.length > 0) {
+      for (let i = 0; i < predefinedPlaces.length; i++) {
+        if (predefinedPlaces[i].description === rowData.description) {
+          return predefinedPlaces[i];
+        }
+      }
+    }
 
-  const inputRef = useRef();
+    return rowData;
+  };
 
-  useEffect(() => {
-    setUrl(getRequestUrl(props.requestUrl));
-  }, [getRequestUrl, props.requestUrl]);
+  // ==========================================================================
+  // API REQUEST FUNCTIONS
+  // ==========================================================================
 
-  useEffect(() => {
-    // This will load the search results after the query object ref gets changed
-    _handleChangeText(stateText);
-    return () => {
+  const _requestNearby = useCallback(
+    (latitude, longitude) => {
       _abortRequests();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.query]);
 
-  useEffect(() => {
-    // Update dataSource if props.predefinedPlaces changed
-    setDataSource(buildRowsFromResults([]));
-  }, [buildRowsFromResults, props.predefinedPlaces]);
+      if (
+        latitude !== undefined &&
+        longitude !== undefined &&
+        latitude !== null &&
+        longitude !== null
+      ) {
+        const request = new XMLHttpRequest();
+        requestsRef.current.push(request);
+        request.timeout = timeout;
+        request.ontimeout = onTimeout;
+        request.onreadystatechange = () => {
+          if (request.readyState !== 4) {
+            setListLoaderDisplayed(true);
+            return;
+          }
+
+          setListLoaderDisplayed(false);
+          if (request.status === 200) {
+            const responseJSON = JSON.parse(request.responseText);
+
+            _disableRowLoaders();
+
+            if (typeof responseJSON.results !== 'undefined') {
+              let results = [];
+              if (nearbyPlacesAPI === 'GoogleReverseGeocoding') {
+                results = _filterResultsByTypes(
+                  responseJSON.results,
+                  filterReverseGeocodingByTypes,
+                );
+              } else {
+                results = responseJSON.results;
+              }
+
+              resultsRef.current = results;
+              const newDataSource = buildRowsFromResults(results);
+              setDataSource(newDataSource);
+              // Auto-show list when results arrive if in 'auto' mode
+              if (
+                listViewDisplayedProp === 'auto' &&
+                newDataSource.length > 0
+              ) {
+                setListViewDisplayed(true);
+              }
+            }
+            if (typeof responseJSON.error_message !== 'undefined') {
+              if (!onFail) {
+                console.warn(
+                  'google places autocomplete: ' + responseJSON.error_message,
+                );
+              } else {
+                onFail(responseJSON.error_message);
+              }
+            }
+          }
+        };
+
+        let requestUrl = '';
+        if (nearbyPlacesAPI === 'GoogleReverseGeocoding') {
+          // your key must be allowed to use Google Maps Geocoding API
+          requestUrl =
+            `${url}/geocode/json?` +
+            Qs.stringify({
+              latlng: latitude + ',' + longitude,
+              key: query.key,
+              ...GoogleReverseGeocodingQuery,
+            });
+        } else {
+          requestUrl =
+            `${url}/place/nearbysearch/json?` +
+            Qs.stringify({
+              location: latitude + ',' + longitude,
+              key: query.key,
+              ...GooglePlacesSearchQuery,
+            });
+        }
+
+        request.open('GET', requestUrl);
+
+        request.withCredentials = requestShouldUseWithCredentials();
+        setRequestHeaders(request, getRequestHeaders(props.requestUrl));
 
-  useImperativeHandle(ref, () => ({
-    setAddressText: (address) => {
-      setStateText(address);
+        request.send();
+      } else {
+        resultsRef.current = [];
+        setDataSource(buildRowsFromResults([]));
+      }
     },
-    getAddressText: () => stateText,
-    blur: () => inputRef.current.blur(),
-    focus: () => inputRef.current.focus(),
-    isFocused: () => inputRef.current.isFocused(),
-    clear: () => inputRef.current.clear(),
-    getCurrentLocation,
-  }));
-
-  const requestShouldUseWithCredentials = () =>
-    url === 'https://maps.googleapis.com/maps/api';
-
-  const _abortRequests = () => {
-    _requests.map((i) => {
-      i.onreadystatechange = null;
-      i.abort();
-    });
-    _requests = [];
-  };
+    [
+      _abortRequests,
+      timeout,
+      onTimeout,
+      _disableRowLoaders,
+      nearbyPlacesAPI,
+      _filterResultsByTypes,
+      filterReverseGeocodingByTypes,
+      buildRowsFromResults,
+      listViewDisplayedProp,
+      onFail,
+      url,
+      query,
+      GoogleReverseGeocodingQuery,
+      GooglePlacesSearchQuery,
+      requestShouldUseWithCredentials,
+      props.requestUrl,
+    ],
+  );
 
-  const supportedPlatform = () => {
-    if (Platform.OS === 'web' && !props.requestUrl) {
-      console.warn(
-        'This library cannot be used for the web unless you specify the requestUrl prop. See https://git.io/JflFv for more for details.',
-      );
-      return false;
+  const _request = (text) => {
+    _abortRequests();
+
+    if (!url) {
+      return;
+    }
+
+    if (supportedPlatform() && text && text.length >= minLength) {
+      const request = new XMLHttpRequest();
+      requestsRef.current.push(request);
+
+      request.timeout = timeout;
+      request.ontimeout = onTimeout;
+      request.onreadystatechange = () => {
+        if (request.readyState !== 4) {
+          setListLoaderDisplayed(true);
+          return;
+        }
+
+        setListLoaderDisplayed(false);
+
+        if (request.status === 200) {
+          const responseJSON = JSON.parse(request.responseText);
+
+          if (typeof responseJSON.predictions !== 'undefined') {
+            const results =
+              nearbyPlacesAPI === 'GoogleReverseGeocoding'
+                ? _filterResultsByTypes(
+                    responseJSON.predictions,
+                    filterReverseGeocodingByTypes,
+                  )
+                : responseJSON.predictions;
+
+            resultsRef.current = results;
+            const newDataSource = buildRowsFromResults(results, text);
+            setDataSource(newDataSource);
+            // Auto-show list when results arrive if in 'auto' mode
+            if (listViewDisplayedProp === 'auto' && newDataSource.length > 0) {
+              setListViewDisplayed(true);
+            }
+          }
+          if (typeof responseJSON.suggestions !== 'undefined') {
+            const results = _filterResultsByPlacePredictions(
+              responseJSON.suggestions,
+            );
+
+            resultsRef.current = results;
+            const newDataSource = buildRowsFromResults(results, text);
+            setDataSource(newDataSource);
+            // Auto-show list when results arrive if in 'auto' mode
+            if (listViewDisplayedProp === 'auto' && newDataSource.length > 0) {
+              setListViewDisplayed(true);
+            }
+          }
+          if (typeof responseJSON.error_message !== 'undefined') {
+            if (!onFail) {
+              console.warn(
+                'google places autocomplete: ' + responseJSON.error_message,
+              );
+            } else {
+              onFail(responseJSON.error_message);
+            }
+          }
+        } else {
+          console.warn(
+            'google places autocomplete: request could not be completed or has been aborted',
+          );
+        }
+      };
+
+      if (props.preProcess) {
+        setStateText(props.preProcess(text));
+      }
+
+      if (isNewPlacesAPI) {
+        const keyQueryParam = query.key
+          ? '?' +
+            Qs.stringify({
+              key: query.key,
+            })
+          : '';
+        request.open('POST', `${url}/v1/places:autocomplete${keyQueryParam}`);
+      } else {
+        request.open(
+          'GET',
+          `${url}/place/autocomplete/json?input=` +
+            encodeURIComponent(text) +
+            '&' +
+            Qs.stringify(query),
+        );
+      }
+
+      request.withCredentials = requestShouldUseWithCredentials();
+      setRequestHeaders(request, getRequestHeaders(props.requestUrl));
+
+      if (isNewPlacesAPI) {
+        const { key, locationbias, types, ...rest } = query;
+        request.send(
+          JSON.stringify({
+            input: text,
+            sessionToken,
+            ...rest,
+          }),
+        );
+      } else {
+        request.send();
+      }
     } else {
-      return true;
+      resultsRef.current = [];
+      setDataSource(buildRowsFromResults([]));
     }
   };
 
-  const getCurrentLocation = () => {
+  const getCurrentLocation = useCallback(() => {
     let options = {
       enableHighAccuracy: false,
       timeout: 20000,
       maximumAge: 1000,
     };
 
-    if (props.enableHighAccuracyLocation && Platform.OS === 'android') {
+    if (enableHighAccuracyLocation && Platform.OS === 'android') {
       options = {
         enableHighAccuracy: true,
         timeout: 20000,
@@ -227,14 +589,14 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     }
     const getCurrentPosition =
       navigator.geolocation.getCurrentPosition ||
-      navigator.geolocation.default.getCurrentPosition;
+      navigator.geolocation.default?.getCurrentPosition;
 
-    getCurrentPosition &&
+    if (getCurrentPosition) {
       getCurrentPosition(
         (position) => {
-          if (props.nearbyPlacesAPI === 'None') {
-            let currentLocation = {
-              description: props.currentLocationLabel,
+          if (nearbyPlacesAPI === 'None') {
+            const currentLocationData = {
+              description: currentLocationLabel,
               geometry: {
                 location: {
                   lat: position.coords.latitude,
@@ -244,7 +606,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
             };
 
             _disableRowLoaders();
-            props.onPress(currentLocation, currentLocation);
+            onPress(currentLocationData, currentLocationData);
           } else {
             _requestNearby(position.coords.latitude, position.coords.longitude);
           }
@@ -255,10 +617,47 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
         },
         options,
       );
+    }
+  }, [
+    enableHighAccuracyLocation,
+    currentLocationLabel,
+    nearbyPlacesAPI,
+    _disableRowLoaders,
+    onPress,
+    _requestNearby,
+  ]);
+
+  // ==========================================================================
+  // EVENT HANDLERS
+  // ==========================================================================
+
+  const _enableRowLoader = (rowData) => {
+    const rows = buildRowsFromResults(resultsRef.current);
+    for (let i = 0; i < rows.length; i++) {
+      if (
+        rows[i].place_id === rowData.place_id ||
+        (rows[i].isCurrentLocation === true &&
+          rowData.isCurrentLocation === true)
+      ) {
+        rows[i].isLoading = true;
+        setDataSource(rows);
+        break;
+      }
+    }
   };
 
+  const _disableRowLoaders = useCallback(() => {
+    for (let i = 0; i < resultsRef.current.length; i++) {
+      if (resultsRef.current[i].isLoading === true) {
+        resultsRef.current[i].isLoading = false;
+      }
+    }
+
+    setDataSource(buildRowsFromResults(resultsRef.current));
+  }, [buildRowsFromResults]);
+
   const _onPress = (rowData) => {
-    if (rowData.isPredefinedPlace !== true && props.fetchDetails === true) {
+    if (rowData.isPredefinedPlace !== true && fetchDetails === true) {
       if (rowData.isLoading === true) {
         // already requesting
         return;
@@ -273,65 +672,78 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
 
       // fetch details
       const request = new XMLHttpRequest();
-      _requests.push(request);
-      request.timeout = props.timeout;
-      request.ontimeout = props.onTimeout;
+      requestsRef.current.push(request);
+      request.timeout = timeout;
+      request.ontimeout = onTimeout;
       request.onreadystatechange = () => {
         if (request.readyState !== 4) return;
 
         if (request.status === 200) {
           const responseJSON = JSON.parse(request.responseText);
-
-          if (responseJSON.status === 'OK') {
-            // if (_isMounted === true) {
-            const details = responseJSON.result;
+          if (
+            responseJSON.status === 'OK' ||
+            (isNewPlacesAPI && responseJSON.id)
+          ) {
+            const details = isNewPlacesAPI ? responseJSON : responseJSON.result;
             _disableRowLoaders();
             _onBlur();
 
             setStateText(_renderDescription(rowData));
 
             delete rowData.isLoading;
-            props.onPress(rowData, details);
-            // }
+            onPress(rowData, details);
           } else {
             _disableRowLoaders();
 
-            if (props.autoFillOnNotFound) {
+            if (autoFillOnNotFound) {
               setStateText(_renderDescription(rowData));
               delete rowData.isLoading;
             }
 
-            if (!props.onNotFound) {
+            if (!onNotFound) {
               console.warn(
                 'google places autocomplete: ' + responseJSON.status,
               );
             } else {
-              props.onNotFound(responseJSON);
+              onNotFound(responseJSON);
             }
           }
         } else {
           _disableRowLoaders();
 
-          if (!props.onFail) {
+          if (!onFail) {
             console.warn(
               'google places autocomplete: request could not be completed or has been aborted',
             );
           } else {
-            props.onFail('request could not be completed or has been aborted');
+            onFail('request could not be completed or has been aborted');
           }
         }
       };
 
-      request.open(
-        'GET',
-        `${url}/place/details/json?` +
-          Qs.stringify({
-            key: props.query.key,
-            placeid: rowData.place_id,
-            language: props.query.language,
-            ...props.GooglePlacesDetailsQuery,
-          }),
-      );
+      if (isNewPlacesAPI) {
+        request.open(
+          'GET',
+          `${url}/v1/places/${rowData.place_id}?` +
+            Qs.stringify({
+              key: query.key,
+              sessionToken,
+              fields,
+            }),
+        );
+        setSessionToken(randomUUID());
+      } else {
+        request.open(
+          'GET',
+          `${url}/place/details/json?` +
+            Qs.stringify({
+              key: query.key,
+              placeid: rowData.place_id,
+              language: query.language,
+              ...GooglePlacesDetailsQuery,
+            }),
+        );
+      }
 
       request.withCredentials = requestShouldUseWithCredentials();
       setRequestHeaders(request, getRequestHeaders(props.requestUrl));
@@ -350,236 +762,13 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
 
       _onBlur();
       delete rowData.isLoading;
-      let predefinedPlace = _getPredefinedPlace(rowData);
+      const predefinedPlace = _getPredefinedPlace(rowData);
 
       // sending predefinedPlace as details for predefined places
-      props.onPress(predefinedPlace, predefinedPlace);
-    }
-  };
-
-  const _enableRowLoader = (rowData) => {
-    let rows = buildRowsFromResults(_results);
-    for (let i = 0; i < rows.length; i++) {
-      if (
-        rows[i].place_id === rowData.place_id ||
-        (rows[i].isCurrentLocation === true &&
-          rowData.isCurrentLocation === true)
-      ) {
-        rows[i].isLoading = true;
-        setDataSource(rows);
-        break;
-      }
-    }
-  };
-
-  const _disableRowLoaders = () => {
-    // if (_isMounted === true) {
-    for (let i = 0; i < _results.length; i++) {
-      if (_results[i].isLoading === true) {
-        _results[i].isLoading = false;
-      }
-    }
-
-    setDataSource(buildRowsFromResults(_results));
-    // }
-  };
-
-  const _getPredefinedPlace = (rowData) => {
-    if (rowData.isPredefinedPlace !== true) {
-      return rowData;
-    }
-
-    for (let i = 0; i < props.predefinedPlaces.length; i++) {
-      if (props.predefinedPlaces[i].description === rowData.description) {
-        return props.predefinedPlaces[i];
-      }
-    }
-
-    return rowData;
-  };
-
-  const _filterResultsByTypes = (unfilteredResults, types) => {
-    if (types.length === 0) return unfilteredResults;
-
-    const results = [];
-    for (let i = 0; i < unfilteredResults.length; i++) {
-      let found = false;
-
-      for (let j = 0; j < types.length; j++) {
-        if (unfilteredResults[i].types.indexOf(types[j]) !== -1) {
-          found = true;
-          break;
-        }
-      }
-
-      if (found === true) {
-        results.push(unfilteredResults[i]);
-      }
-    }
-    return results;
-  };
-
-  const _requestNearby = (latitude, longitude) => {
-    _abortRequests();
-
-    if (
-      latitude !== undefined &&
-      longitude !== undefined &&
-      latitude !== null &&
-      longitude !== null
-    ) {
-      const request = new XMLHttpRequest();
-      _requests.push(request);
-      request.timeout = props.timeout;
-      request.ontimeout = props.onTimeout;
-      request.onreadystatechange = () => {
-        if (request.readyState !== 4) {
-          setListLoaderDisplayed(true);
-          return;
-        }
-
-        setListLoaderDisplayed(false);
-        if (request.status === 200) {
-          const responseJSON = JSON.parse(request.responseText);
-
-          _disableRowLoaders();
-
-          if (typeof responseJSON.results !== 'undefined') {
-            // if (_isMounted === true) {
-            var results = [];
-            if (props.nearbyPlacesAPI === 'GoogleReverseGeocoding') {
-              results = _filterResultsByTypes(
-                responseJSON.results,
-                props.filterReverseGeocodingByTypes,
-              );
-            } else {
-              results = responseJSON.results;
-            }
-
-            setDataSource(buildRowsFromResults(results));
-            // }
-          }
-          if (typeof responseJSON.error_message !== 'undefined') {
-            if (!props.onFail)
-              console.warn(
-                'google places autocomplete: ' + responseJSON.error_message,
-              );
-            else {
-              props.onFail(responseJSON.error_message);
-            }
-          }
-        } else {
-          // console.warn("google places autocomplete: request could not be completed or has been aborted");
-        }
-      };
-
-      let requestUrl = '';
-      if (props.nearbyPlacesAPI === 'GoogleReverseGeocoding') {
-        // your key must be allowed to use Google Maps Geocoding API
-        requestUrl =
-          `${url}/geocode/json?` +
-          Qs.stringify({
-            latlng: latitude + ',' + longitude,
-            key: props.query.key,
-            ...props.GoogleReverseGeocodingQuery,
-          });
-      } else {
-        requestUrl =
-          `${url}/place/nearbysearch/json?` +
-          Qs.stringify({
-            location: latitude + ',' + longitude,
-            key: props.query.key,
-            ...props.GooglePlacesSearchQuery,
-          });
-      }
-
-      request.open('GET', requestUrl);
-
-      request.withCredentials = requestShouldUseWithCredentials();
-      setRequestHeaders(request, getRequestHeaders(props.requestUrl));
-
-      request.send();
-    } else {
-      _results = [];
-      setDataSource(buildRowsFromResults([]));
-    }
-  };
-
-  const _request = (text) => {
-    _abortRequests();
-    if (!url) {
-      return;
-    }
-    if (supportedPlatform() && text && text.length >= props.minLength) {
-      const request = new XMLHttpRequest();
-      _requests.push(request);
-      request.timeout = props.timeout;
-      request.ontimeout = props.onTimeout;
-      request.onreadystatechange = () => {
-        if (request.readyState !== 4) {
-          setListLoaderDisplayed(true);
-          return;
-        }
-
-        setListLoaderDisplayed(false);
-        if (request.status === 200) {
-          const responseJSON = JSON.parse(request.responseText);
-          if (typeof responseJSON.predictions !== 'undefined') {
-            // if (_isMounted === true) {
-            const results =
-              props.nearbyPlacesAPI === 'GoogleReverseGeocoding'
-                ? _filterResultsByTypes(
-                    responseJSON.predictions,
-                    props.filterReverseGeocodingByTypes,
-                  )
-                : responseJSON.predictions;
-
-            _results = results;
-            setDataSource(buildRowsFromResults(results, text));
-            // }
-          }
-          if (typeof responseJSON.error_message !== 'undefined') {
-            if (!props.onFail)
-              console.warn(
-                'google places autocomplete: ' + responseJSON.error_message,
-              );
-            else {
-              props.onFail(responseJSON.error_message);
-            }
-          }
-        } else {
-          // console.warn("google places autocomplete: request could not be completed or has been aborted");
-        }
-      };
-
-      if (props.preProcess) {
-        setStateText(props.preProcess(text));
-      }
-
-      request.open(
-        'GET',
-        `${url}/place/autocomplete/json?input=` +
-          encodeURIComponent(text) +
-          '&' +
-          Qs.stringify(props.query),
-      );
-
-      request.withCredentials = requestShouldUseWithCredentials();
-      setRequestHeaders(request, getRequestHeaders(props.requestUrl));
-
-      request.send();
-    } else {
-      _results = [];
-      setDataSource(buildRowsFromResults([]));
+      onPress(predefinedPlace, predefinedPlace);
     }
   };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounceData = useMemo(() => debounce(_request, props.debounce), [
-    props.query,
-    url,
-  ]);
-
   const _onChangeText = (text) => {
     setStateText(text);
     debounceData(text);
@@ -588,38 +777,46 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
   const _handleChangeText = (text) => {
     _onChangeText(text);
 
-    const onChangeText = props?.textInputProps?.onChangeText;
+    const onChangeText = textInputProps?.onChangeText;
 
     if (onChangeText) {
       onChangeText(text);
     }
   };
 
-  const _getRowLoader = () => {
-    return <ActivityIndicator animating={true} size='small' />;
+  const isNewFocusInAutocompleteResultList = ({
+    relatedTarget,
+    currentTarget,
+  }) => {
+    if (!relatedTarget) return false;
+
+    let node = relatedTarget.parentNode;
+
+    while (node) {
+      if (node.id === 'result-list-id') return true;
+      node = node.parentNode;
+    }
+
+    return false;
   };
 
-  const _renderRowData = (rowData, index) => {
-    if (props.renderRow) {
-      return props.renderRow(rowData, index);
+  const _onBlur = (e) => {
+    if (e && isNewFocusInAutocompleteResultList(e)) return;
+
+    if (!keepResultsAfterBlur) {
+      setListViewDisplayed(false);
     }
+    inputRef?.current?.blur();
+  };
 
-    return (
-      <Text
-        style={[
-          props.suppressDefaultStyles ? {} : defaultStyles.description,
-          props.styles.description,
-          rowData.isPredefinedPlace
-            ? props.styles.predefinedPlacesDescription
-            : {},
-        ]}
-        numberOfLines={props.numberOfLines}
-      >
-        {_renderDescription(rowData)}
-      </Text>
-    );
+  const _onFocus = () => {
+    setListViewDisplayed(true);
   };
 
+  // ==========================================================================
+  // RENDER FUNCTIONS
+  // ==========================================================================
+
   const _renderDescription = (rowData) => {
     if (props.renderDescription) {
       return props.renderDescription(rowData);
@@ -628,13 +825,17 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     return rowData.description || rowData.formatted_address || rowData.name;
   };
 
+  const _getRowLoader = () => {
+    return <ActivityIndicator animating={true} size='small' />;
+  };
+
   const _renderLoader = (rowData) => {
     if (rowData.isLoading === true) {
       return (
         <View
           style={[
-            props.suppressDefaultStyles ? {} : defaultStyles.loader,
-            props.styles.loader,
+            suppressDefaultStyles ? {} : defaultStyles.loader,
+            styles?.loader,
           ]}
         >
           {_getRowLoader()}
@@ -645,26 +846,45 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     return null;
   };
 
+  const _renderRowData = (rowData, index) => {
+    if (props.renderRow) {
+      return props.renderRow(rowData, index);
+    }
+
+    return (
+      <Text
+        style={[
+          suppressDefaultStyles ? {} : defaultStyles.description,
+          styles?.description,
+          rowData.isPredefinedPlace ? styles?.predefinedPlacesDescription : {},
+        ]}
+        numberOfLines={numberOfLines}
+      >
+        {_renderDescription(rowData)}
+      </Text>
+    );
+  };
+
   const _renderRow = (rowData = {}, index) => {
     return (
       <ScrollView
         contentContainerStyle={
-          props.isRowScrollable ? { minWidth: '100%' } : { width: '100%' }
+          isRowScrollable ? { minWidth: '100%' } : { width: '100%' }
         }
-        scrollEnabled={props.isRowScrollable}
-        keyboardShouldPersistTaps={props.keyboardShouldPersistTaps}
+        scrollEnabled={isRowScrollable}
+        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}
       >
         <Pressable
           style={({ hovered, pressed }) => [
-            props.isRowScrollable ? { minWidth: '100%' } : { width: '100%' },
+            isRowScrollable ? { minWidth: '100%' } : { width: '100%' },
             {
               backgroundColor: pressed
-                ? props.listUnderlayColor
+                ? listUnderlayColor
                 : hovered
-                ? props.listHoverColor
+                ? listHoverColor
                 : undefined,
             },
           ]}
@@ -673,9 +893,9 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
         >
           <View
             style={[
-              props.suppressDefaultStyles ? {} : defaultStyles.row,
-              props.styles.row,
-              rowData.isPredefinedPlace ? props.styles.specialItemRow : {},
+              suppressDefaultStyles ? {} : defaultStyles.row,
+              styles?.row,
+              rowData.isPredefinedPlace ? styles?.specialItemRow : {},
             ]}
           >
             {_renderLoader(rowData)}
@@ -695,40 +915,29 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
       <View
         key={`${sectionID}-${rowID}`}
         style={[
-          props.suppressDefaultStyles ? {} : defaultStyles.separator,
-          props.styles.separator,
+          suppressDefaultStyles ? {} : defaultStyles.separator,
+          styles?.separator,
         ]}
       />
     );
   };
 
-  const isNewFocusInAutocompleteResultList = ({
-    relatedTarget,
-    currentTarget,
-  }) => {
-    if (!relatedTarget) return false;
+  const _shouldShowPoweredLogo = () => {
+    if (!enablePoweredByContainer || dataSource.length === 0) {
+      return false;
+    }
 
-    var node = relatedTarget.parentNode;
+    for (let i = 0; i < dataSource.length; i++) {
+      const row = dataSource[i];
 
-    while (node) {
-      if (node.id === 'result-list-id') return true;
-      node = node.parentNode;
+      if (!('isCurrentLocation' in row) && !('isPredefinedPlace' in row)) {
+        return true;
+      }
     }
 
     return false;
   };
 
-  const _onBlur = (e) => {
-    if (e && isNewFocusInAutocompleteResultList(e)) return;
-
-    if (!props.keepResultsAfterBlur) {
-      setListViewDisplayed(false);
-    }
-    inputRef?.current?.blur();
-  };
-
-  const _onFocus = () => setListViewDisplayed(true);
-
   const _renderPoweredLogo = () => {
     if (!_shouldShowPoweredLogo()) {
       return null;
@@ -737,15 +946,15 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     return (
       <View
         style={[
-          props.suppressDefaultStyles ? {} : defaultStyles.row,
+          suppressDefaultStyles ? {} : defaultStyles.row,
           defaultStyles.poweredContainer,
-          props.styles.poweredContainer,
+          styles?.poweredContainer,
         ]}
       >
         <Image
           style={[
-            props.suppressDefaultStyles ? {} : defaultStyles.powered,
-            props.styles.powered,
+            suppressDefaultStyles ? {} : defaultStyles.powered,
+            styles?.powered,
           ]}
           resizeMode='contain'
           source={require('./images/powered_by_google_on_white.png')}
@@ -754,71 +963,73 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     );
   };
 
-  const _shouldShowPoweredLogo = () => {
-    if (!props.enablePoweredByContainer || dataSource.length === 0) {
-      return false;
-    }
-
-    for (let i = 0; i < dataSource.length; i++) {
-      let row = dataSource[i];
-
-      if (
-        !row.hasOwnProperty('isCurrentLocation') &&
-        !row.hasOwnProperty('isPredefinedPlace')
-      ) {
-        return true;
-      }
-    }
-
-    return false;
-  };
-
   const _renderLeftButton = () => {
     if (props.renderLeftButton) {
       return props.renderLeftButton();
     }
+    return null;
   };
 
   const _renderRightButton = () => {
     if (props.renderRightButton) {
       return props.renderRightButton();
     }
+    return null;
   };
 
   const _getFlatList = () => {
-    const keyGenerator = () => Math.random().toString(36).substr(2, 10);
+    const keyExtractor = (item, index) => {
+      // Use stable keys based on item data
+      if (item.place_id) {
+        return `place_${item.place_id}_${index}`;
+      }
+      if (item.isCurrentLocation) {
+        return 'current_location';
+      }
+      if (item.isPredefinedPlace && item.description) {
+        return `predefined_${item.description}_${index}`;
+      }
+      // Fallback to index-based key (should rarely happen)
+      return `item_${index}`;
+    };
 
-    if (
+    // Show list if:
+    // 1. Platform is supported
+    // 2. There's data to show (dataSource has items)
+    // 3. listViewDisplayed is true OR we're in 'auto' mode (auto-shows when data exists)
+    const isAutoMode =
+      listViewDisplayedProp === 'auto' || listViewDisplayedProp === undefined;
+    const shouldShowList =
       supportedPlatform() &&
-      (stateText !== '' ||
-        props.predefinedPlaces.length > 0 ||
-        props.currentLocation === true) &&
-      listViewDisplayed === true
-    ) {
+      dataSource.length > 0 &&
+      (listViewDisplayed === true || isAutoMode);
+
+    if (shouldShowList) {
       return (
         <FlatList
           nativeID='result-list-id'
-          scrollEnabled={!props.disableScroll}
+          scrollEnabled={!disableScroll}
+          nestedScrollEnabled={true}
           style={[
-            props.suppressDefaultStyles ? {} : defaultStyles.listView,
-            props.styles.listView,
+            suppressDefaultStyles ? {} : defaultStyles.listView,
+            styles?.listView,
           ]}
           data={dataSource}
-          keyExtractor={keyGenerator}
+          keyExtractor={keyExtractor}
           extraData={[dataSource, props]}
           ItemSeparatorComponent={_renderSeparator}
           renderItem={({ item, index }) => _renderRow(item, index)}
           ListEmptyComponent={
             listLoaderDisplayed
               ? props.listLoaderComponent
-              : stateText.length > props.minLength && props.listEmptyComponent
+              : stateText.length > minLength && props.listEmptyComponent
           }
           ListHeaderComponent={
             props.renderHeaderComponent &&
             props.renderHeaderComponent(stateText)
           }
           ListFooterComponent={_renderPoweredLogo}
-          {...props}
+          {...restProps}
         />
       );
     }
@@ -826,52 +1037,141 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     return null;
   };
 
-  let {
-    onFocus,
-    onBlur,
-    onChangeText, // destructuring here stops this being set after onChangeText={_handleChangeText}
+  // ==========================================================================
+  // EFFECTS
+  // ==========================================================================
+
+  // Update query ref when query changes
+  useEffect(() => {
+    queryRef.current = query;
+  }, [query]);
+
+  // Initialize URL from requestUrl prop
+  useEffect(() => {
+    setUrl(getRequestUrl(props.requestUrl));
+  }, [props.requestUrl]);
+
+  // Initialize dataSource on mount
+  useEffect(() => {
+    setDataSource(buildRowsFromResults([]));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Keep requestRef updated
+  requestRef.current = _request;
+
+  // Debounce setup
+  const debounceData = useMemo(() => {
+    return debounce((text) => requestRef.current(text), debounceMs);
+  }, [debounceMs]);
+
+  useEffect(() => {
+    return () => {
+      // Cleanup debounced function on unmount
+      if (debounceData.cancel) {
+        debounceData.cancel();
+      }
+    };
+  }, [debounceData]);
+
+  // Reload search when query changes (using string comparison to avoid object reference issues)
+  useEffect(() => {
+    const queryChanged = prevQueryStringRef.current !== queryString;
+
+    if (queryChanged) {
+      prevQueryStringRef.current = queryString;
+      if (stateText && stateText.length >= minLength) {
+        debounceData(stateText);
+      }
+    }
+
+    return () => {
+      _abortRequests();
+    };
+  }, [queryString, debounceData, stateText, minLength, _abortRequests]);
+
+  // Auto-show list when dataSource has items in 'auto' mode
+  useEffect(() => {
+    if (
+      listViewDisplayedProp === 'auto' &&
+      dataSource.length > 0 &&
+      !listViewDisplayed
+    ) {
+      setListViewDisplayed(true);
+    }
+  }, [dataSource.length, listViewDisplayedProp, listViewDisplayed]);
+
+  // ==========================================================================
+  // IMPERATIVE HANDLE
+  // ==========================================================================
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      setAddressText: (address) => {
+        setStateText(address);
+      },
+      getAddressText: () => stateText,
+      blur: () => inputRef.current?.blur(),
+      focus: () => inputRef.current?.focus(),
+      isFocused: () => inputRef.current?.isFocused(),
+      clear: () => inputRef.current?.clear(),
+      getCurrentLocation,
+    }),
+    [stateText, getCurrentLocation],
+  );
+
+  // ==========================================================================
+  // MAIN RENDER
+  // ==========================================================================
+
+  const {
+    onFocus: textInputOnFocus,
+    onBlur: textInputOnBlur,
+    onChangeText: textInputOnChangeText, // destructuring here stops this being set after onChangeText={_handleChangeText}
     clearButtonMode,
     InputComp,
     ...userProps
-  } = props.textInputProps;
+  } = textInputProps || {};
   const TextInputComp = InputComp || TextInput;
+
   return (
     <View
       style={[
-        props.suppressDefaultStyles ? {} : defaultStyles.container,
-        props.styles.container,
+        suppressDefaultStyles ? {} : defaultStyles.container,
+        styles?.container,
       ]}
       pointerEvents='box-none'
     >
-      {!props.textInputHide && (
+      {!textInputHide && (
         <View
           style={[
-            props.suppressDefaultStyles ? {} : defaultStyles.textInputContainer,
-            props.styles.textInputContainer,
+            suppressDefaultStyles ? {} : defaultStyles.textInputContainer,
+            styles?.textInputContainer,
           ]}
         >
           {_renderLeftButton()}
           <TextInputComp
             ref={inputRef}
             style={[
-              props.suppressDefaultStyles ? {} : defaultStyles.textInput,
-              props.styles.textInput,
+              suppressDefaultStyles ? {} : defaultStyles.textInput,
+              styles?.textInput,
             ]}
             value={stateText}
-            placeholder={props.placeholder}
+            placeholder={placeholder}
             onFocus={
-              onFocus
+              textInputOnFocus
                 ? (e) => {
                     _onFocus();
-                    onFocus(e);
+                    textInputOnFocus(e);
                   }
                 : _onFocus
             }
             onBlur={
-              onBlur
+              textInputOnBlur
                 ? (e) => {
                     _onBlur(e);
-                    onBlur(e);
+                    textInputOnBlur(e);
                   }
                 : _onBlur
             }
@@ -889,105 +1189,6 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
   );
 });
 
-GooglePlacesAutocomplete.propTypes = {
-  autoFillOnNotFound: PropTypes.bool,
-  currentLocation: PropTypes.bool,
-  currentLocationLabel: PropTypes.string,
-  debounce: PropTypes.number,
-  disableScroll: PropTypes.bool,
-  enableHighAccuracyLocation: PropTypes.bool,
-  enablePoweredByContainer: PropTypes.bool,
-  fetchDetails: PropTypes.bool,
-  filterReverseGeocodingByTypes: PropTypes.array,
-  GooglePlacesDetailsQuery: PropTypes.object,
-  GooglePlacesSearchQuery: PropTypes.object,
-  GoogleReverseGeocodingQuery: PropTypes.object,
-  inbetweenCompo: PropTypes.object,
-  isRowScrollable: PropTypes.bool,
-  keyboardShouldPersistTaps: PropTypes.oneOf(['never', 'always', 'handled']),
-  listEmptyComponent: PropTypes.element,
-  listLoaderComponent: PropTypes.element,
-  listHoverColor: PropTypes.string,
-  listUnderlayColor: PropTypes.string,
-  // Must write it this way: https://stackoverflow.com/a/54290946/7180620
-  listViewDisplayed: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.oneOf(['auto']),
-  ]),
-  keepResultsAfterBlur: PropTypes.bool,
-  minLength: PropTypes.number,
-  nearbyPlacesAPI: PropTypes.string,
-  numberOfLines: PropTypes.number,
-  onFail: PropTypes.func,
-  onNotFound: PropTypes.func,
-  onPress: PropTypes.func,
-  onTimeout: PropTypes.func,
-  placeholder: PropTypes.string,
-  predefinedPlaces: PropTypes.array,
-  predefinedPlacesAlwaysVisible: PropTypes.bool,
-  preProcess: PropTypes.func,
-  query: PropTypes.object,
-  renderDescription: PropTypes.func,
-  renderHeaderComponent: PropTypes.func,
-  renderLeftButton: PropTypes.func,
-  renderRightButton: PropTypes.func,
-  renderRow: PropTypes.func,
-  requestUrl: PropTypes.shape({
-    url: PropTypes.string,
-    useOnPlatform: PropTypes.oneOf(['web', 'all']),
-    headers: PropTypes.objectOf(PropTypes.string),
-  }),
-  styles: PropTypes.object,
-  suppressDefaultStyles: PropTypes.bool,
-  textInputHide: PropTypes.bool,
-  textInputProps: PropTypes.object,
-  timeout: PropTypes.number,
-};
-
-GooglePlacesAutocomplete.defaultProps = {
-  autoFillOnNotFound: false,
-  currentLocation: false,
-  currentLocationLabel: 'Current location',
-  debounce: 0,
-  disableScroll: false,
-  enableHighAccuracyLocation: true,
-  enablePoweredByContainer: true,
-  fetchDetails: false,
-  filterReverseGeocodingByTypes: [],
-  GooglePlacesDetailsQuery: {},
-  GooglePlacesSearchQuery: {
-    rankby: 'distance',
-    type: 'restaurant',
-  },
-  GoogleReverseGeocodingQuery: {},
-  isRowScrollable: true,
-  keyboardShouldPersistTaps: 'always',
-  listHoverColor: '#ececec',
-  listUnderlayColor: '#c8c7cc',
-  listViewDisplayed: 'auto',
-  keepResultsAfterBlur: false,
-  minLength: 0,
-  nearbyPlacesAPI: 'GooglePlacesSearch',
-  numberOfLines: 1,
-  onFail: () => {},
-  onNotFound: () => {},
-  onPress: () => {},
-  onTimeout: () => console.warn('google places autocomplete: request timeout'),
-  placeholder: '',
-  predefinedPlaces: [],
-  predefinedPlacesAlwaysVisible: false,
-  query: {
-    key: 'missing api key',
-    language: 'en',
-    types: 'geocode',
-  },
-  styles: {},
-  suppressDefaultStyles: false,
-  textInputHide: false,
-  textInputProps: {},
-  timeout: 20000,
-};
-
 GooglePlacesAutocomplete.displayName = 'GooglePlacesAutocomplete';
 
 export default { GooglePlacesAutocomplete };