react-native-google-places-autocomplete 2.6.3 → 2.6.5

package/GooglePlacesAutocomplete.js

@@ -1,79 +1,136 @@
-/* eslint-disable react-native/no-inline-styles */
-import debounce from 'lodash.debounce';
-import Qs from 'qs';
-import uuid from 'react-native-uuid';
 import React, {
   forwardRef,
-  useMemo,
+  useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
-  useCallback,
 } from 'react';
 import {
-  ActivityIndicator,
   FlatList,
   Image,
   Keyboard,
   Platform,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  Text,
   TextInput,
   View,
 } from 'react-native';
 
+import Row from './src/Row';
+import { debounce as createDebounce } from './src/debounce';
+import { stringify } from './src/queryString';
+import {
+  buildRowsFromResults,
+  filterResultsByPlacePredictions,
+  filterResultsByTypes,
+  getRowKey,
+} from './src/results';
+import { mergeStyles } from './src/styles';
+import { uuidv4 } from './src/uuid';
+
 // ============================================================================
 // CONSTANTS
+//
+// Every default that is an object or an array lives out here. Declaring them
+// inline in the destructuring pattern created a fresh identity on every render,
+// which silently defeated every useMemo/useCallback downstream of them.
 // ============================================================================
 
-const defaultStyles = {
-  container: {
-    flex: 1,
-  },
-  textInputContainer: {
-    flexDirection: 'row',
-  },
-  textInput: {
-    backgroundColor: '#FFFFFF',
-    height: 44,
-    borderRadius: 5,
-    paddingVertical: 5,
-    paddingHorizontal: 10,
-    fontSize: 15,
-    flex: 1,
-    marginBottom: 5,
-  },
-  listView: {
-    backgroundColor: '#FFFFFF',
-  },
-  row: {
-    backgroundColor: '#FFFFFF',
-    padding: 13,
-    minHeight: 44,
-    flexDirection: 'row',
-  },
-  loader: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    height: 20,
-  },
-  description: {},
-  separator: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: '#c8c7cc',
-  },
-  poweredContainer: {
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    borderBottomRightRadius: 5,
-    borderBottomLeftRadius: 5,
-    borderColor: '#c8c7cc',
-    borderTopWidth: 0.5,
-  },
-  powered: {},
+const GOOGLE_API_BASE = 'https://maps.googleapis.com/maps/api';
+
+const EMPTY_ARRAY = Object.freeze([]);
+const EMPTY_OBJECT = Object.freeze({});
+
+const DEFAULT_QUERY = Object.freeze({
+  key: 'missing api key',
+  language: 'en',
+  types: 'geocode',
+});
+
+const DEFAULT_SEARCH_QUERY = Object.freeze({
+  rankby: 'distance',
+  type: 'restaurant',
+});
+
+const noop = () => {};
+
+const defaultOnTimeout = () =>
+  console.warn('google places autocomplete: request timeout');
+
+const getRequestUrl = (requestUrl) => {
+  if (requestUrl) {
+    if (requestUrl.useOnPlatform === 'all') {
+      return requestUrl.url;
+    }
+    if (requestUrl.useOnPlatform === 'web') {
+      return Platform.select({ web: requestUrl.url, default: GOOGLE_API_BASE });
+    }
+  }
+  return GOOGLE_API_BASE;
+};
+
+/**
+ * Detaching the handler before aborting keeps `abort()` from reporting itself
+ * as a transport failure. Nothing can be observed about a request after this,
+ * so only ever call it on a request the component has decided to abandon.
+ */
+const abortRequest = (request) => {
+  request.onreadystatechange = null;
+  request.abort();
+};
+
+const setRequestHeaders = (request, headers) => {
+  if (!headers) {
+    return;
+  }
+  Object.keys(headers).forEach((key) =>
+    request.setRequestHeader(key, headers[key]),
+  );
+};
+
+/**
+ * Resolve the geolocation provider *without* detaching the method from its
+ * receiver — class-based implementations rely on `this`.
+ */
+const getGeolocationProvider = () => {
+  const geolocation =
+    typeof navigator !== 'undefined' ? navigator.geolocation : undefined;
+
+  if (geolocation?.getCurrentPosition) {
+    return geolocation;
+  }
+  if (geolocation?.default?.getCurrentPosition) {
+    return geolocation.default;
+  }
+  return null;
+};
+
+/** Only the results that came from the API earn the "powered by Google" logo. */
+const hasApiResults = (rows) => {
+  for (let i = 0; i < rows.length; i++) {
+    if (
+      !('isCurrentLocation' in rows[i]) &&
+      !('isPredefinedPlace' in rows[i])
+    ) {
+      return true;
+    }
+  }
+  return false;
+};
+
+const isFocusInsideResultList = ({ relatedTarget }) => {
+  if (!relatedTarget) {
+    return false;
+  }
+
+  let node = relatedTarget.parentNode;
+  while (node) {
+    if (node.id === 'result-list-id') {
+      return true;
+    }
+    node = node.parentNode;
+  }
+  return false;
 };
 
 // ============================================================================
@@ -81,11 +138,9 @@ const defaultStyles = {
 // ============================================================================
 
 export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
-  // ==========================================================================
-  // PROPS DESTRUCTURING
-  // ==========================================================================
   const {
     autoFillOnNotFound = false,
+    children,
     currentLocation = false,
     currentLocationLabel = 'Current location',
     debounce: debounceMs = 0,
@@ -93,655 +148,570 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
     enableHighAccuracyLocation = true,
     enablePoweredByContainer = true,
     fetchDetails = false,
-    filterReverseGeocodingByTypes = [],
-    GooglePlacesDetailsQuery = {},
-    GooglePlacesSearchQuery = {
-      rankby: 'distance',
-      type: 'restaurant',
-    },
-    GoogleReverseGeocodingQuery = {},
+    fields = '*',
+    filterReverseGeocodingByTypes = EMPTY_ARRAY,
+    GooglePlacesDetailsQuery = EMPTY_OBJECT,
+    GooglePlacesSearchQuery = DEFAULT_SEARCH_QUERY,
+    GoogleReverseGeocodingQuery = EMPTY_OBJECT,
+    inbetweenCompo,
+    isNewPlacesAPI = false,
     isRowScrollable = true,
+    keepResultsAfterBlur = false,
     keyboardShouldPersistTaps = 'always',
+    listEmptyComponent,
     listHoverColor = '#ececec',
+    listLoaderComponent,
     listUnderlayColor = '#c8c7cc',
     listViewDisplayed: listViewDisplayedProp = 'auto',
-    keepResultsAfterBlur = false,
     minLength = 0,
     nearbyPlacesAPI = 'GooglePlacesSearch',
     numberOfLines = 1,
-    onFail = () => {},
-    onNotFound = () => {},
-    onPress = () => {},
-    onTimeout = () =>
-      console.warn('google places autocomplete: request timeout'),
+    onFail,
+    onNotFound,
+    onPress: onPressProp = noop,
+    onTimeout = defaultOnTimeout,
     placeholder = '',
-    predefinedPlaces: predefinedPlacesProp = [],
+    predefinedPlaces = EMPTY_ARRAY,
     predefinedPlacesAlwaysVisible = false,
-    query = {
-      key: 'missing api key',
-      language: 'en',
-      types: 'geocode',
-    },
-    styles = {},
+    preProcess,
+    query = DEFAULT_QUERY,
+    renderDescription,
+    renderHeaderComponent,
+    renderLeftButton,
+    renderRightButton,
+    renderRow,
+    requestUrl,
+    styles = EMPTY_OBJECT,
     suppressDefaultStyles = false,
     textInputHide = false,
-    textInputProps = {},
+    textInputProps = EMPTY_OBJECT,
     timeout = 20000,
-    isNewPlacesAPI = false,
-    fields = '*',
     ...restProps
   } = props;
 
-  // ==========================================================================
-  // STATE & REFS
-  // ==========================================================================
-  const predefinedPlaces = useMemo(() => predefinedPlacesProp || [], [
-    predefinedPlacesProp,
-  ]);
+  // --------------------------------------------------------------------------
+  // Derived values
+  // --------------------------------------------------------------------------
 
-  // Store results array - useRef prevents re-renders when updating results, allows access to latest results in callbacks
-  const resultsRef = useRef([]);
+  const url = useMemo(() => getRequestUrl(requestUrl), [requestUrl]);
+  const requestHeaders = requestUrl?.headers;
+  const withCredentials = url === GOOGLE_API_BASE;
 
-  // Store active XMLHttpRequest objects - needed to abort requests when component unmounts or new search starts
-  const requestsRef = useRef([]);
+  const isSupportedPlatform = !(Platform.OS === 'web' && !requestUrl);
 
-  // Track if navigator warning has been shown - prevents duplicate console warnings
-  const hasWarnedAboutNavigator = useRef(false);
+  const mergedStyles = useMemo(
+    () => mergeStyles(styles, suppressDefaultStyles),
+    [styles, suppressDefaultStyles],
+  );
 
-  // Reference to TextInput component - enables imperative methods (focus, blur, clear) via ref
-  const inputRef = useRef(null);
+  const isAutoMode =
+    listViewDisplayedProp === 'auto' || listViewDisplayedProp === undefined;
 
-  // Store current query object - allows access to latest query in callbacks without stale closures
-  const queryRef = useRef(query);
+  const hasGeolocation = currentLocation === true && !!getGeolocationProvider();
 
-  // Store previous query string - used to detect query changes without causing re-renders
-  const prevQueryStringRef = useRef(JSON.stringify(query));
+  const rowOptions = useMemo(
+    () => ({
+      predefinedPlaces,
+      predefinedPlacesAlwaysVisible,
+      currentLocation: hasGeolocation,
+      currentLocationLabel,
+    }),
+    [
+      predefinedPlaces,
+      predefinedPlacesAlwaysVisible,
+      hasGeolocation,
+      currentLocationLabel,
+    ],
+  );
 
-  // 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]);
+  // --------------------------------------------------------------------------
+  // State & refs
+  // --------------------------------------------------------------------------
 
   const [stateText, setStateText] = useState('');
-  const [dataSource, setDataSource] = useState([]);
-  const [listViewDisplayed, setListViewDisplayed] = useState(
-    listViewDisplayedProp === 'auto' ? false : listViewDisplayedProp,
-  );
+  const [dataSource, setDataSource] = useState(EMPTY_ARRAY);
   const [listWasDismissed, setListWasDismissed] = useState(false);
-  const [url, setUrl] = useState('');
   const [listLoaderDisplayed, setListLoaderDisplayed] = useState(false);
-  const [sessionToken, setSessionToken] = useState(uuid.v4());
+  const [loadingRowKey, setLoadingRowKey] = useState(null);
+  const [sessionToken, setSessionToken] = useState(uuidv4);
 
-  // ==========================================================================
-  // UTILITY FUNCTIONS
-  // ==========================================================================
+  const inputRef = useRef(null);
+  const resultsRef = useRef(EMPTY_ARRAY);
+  const requestsRef = useRef([]);
+  const detailsRequestRef = useRef(null);
+  const stateTextRef = useRef(stateText);
+  const loadingRowKeyRef = useRef(loadingRowKey);
+  const prevQueryStringRef = useRef(null);
+  // True from the moment a row is chosen until the user edits the text again.
+  // Focus alone must not re-open the list while it is set: the field already
+  // holds what the user picked, and the predictions behind it are spent.
+  const selectionMadeRef = useRef(false);
+  // The description of the row that was chosen. The platform writes it into
+  // the input and echoes it back through onChangeText, which is indisting-
+  // uishable from typing unless we remember what we are expecting.
+  const selectedTextRef = useRef(null);
+
+  stateTextRef.current = stateText;
+  loadingRowKeyRef.current = loadingRowKey;
 
-  const hasNavigator = useCallback(() => {
-    if (navigator?.geolocation) {
-      return true;
-    }
-    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 queryString = useMemo(() => JSON.stringify(query), [query]);
 
-  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;
-    }
-    return true;
-  };
+  // --------------------------------------------------------------------------
+  // Helpers
+  //
+  // Declaration order below is load-bearing: every one of these is read by the
+  // ones that follow it. Reading a `const` above its declaration is a temporal
+  // dead zone error under any bundler that does not downlevel `const` to `var`
+  // (Expo web, Vite, webpack with modern targets).
+  // --------------------------------------------------------------------------
+
+  // Searches and the Place Details lookup are tracked separately because their
+  // lifetimes are independent: a details request is started by a row press and
+  // outlives the search that produced the row. Sharing one list meant the next
+  // search aborted the details request that had just been sent, and since the
+  // abort detaches the handler the selection was lost without a single
+  // callback firing (#998).
+  const abortSearchRequests = useCallback(() => {
+    requestsRef.current.forEach(abortRequest);
+    requestsRef.current = [];
+  }, []);
 
-  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',
-        });
-      }
+  const abortDetailsRequest = useCallback(() => {
+    if (detailsRequestRef.current) {
+      abortRequest(detailsRequestRef.current);
+      detailsRequestRef.current = null;
     }
-    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 prepareRequest = useCallback(
+    (request) => {
+      request.timeout = timeout;
+      request.ontimeout = onTimeout;
+      return request;
+    },
+    [timeout, onTimeout],
+  );
 
-  const requestShouldUseWithCredentials = useCallback(() => {
-    return url === 'https://maps.googleapis.com/maps/api';
-  }, [url]);
+  const trackSearchRequest = useCallback(
+    (request) => {
+      requestsRef.current.push(prepareRequest(request));
+      return request;
+    },
+    [prepareRequest],
+  );
 
-  const _abortRequests = useCallback(() => {
-    requestsRef.current.forEach((request) => {
-      request.onreadystatechange = null;
-      request.abort();
-    });
-    requestsRef.current = [];
-  }, []);
+  const trackDetailsRequest = useCallback(
+    (request) => {
+      detailsRequestRef.current = prepareRequest(request);
+      return request;
+    },
+    [prepareRequest],
+  );
 
-  // ==========================================================================
-  // DATA PROCESSING FUNCTIONS
-  // ==========================================================================
+  const buildRows = useCallback(
+    (results, text) => buildRowsFromResults(results, text, rowOptions),
+    [rowOptions],
+  );
 
-  const buildRowsFromResults = useCallback(
-    (results, text) => {
-      let res = [];
-      // 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 ||
-        predefinedPlacesAlwaysVisible === true
-      ) {
-        if (predefinedPlaces.length > 0) {
-          res = [
-            ...predefinedPlaces.filter((place) => place?.description?.length),
-          ];
-        }
+  const disableRowLoaders = useCallback(() => setLoadingRowKey(null), []);
 
-        if (currentLocation === true && hasNavigator()) {
-          res.unshift({
-            description: currentLocationLabel,
-            isCurrentLocation: true,
-          });
-        }
+  const reportFailure = useCallback(
+    (message) => {
+      if (onFail) {
+        onFail(message);
+      } else {
+        console.warn('google places autocomplete: ' + message);
       }
-
-      res = res.map((place) => ({
-        ...place,
-        isPredefinedPlace: true,
-      }));
-
-      return [...res, ...results];
     },
-    [
-      predefinedPlacesAlwaysVisible,
-      predefinedPlaces,
-      currentLocation,
-      currentLocationLabel,
-      hasNavigator,
-    ],
+    [onFail],
   );
 
-  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;
-        }
+  const renderRowDescription = useCallback(
+    (rowData) => {
+      if (renderDescription) {
+        return renderDescription(rowData);
       }
+      return rowData.description || rowData.formatted_address || rowData.name;
+    },
+    [renderDescription],
+  );
 
-      if (found === true) {
-        results.push(unfilteredResults[i]);
+  const getPredefinedPlace = useCallback(
+    (rowData) => {
+      if (rowData.isPredefinedPlace !== true) {
+        return rowData;
       }
-    }
-    return results;
-  }, []);
+      const match = predefinedPlaces.find(
+        (place) => place?.description === rowData.description,
+      );
+      return match || rowData;
+    },
+    [predefinedPlaces],
+  );
 
-  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 ?? [],
-        });
+  const showResults = useCallback(
+    (results, text) => {
+      resultsRef.current = results;
+      setDataSource(buildRows(results, text));
+
+      // A response that lands after the user has already chosen a row is
+      // stale by definition: showing it would re-open the list over the
+      // selection.
+      if (!selectionMadeRef.current) {
+        setListWasDismissed(false);
       }
-    }
-    return results;
-  };
+    },
+    [buildRows],
+  );
 
-  const _getPredefinedPlace = (rowData) => {
-    if (rowData.isPredefinedPlace !== true) {
-      return rowData;
-    }
+  // --------------------------------------------------------------------------
+  // Requests
+  // --------------------------------------------------------------------------
 
-    if (predefinedPlaces.length > 0) {
-      for (let i = 0; i < predefinedPlaces.length; i++) {
-        if (predefinedPlaces[i].description === rowData.description) {
-          return predefinedPlaces[i];
-        }
+  const requestNearby = useCallback(
+    (latitude, longitude) => {
+      abortSearchRequests();
+
+      if (latitude == null || longitude == null) {
+        resultsRef.current = EMPTY_ARRAY;
+        setDataSource(buildRows(EMPTY_ARRAY, ''));
+        return;
       }
-    }
 
-    return rowData;
-  };
+      const request = trackSearchRequest(new XMLHttpRequest());
 
-  // ==========================================================================
-  // API REQUEST FUNCTIONS
-  // ==========================================================================
+      request.onreadystatechange = () => {
+        if (request.readyState !== 4) {
+          setListLoaderDisplayed(true);
+          return;
+        }
 
-  const _requestNearby = useCallback(
-    (latitude, longitude) => {
-      _abortRequests();
-
-      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);
 
-          setListLoaderDisplayed(false);
-          if (request.status === 200) {
-            const responseJSON = JSON.parse(request.responseText);
+        if (request.status !== 200) {
+          return;
+        }
 
-            _disableRowLoaders();
+        const responseJSON = JSON.parse(request.responseText);
+        disableRowLoaders();
 
-            if (typeof responseJSON.results !== 'undefined') {
-              let results = [];
-              if (nearbyPlacesAPI === 'GoogleReverseGeocoding') {
-                results = _filterResultsByTypes(
+        if (typeof responseJSON.results !== 'undefined') {
+          const results =
+            nearbyPlacesAPI === 'GoogleReverseGeocoding'
+              ? 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
-              ) {
-                setListWasDismissed(false);
-                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,
+                )
+              : responseJSON.results;
+
+          showResults(results, '');
+        }
+
+        if (typeof responseJSON.error_message !== 'undefined') {
+          reportFailure(responseJSON.error_message);
+        }
+      };
+
+      const requestUrlPath =
+        nearbyPlacesAPI === 'GoogleReverseGeocoding'
+          ? `${url}/geocode/json?` +
+            stringify({
+              latlng: `${latitude},${longitude}`,
               key: query.key,
               ...GoogleReverseGeocodingQuery,
-            });
-        } else {
-          requestUrl =
-            `${url}/place/nearbysearch/json?` +
-            Qs.stringify({
-              location: latitude + ',' + longitude,
+            })
+          : `${url}/place/nearbysearch/json?` +
+            stringify({
+              location: `${latitude},${longitude}`,
               key: query.key,
               ...GooglePlacesSearchQuery,
             });
-        }
-
-        request.open('GET', requestUrl);
 
-        request.withCredentials = requestShouldUseWithCredentials();
-        setRequestHeaders(request, getRequestHeaders(props.requestUrl));
-
-        request.send();
-      } else {
-        resultsRef.current = [];
-        setDataSource(buildRowsFromResults([]));
-      }
+      request.open('GET', requestUrlPath);
+      request.withCredentials = withCredentials;
+      setRequestHeaders(request, requestHeaders);
+      request.send();
     },
     [
-      _abortRequests,
-      timeout,
-      onTimeout,
-      _disableRowLoaders,
+      abortSearchRequests,
+      trackSearchRequest,
+      buildRows,
+      disableRowLoaders,
+      showResults,
+      reportFailure,
       nearbyPlacesAPI,
-      _filterResultsByTypes,
       filterReverseGeocodingByTypes,
-      buildRowsFromResults,
-      listViewDisplayedProp,
-      onFail,
       url,
-      query,
+      query.key,
       GoogleReverseGeocodingQuery,
       GooglePlacesSearchQuery,
-      requestShouldUseWithCredentials,
-      props.requestUrl,
+      withCredentials,
+      requestHeaders,
     ],
   );
 
-  const _request = (text) => {
-    _abortRequests();
+  const request = useCallback(
+    (text) => {
+      abortSearchRequests();
 
-    if (!url) {
-      return;
-    }
+      if (!isSupportedPlatform) {
+        return;
+      }
 
-    if (supportedPlatform() && text && text.length >= minLength) {
-      const request = new XMLHttpRequest();
-      requestsRef.current.push(request);
+      if (!text || text.length < minLength) {
+        resultsRef.current = EMPTY_ARRAY;
+        setDataSource(buildRows(EMPTY_ARRAY, ''));
+        return;
+      }
 
-      request.timeout = timeout;
-      request.ontimeout = onTimeout;
-      request.onreadystatechange = () => {
-        if (request.readyState !== 4) {
+      const httpRequest = trackSearchRequest(new XMLHttpRequest());
+
+      httpRequest.onreadystatechange = () => {
+        if (httpRequest.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) {
-              setListWasDismissed(false);
-              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) {
-              setListWasDismissed(false);
-              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 (httpRequest.status !== 200) {
+          reportFailure('request could not be completed or has been aborted');
+          return;
+        }
+
+        const responseJSON = JSON.parse(httpRequest.responseText);
+
+        if (typeof responseJSON.predictions !== 'undefined') {
+          const results =
+            nearbyPlacesAPI === 'GoogleReverseGeocoding'
+              ? filterResultsByTypes(
+                  responseJSON.predictions,
+                  filterReverseGeocodingByTypes,
+                )
+              : responseJSON.predictions;
+
+          showResults(results, text);
+        }
+
+        if (typeof responseJSON.suggestions !== 'undefined') {
+          showResults(
+            filterResultsByPlacePredictions(responseJSON.suggestions),
+            text,
           );
         }
+
+        if (typeof responseJSON.error_message !== 'undefined') {
+          reportFailure(responseJSON.error_message);
+        }
       };
 
-      if (props.preProcess) {
-        setStateText(props.preProcess(text));
+      if (preProcess) {
+        setStateText(preProcess(text));
       }
 
       if (isNewPlacesAPI) {
         const keyQueryParam = query.key
-          ? '?' +
-            Qs.stringify({
-              key: query.key,
-            })
+          ? '?' + stringify({ key: query.key })
           : '';
-        request.open('POST', `${url}/v1/places:autocomplete${keyQueryParam}`);
+        httpRequest.open(
+          'POST',
+          `${url}/v1/places:autocomplete${keyQueryParam}`,
+        );
       } else {
-        request.open(
+        httpRequest.open(
           'GET',
           `${url}/place/autocomplete/json?input=` +
             encodeURIComponent(text) +
             '&' +
-            Qs.stringify(query),
+            stringify(query),
         );
       }
 
-      request.withCredentials = requestShouldUseWithCredentials();
-      setRequestHeaders(request, getRequestHeaders(props.requestUrl));
+      httpRequest.withCredentials = withCredentials;
+      setRequestHeaders(httpRequest, requestHeaders);
 
       if (isNewPlacesAPI) {
-        const { key, locationbias, types, ...rest } = query;
-        request.send(
-          JSON.stringify({
-            input: text,
-            sessionToken,
-            ...rest,
-          }),
-        );
+        // v1 renamed/removed several legacy parameters. `language` in
+        // particular is rejected outright — it is `languageCode` now.
+        const { key, locationbias, types, language, ...rest } = query;
+        const body = { input: text, sessionToken, ...rest };
+
+        if (language) {
+          body.languageCode = language;
+        }
+
+        httpRequest.send(JSON.stringify(body));
       } else {
-        request.send();
+        httpRequest.send();
       }
-    } else {
-      resultsRef.current = [];
-      setDataSource(buildRowsFromResults([]));
-    }
-  };
+    },
+    [
+      abortSearchRequests,
+      trackSearchRequest,
+      buildRows,
+      showResults,
+      reportFailure,
+      isSupportedPlatform,
+      minLength,
+      nearbyPlacesAPI,
+      filterReverseGeocodingByTypes,
+      preProcess,
+      isNewPlacesAPI,
+      url,
+      query,
+      sessionToken,
+      withCredentials,
+      requestHeaders,
+    ],
+  );
+
+  // The debounced caller reads through a ref so it always invokes the current
+  // closure without having to be rebuilt (and reset) on every render.
+  const requestRef = useRef(null);
+  useEffect(() => {
+    requestRef.current = request;
+  }, [request]);
+
+  const debouncedRequest = useMemo(
+    () => createDebounce((text) => requestRef.current?.(text), debounceMs),
+    [debounceMs],
+  );
 
   const getCurrentLocation = useCallback(() => {
-    let options = {
-      enableHighAccuracy: false,
-      timeout: 20000,
-      maximumAge: 1000,
-    };
-
-    if (enableHighAccuracyLocation && Platform.OS === 'android') {
-      options = {
-        enableHighAccuracy: true,
-        timeout: 20000,
-      };
+    const provider = getGeolocationProvider();
+
+    if (!provider) {
+      return;
     }
-    const getCurrentPosition =
-      navigator.geolocation.getCurrentPosition ||
-      navigator.geolocation.default?.getCurrentPosition;
-
-    if (getCurrentPosition) {
-      getCurrentPosition(
-        (position) => {
-          if (nearbyPlacesAPI === 'None') {
-            const currentLocationData = {
-              description: currentLocationLabel,
-              geometry: {
-                location: {
-                  lat: position.coords.latitude,
-                  lng: position.coords.longitude,
-                },
+
+    const options =
+      enableHighAccuracyLocation && Platform.OS === 'android'
+        ? { enableHighAccuracy: true, timeout: 20000 }
+        : { enableHighAccuracy: false, timeout: 20000, maximumAge: 1000 };
+
+    provider.getCurrentPosition(
+      (position) => {
+        if (nearbyPlacesAPI === 'None') {
+          const currentLocationData = {
+            description: currentLocationLabel,
+            geometry: {
+              location: {
+                lat: position.coords.latitude,
+                lng: position.coords.longitude,
               },
-            };
+            },
+          };
 
-            _disableRowLoaders();
-            onPress(currentLocationData, currentLocationData);
-          } else {
-            _requestNearby(position.coords.latitude, position.coords.longitude);
-          }
-        },
-        (error) => {
-          _disableRowLoaders();
-          console.error(error.message);
-        },
-        options,
-      );
-    }
+          disableRowLoaders();
+          onPressProp(currentLocationData, currentLocationData);
+          return;
+        }
+
+        requestNearby(position.coords.latitude, position.coords.longitude);
+      },
+      (error) => {
+        disableRowLoaders();
+        console.error(error.message);
+      },
+      options,
+    );
   }, [
     enableHighAccuracyLocation,
     currentLocationLabel,
     nearbyPlacesAPI,
-    _disableRowLoaders,
-    onPress,
-    _requestNearby,
+    disableRowLoaders,
+    onPressProp,
+    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;
-      }
-    }
-  };
+  // --------------------------------------------------------------------------
+  // Handlers
+  // --------------------------------------------------------------------------
 
-  const _disableRowLoaders = useCallback(() => {
-    for (let i = 0; i < resultsRef.current.length; i++) {
-      if (resultsRef.current[i].isLoading === true) {
-        resultsRef.current[i].isLoading = false;
+  const hideListView = useCallback(
+    (force = false) => {
+      if (!keepResultsAfterBlur || force) {
+        setListWasDismissed(true);
       }
-    }
-
-    setDataSource(buildRowsFromResults(resultsRef.current));
-  }, [buildRowsFromResults]);
+    },
+    [keepResultsAfterBlur],
+  );
 
-  const _onPress = (rowData) => {
-    if (rowData.isPredefinedPlace !== true && fetchDetails === true) {
-      if (rowData.isLoading === true) {
-        // already requesting
+  const handleBlur = useCallback(
+    (event) => {
+      if (event && isFocusInsideResultList(event)) {
         return;
       }
+      hideListView();
+      inputRef.current?.blur();
+    },
+    [hideListView],
+  );
 
+  const fetchPlaceDetails = useCallback(
+    (rowData) => {
       hideListView(true);
       Keyboard.dismiss();
+      abortSearchRequests();
+      abortDetailsRequest();
+      setLoadingRowKey(getRowKey(rowData));
 
-      _abortRequests();
+      const detailsRequest = trackDetailsRequest(new XMLHttpRequest());
 
-      // display loader
-      _enableRowLoader(rowData);
+      detailsRequest.onreadystatechange = () => {
+        if (detailsRequest.readyState !== 4) {
+          return;
+        }
 
-      // fetch details
-      const request = new XMLHttpRequest();
-      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' ||
-            (isNewPlacesAPI && responseJSON.id)
-          ) {
-            const details = isNewPlacesAPI ? responseJSON : responseJSON.result;
-            _disableRowLoaders();
-            _onBlur();
-
-            setStateText(_renderDescription(rowData));
-
-            delete rowData.isLoading;
-            onPress(rowData, details);
-          } else {
-            _disableRowLoaders();
-
-            if (autoFillOnNotFound) {
-              setStateText(_renderDescription(rowData));
-              delete rowData.isLoading;
-            }
-
-            if (!onNotFound) {
-              console.warn(
-                'google places autocomplete: ' + responseJSON.status,
-              );
-            } else {
-              onNotFound(responseJSON);
-            }
-          }
+        // Whatever the outcome, this request is no longer in flight: releasing
+        // it here keeps a later abort from reaching a settled request.
+        if (detailsRequestRef.current === detailsRequest) {
+          detailsRequestRef.current = null;
+        }
+
+        if (detailsRequest.status !== 200) {
+          disableRowLoaders();
+          reportFailure('request could not be completed or has been aborted');
+          return;
+        }
+
+        const responseJSON = JSON.parse(detailsRequest.responseText);
+        const succeeded =
+          responseJSON.status === 'OK' || (isNewPlacesAPI && responseJSON.id);
+
+        disableRowLoaders();
+
+        if (succeeded) {
+          const details = isNewPlacesAPI ? responseJSON : responseJSON.result;
+          handleBlur();
+          setStateText(renderRowDescription(rowData));
+          onPressProp(rowData, details);
+          return;
+        }
+
+        if (autoFillOnNotFound) {
+          setStateText(renderRowDescription(rowData));
+        }
+
+        if (onNotFound) {
+          onNotFound(responseJSON);
         } else {
-          _disableRowLoaders();
-
-          if (!onFail) {
-            console.warn(
-              'google places autocomplete: request could not be completed or has been aborted',
-            );
-          } else {
-            onFail('request could not be completed or has been aborted');
-          }
+          console.warn('google places autocomplete: ' + responseJSON.status);
         }
       };
 
       if (isNewPlacesAPI) {
-        request.open(
+        detailsRequest.open(
           'GET',
           `${url}/v1/places/${rowData.place_id}?` +
-            Qs.stringify({
-              key: query.key,
-              sessionToken,
-              fields,
-            }),
+            stringify({ key: query.key, sessionToken, fields }),
         );
-        setSessionToken(uuid.v4());
+        setSessionToken(uuidv4());
       } else {
-        request.open(
+        detailsRequest.open(
           'GET',
           `${url}/place/details/json?` +
-            Qs.stringify({
+            stringify({
               key: query.key,
               placeid: rowData.place_id,
               language: query.language,
@@ -750,465 +720,351 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
         );
       }
 
-      request.withCredentials = requestShouldUseWithCredentials();
-      setRequestHeaders(request, getRequestHeaders(props.requestUrl));
+      detailsRequest.withCredentials = withCredentials;
+      setRequestHeaders(detailsRequest, requestHeaders);
+      detailsRequest.send();
+    },
+    [
+      hideListView,
+      abortSearchRequests,
+      abortDetailsRequest,
+      trackDetailsRequest,
+      disableRowLoaders,
+      reportFailure,
+      handleBlur,
+      renderRowDescription,
+      onPressProp,
+      onNotFound,
+      autoFillOnNotFound,
+      isNewPlacesAPI,
+      url,
+      query.key,
+      query.language,
+      sessionToken,
+      fields,
+      GooglePlacesDetailsQuery,
+      withCredentials,
+      requestHeaders,
+    ],
+  );
 
-      request.send();
-    } else if (rowData.isCurrentLocation === true) {
-      hideListView(true);
-      // display loader
-      _enableRowLoader(rowData);
+  const handleRowPress = useCallback(
+    (rowData) => {
+      // Selecting a row ends the search. The keystroke that armed this timer is
+      // already answered by the row the user just tapped, so firing it would
+      // only bill another autocomplete call and repaint a dismissed list. A
+      // search already on the wire would do the same through showResults(),
+      // so it goes too.
+      debouncedRequest.cancel();
+      abortSearchRequests();
+      selectionMadeRef.current = true;
+      selectedTextRef.current = renderRowDescription(rowData);
+
+      if (rowData.isCurrentLocation === true) {
+        // Current location is not a terminal choice when it feeds a nearby
+        // search: those results are meant to open the list again.
+        selectionMadeRef.current = false;
+        hideListView(true);
+        setLoadingRowKey(getRowKey(rowData));
+        setStateText(renderRowDescription(rowData));
+        getCurrentLocation();
+        return;
+      }
 
-      setStateText(_renderDescription(rowData));
+      if (rowData.isPredefinedPlace !== true && fetchDetails === true) {
+        if (loadingRowKeyRef.current === getRowKey(rowData)) {
+          return; // already requesting
+        }
+        fetchPlaceDetails(rowData);
+        return;
+      }
 
-      delete rowData.isLoading;
-      getCurrentLocation();
-    } else {
       hideListView(true);
-      setStateText(_renderDescription(rowData));
-
-      _onBlur();
-      delete rowData.isLoading;
-      const predefinedPlace = _getPredefinedPlace(rowData);
+      setStateText(renderRowDescription(rowData));
+      handleBlur();
 
-      // sending predefinedPlace as details for predefined places
-      onPress(predefinedPlace, predefinedPlace);
-    }
-  };
-
-  const _onChangeText = (text) => {
-    setListWasDismissed(false);
-    setStateText(text);
-    debounceData(text);
-  };
+      // Predefined places are handed back as their own details payload.
+      const predefinedPlace = getPredefinedPlace(rowData);
+      onPressProp(predefinedPlace, predefinedPlace);
+    },
+    [
+      debouncedRequest,
+      abortSearchRequests,
+      hideListView,
+      renderRowDescription,
+      getCurrentLocation,
+      fetchDetails,
+      fetchPlaceDetails,
+      handleBlur,
+      getPredefinedPlace,
+      onPressProp,
+    ],
+  );
 
-  const _handleChangeText = (text) => {
-    _onChangeText(text);
+  const handleChangeText = useCallback(
+    (text) => {
+      // The platform writes the chosen description into the input and echoes
+      // it straight back here. That is our own value returning, not the user
+      // editing, so it must not re-open the list or start another search.
+      if (selectionMadeRef.current && text === selectedTextRef.current) {
+        textInputProps?.onChangeText?.(text);
+        return;
+      }
 
-    const onChangeText = textInputProps?.onChangeText;
+      // Editing the text supersedes whatever was selected before.
+      selectionMadeRef.current = false;
+      selectedTextRef.current = null;
+      setListWasDismissed(false);
+      setStateText(text);
+
+      // Text that cannot produce a search clears the results now instead of a
+      // debounce later. Deferring it left the previous predictions on screen —
+      // and un-dismissed the list to show them — until the timer elapsed, so
+      // pressing the clear button flashed the old list back for `debounce` ms.
+      if (!text || text.length < minLength) {
+        debouncedRequest.cancel();
+        request(text);
+      } else {
+        debouncedRequest(text);
+      }
 
-    if (onChangeText) {
-      onChangeText(text);
-    }
-  };
+      textInputProps?.onChangeText?.(text);
+    },
+    [debouncedRequest, request, minLength, textInputProps],
+  );
 
-  const hideListView = useCallback(
-    (force = false) => {
-      if (!keepResultsAfterBlur || force) {
-        setListWasDismissed(true);
-        setListViewDisplayed(false);
+  const handleFocus = useCallback(
+    (event) => {
+      if (!selectionMadeRef.current) {
+        setListWasDismissed(false);
       }
+      textInputProps?.onFocus?.(event);
     },
-    [keepResultsAfterBlur],
+    [textInputProps],
   );
 
-  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 _onBlur = (e) => {
-    if (e && isNewFocusInAutocompleteResultList(e)) return;
-
-    hideListView();
-    inputRef?.current?.blur();
-  };
-
-  const _onFocus = () => {
-    setListWasDismissed(false);
-    setListViewDisplayed(true);
-  };
+  const handleInputBlur = useCallback(
+    (event) => {
+      handleBlur(event);
+      textInputProps?.onBlur?.(event);
+    },
+    [handleBlur, textInputProps],
+  );
 
-  // ==========================================================================
-  // RENDER FUNCTIONS
-  // ==========================================================================
+  // --------------------------------------------------------------------------
+  // Effects
+  // --------------------------------------------------------------------------
 
-  const _renderDescription = (rowData) => {
-    if (props.renderDescription) {
-      return props.renderDescription(rowData);
-    }
-
-    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={[
-            suppressDefaultStyles ? {} : defaultStyles.loader,
-            styles?.loader,
-          ]}
-        >
-          {_getRowLoader()}
-        </View>
+  useEffect(() => {
+    if (Platform.OS === 'web' && !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.',
       );
     }
+  }, [requestUrl]);
 
-    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={
-          isRowScrollable ? { minWidth: '100%' } : { width: '100%' }
-        }
-        scrollEnabled={isRowScrollable}
-        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-        horizontal={true}
-        showsHorizontalScrollIndicator={false}
-        showsVerticalScrollIndicator={false}
-      >
-        <Pressable
-          style={({ hovered, pressed }) => [
-            isRowScrollable ? { minWidth: '100%' } : { width: '100%' },
-            {
-              backgroundColor: pressed
-                ? listUnderlayColor
-                : hovered
-                ? listHoverColor
-                : undefined,
-            },
-          ]}
-          onPress={() => _onPress(rowData)}
-          onBlur={_onBlur}
-        >
-          <View
-            style={[
-              suppressDefaultStyles ? {} : defaultStyles.row,
-              styles?.row,
-              rowData.isPredefinedPlace ? styles?.specialItemRow : {},
-            ]}
-          >
-            {_renderLoader(rowData)}
-            {_renderRowData(rowData, index)}
-          </View>
-        </Pressable>
-      </ScrollView>
-    );
-  };
-
-  const _renderSeparator = (sectionID, rowID) => {
-    if (rowID === dataSource.length - 1) {
-      return null;
-    }
-
-    return (
-      <View
-        key={`${sectionID}-${rowID}`}
-        style={[
-          suppressDefaultStyles ? {} : defaultStyles.separator,
-          styles?.separator,
-        ]}
-      />
-    );
-  };
-
-  const _shouldShowPoweredLogo = () => {
-    if (!enablePoweredByContainer || dataSource.length === 0) {
-      return false;
-    }
-
-    for (let i = 0; i < dataSource.length; i++) {
-      const row = dataSource[i];
-
-      if (!('isCurrentLocation' in row) && !('isPredefinedPlace' in row)) {
-        return true;
-      }
-    }
-
-    return false;
-  };
-
-  const _renderPoweredLogo = () => {
-    if (!_shouldShowPoweredLogo()) {
-      return null;
-    }
-
-    return (
-      <View
-        style={[
-          suppressDefaultStyles ? {} : defaultStyles.row,
-          defaultStyles.poweredContainer,
-          styles?.poweredContainer,
-        ]}
-      >
-        <Image
-          style={[
-            suppressDefaultStyles ? {} : defaultStyles.powered,
-            styles?.powered,
-          ]}
-          resizeMode='contain'
-          source={require('./images/powered_by_google_on_white.png')}
-        />
-      </View>
-    );
-  };
-
-  const _renderLeftButton = () => {
-    if (props.renderLeftButton) {
-      return props.renderLeftButton();
-    }
-    return null;
-  };
-
-  const _renderRightButton = () => {
-    if (props.renderRightButton) {
-      return props.renderRightButton();
-    }
-    return null;
-  };
-
-  const _getFlatList = () => {
-    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}`;
-    };
-
-    // 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() &&
-      dataSource.length > 0 &&
-      (listViewDisplayed === true || (isAutoMode && !listWasDismissed));
-
-    if (shouldShowList) {
-      return (
-        <FlatList
-          nativeID='result-list-id'
-          scrollEnabled={!disableScroll}
-          nestedScrollEnabled={true}
-          keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-          style={[
-            suppressDefaultStyles ? {} : defaultStyles.listView,
-            styles?.listView,
-          ]}
-          data={dataSource}
-          keyExtractor={keyExtractor}
-          extraData={[dataSource, props]}
-          ItemSeparatorComponent={_renderSeparator}
-          renderItem={({ item, index }) => _renderRow(item, index)}
-          ListEmptyComponent={
-            listLoaderDisplayed
-              ? props.listLoaderComponent
-              : stateText.length > minLength && props.listEmptyComponent
-          }
-          ListHeaderComponent={
-            props.renderHeaderComponent &&
-            props.renderHeaderComponent(stateText)
-          }
-          ListFooterComponent={_renderPoweredLogo}
-          {...restProps}
-        />
+  useEffect(() => {
+    if (currentLocation === true && !hasGeolocation) {
+      console.warn(
+        Platform.OS === 'web'
+          ? 'Geolocation is not available. For web, ensure your site is served over HTTPS or localhost to use geolocation features.'
+          : 'Geolocation is not available. For React Native, you may need to install and configure @react-native-community/geolocation or expo-location to enable currentLocation.',
       );
     }
+  }, [currentLocation, hasGeolocation]);
 
-    return null;
-  };
-
-  // ==========================================================================
-  // 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]);
-
+  // Rebuild the rows whenever the predefined-place configuration changes.
   useEffect(() => {
-    return () => {
-      // Cleanup debounced function on unmount
-      if (debounceData.cancel) {
-        debounceData.cancel();
-      }
-    };
-  }, [debounceData]);
+    setDataSource(buildRows(resultsRef.current, stateTextRef.current));
+  }, [buildRows]);
 
-  // Reload search when query changes (using string comparison to avoid object reference issues)
+  // Re-run the current search when the query object changes.
   useEffect(() => {
-    const queryChanged = prevQueryStringRef.current !== queryString;
-
-    if (queryChanged) {
+    if (prevQueryStringRef.current === null) {
       prevQueryStringRef.current = queryString;
-      if (stateText && stateText.length >= minLength) {
-        debounceData(stateText);
-      }
+      return;
+    }
+    if (prevQueryStringRef.current === queryString) {
+      return;
     }
 
-    return () => {
-      _abortRequests();
-    };
-  }, [queryString, debounceData, stateText, minLength, _abortRequests]);
+    prevQueryStringRef.current = queryString;
+    const text = stateTextRef.current;
 
-  // Auto-show list when dataSource has items in 'auto' mode
-  useEffect(() => {
-    if (
-      listViewDisplayedProp === 'auto' &&
-      dataSource.length > 0 &&
-      !listViewDisplayed &&
-      !listWasDismissed
-    ) {
-      setListViewDisplayed(true);
+    if (text && text.length >= minLength) {
+      debouncedRequest(text);
     }
-  }, [
-    dataSource.length,
-    listViewDisplayedProp,
-    listViewDisplayed,
-    listWasDismissed,
-  ]);
+  }, [queryString, minLength, debouncedRequest]);
+
+  // Aborting belongs to the component lifetime, not to every keystroke. It used
+  // to be tangled into the query effect, whose `stateText` dependency meant a
+  // `preProcess` call would abort the very request it had just sent.
+  useEffect(
+    () => () => {
+      debouncedRequest.cancel();
+      abortSearchRequests();
+      abortDetailsRequest();
+    },
+    [debouncedRequest, abortSearchRequests, abortDetailsRequest],
+  );
 
-  // ==========================================================================
-  // IMPERATIVE HANDLE
-  // ==========================================================================
+  // --------------------------------------------------------------------------
+  // Imperative handle
+  // --------------------------------------------------------------------------
 
   useImperativeHandle(
     ref,
     () => ({
-      setAddressText: (address) => {
-        setStateText(address);
-      },
-      getAddressText: () => stateText,
+      setAddressText: (address) => setStateText(address),
+      getAddressText: () => stateTextRef.current,
       blur: () => inputRef.current?.blur(),
       focus: () => inputRef.current?.focus(),
       isFocused: () => inputRef.current?.isFocused(),
       clear: () => inputRef.current?.clear(),
       getCurrentLocation,
     }),
-    [stateText, getCurrentLocation],
+    [getCurrentLocation],
+  );
+
+  // --------------------------------------------------------------------------
+  // Render
+  // --------------------------------------------------------------------------
+
+  const renderItem = useCallback(
+    ({ item, index }) => (
+      <Row
+        rowData={item}
+        index={index}
+        isLoading={loadingRowKey === getRowKey(item)}
+        isRowScrollable={isRowScrollable}
+        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+        listHoverColor={listHoverColor}
+        listUnderlayColor={listUnderlayColor}
+        mergedStyles={mergedStyles}
+        numberOfLines={numberOfLines}
+        onBlur={handleBlur}
+        onPress={handleRowPress}
+        renderDescription={renderRowDescription}
+        renderRow={renderRow}
+      />
+    ),
+    [
+      loadingRowKey,
+      isRowScrollable,
+      keyboardShouldPersistTaps,
+      listHoverColor,
+      listUnderlayColor,
+      mergedStyles,
+      numberOfLines,
+      handleBlur,
+      handleRowPress,
+      renderRowDescription,
+      renderRow,
+    ],
+  );
+
+  const keyExtractor = useCallback(
+    (item, index) => `${getRowKey(item)}:${index}`,
+    [],
+  );
+
+  const Separator = useMemo(
+    () =>
+      function ItemSeparator() {
+        return <View style={mergedStyles.separator} />;
+      },
+    [mergedStyles],
   );
 
-  // ==========================================================================
-  // MAIN RENDER
-  // ==========================================================================
+  const poweredComponent = useMemo(() => {
+    if (!enablePoweredByContainer || !hasApiResults(dataSource)) {
+      return null;
+    }
+
+    return (
+      <View style={mergedStyles.poweredContainer}>
+        <Image
+          style={mergedStyles.powered}
+          resizeMode='contain'
+          source={require('./images/powered_by_google_on_white.png')}
+        />
+      </View>
+    );
+  }, [enablePoweredByContainer, dataSource, mergedStyles]);
+
+  // The list used to be gated on `dataSource.length > 0`, which meant
+  // ListEmptyComponent — and therefore both listEmptyComponent and
+  // listLoaderComponent — could never render.
+  const emptyStateComponent = listLoaderDisplayed
+    ? listLoaderComponent
+    : stateText.length > minLength
+    ? listEmptyComponent
+    : null;
+
+  const isListVisible = isAutoMode
+    ? !listWasDismissed
+    : listViewDisplayedProp === true;
+
+  const shouldShowList =
+    isSupportedPlatform &&
+    isListVisible &&
+    (dataSource.length > 0 || Boolean(emptyStateComponent));
 
   const {
-    onFocus: textInputOnFocus,
-    onBlur: textInputOnBlur,
-    onChangeText: textInputOnChangeText, // destructuring here stops this being set after onChangeText={_handleChangeText}
+    onFocus: _ignoredOnFocus,
+    onBlur: _ignoredOnBlur,
+    onChangeText: _ignoredOnChangeText,
     clearButtonMode,
     InputComp,
-    ...userProps
-  } = textInputProps || {};
+    ...userTextInputProps
+  } = textInputProps || EMPTY_OBJECT;
+
   const TextInputComp = InputComp || TextInput;
 
   return (
-    <View
-      style={[
-        suppressDefaultStyles ? {} : defaultStyles.container,
-        styles?.container,
-      ]}
-      pointerEvents='box-none'
-    >
+    <View style={mergedStyles.container} pointerEvents='box-none'>
       {!textInputHide && (
-        <View
-          style={[
-            suppressDefaultStyles ? {} : defaultStyles.textInputContainer,
-            styles?.textInputContainer,
-          ]}
-        >
-          {_renderLeftButton()}
+        <View style={mergedStyles.textInputContainer}>
+          {renderLeftButton ? renderLeftButton() : null}
           <TextInputComp
             ref={inputRef}
-            style={[
-              suppressDefaultStyles ? {} : defaultStyles.textInput,
-              styles?.textInput,
-            ]}
+            style={mergedStyles.textInput}
             value={stateText}
             placeholder={placeholder}
-            onFocus={
-              textInputOnFocus
-                ? (e) => {
-                    _onFocus();
-                    textInputOnFocus(e);
-                  }
-                : _onFocus
-            }
-            onBlur={
-              textInputOnBlur
-                ? (e) => {
-                    _onBlur(e);
-                    textInputOnBlur(e);
-                  }
-                : _onBlur
-            }
+            onFocus={handleFocus}
+            onBlur={handleInputBlur}
             clearButtonMode={clearButtonMode || 'while-editing'}
-            onChangeText={_handleChangeText}
-            {...userProps}
+            onChangeText={handleChangeText}
+            {...userTextInputProps}
           />
-          {_renderRightButton()}
+          {renderRightButton ? renderRightButton() : null}
         </View>
       )}
-      {props.inbetweenCompo}
-      {_getFlatList()}
-      {props.children}
+
+      {inbetweenCompo}
+
+      {shouldShowList ? (
+        <FlatList
+          nativeID='result-list-id'
+          scrollEnabled={!disableScroll}
+          nestedScrollEnabled={true}
+          keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+          style={mergedStyles.listView}
+          data={dataSource}
+          extraData={loadingRowKey}
+          keyExtractor={keyExtractor}
+          ItemSeparatorComponent={Separator}
+          renderItem={renderItem}
+          ListEmptyComponent={emptyStateComponent}
+          ListHeaderComponent={
+            renderHeaderComponent ? renderHeaderComponent(stateText) : null
+          }
+          ListFooterComponent={poweredComponent}
+          {...restProps}
+        />
+      ) : null}
+
+      {children}
     </View>
   );
 });