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

package/package.json

@@ -1,13 +1,26 @@
 {
   "name": "react-native-google-places-autocomplete",
-  "version": "2.6.3",
+  "version": "2.6.5",
   "description": "Customizable Google Places autocomplete component for iOS and Android React-Native apps",
   "main": "GooglePlacesAutocomplete.js",
   "types": "GooglePlacesAutocomplete.d.ts",
+  "sideEffects": false,
+  "files": [
+    "GooglePlacesAutocomplete.js",
+    "GooglePlacesAutocomplete.d.ts",
+    "src/",
+    "images/",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "lint": "eslint . && prettier --write .",
     "release": "npx release-it",
-    "prettier": "prettier --write ."
+    "prettier": "prettier --write .",
+    "prepare": "husky install",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "typecheck": "tsc --noEmit"
   },
   "author": "Farid from Safi",
   "license": "MIT",
@@ -28,29 +41,39 @@
     "url": "https://github.com/FaridSafi/react-native-google-places-autocomplete/issues"
   },
   "homepage": "https://github.com/FaridSafi/react-native-google-places-autocomplete#readme",
-  "dependencies": {
-    "lodash.debounce": "^4.0.8",
-    "qs": "~6.9.1",
-    "react-native-uuid": "^2.0.3"
-  },
   "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.0",
     "@react-native-community/eslint-config": "2.0.0",
+    "@react-native/babel-preset": "0.86.3",
+    "@react-native/jest-preset": "0.86.3",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/react": "^19.2.0",
+    "babel-jest": "^29.7.0",
     "eslint": "7.10.0",
     "eslint-plugin-prettier": "^3.1.2",
-    "husky": "4.3.0",
+    "husky": "^8.0.3",
+    "jest": "^29.7.0",
     "lint-staged": "10.4.0",
     "prettier": "2.1.2",
-    "typescript": "^3.8.3"
+    "qs": "^6.14.1",
+    "react": "19.2.3",
+    "react-native": "0.86.3",
+    "react-test-renderer": "19.2.3",
+    "typescript": "^5.6.0"
   },
   "peerDependencies": {
+    "react": ">=16.8.0",
     "react-native": ">= 0.59"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
-    "*/**": "yarn lint"
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md,yml,yaml}": [
+      "prettier --write"
+    ]
   }
 }

package/src/Row.js

@@ -0,0 +1,107 @@
+import React, { memo, useCallback } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+} from 'react-native';
+
+import { defaultStyles } from './styles';
+
+const Loader = () => <ActivityIndicator animating={true} size='small' />;
+
+/**
+ * A single suggestion row.
+ *
+ * Memoised, and — unlike the previous implementation — it only mounts a
+ * horizontal ScrollView when `isRowScrollable` is actually on. A native scroll
+ * view per row is expensive, and the list renders one per suggestion.
+ */
+const Row = memo(function Row({
+  rowData,
+  index,
+  isLoading,
+  isRowScrollable,
+  keyboardShouldPersistTaps,
+  listHoverColor,
+  listUnderlayColor,
+  mergedStyles,
+  numberOfLines,
+  onBlur,
+  onPress,
+  renderDescription,
+  renderRow,
+  suppressDefaultStyles,
+}) {
+  const handlePress = useCallback(() => onPress(rowData), [onPress, rowData]);
+
+  const widthStyle = isRowScrollable
+    ? defaultStyles.minFullWidth
+    : defaultStyles.fullWidth;
+
+  const pressableStyle = useCallback(
+    ({ hovered, pressed }) => [
+      widthStyle,
+      {
+        backgroundColor: pressed
+          ? listUnderlayColor
+          : hovered
+          ? listHoverColor
+          : undefined,
+      },
+    ],
+    [widthStyle, listUnderlayColor, listHoverColor],
+  );
+
+  const content = (
+    <Pressable style={pressableStyle} onPress={handlePress} onBlur={onBlur}>
+      <View
+        style={
+          rowData.isPredefinedPlace
+            ? mergedStyles.specialItemRow
+            : mergedStyles.row
+        }
+      >
+        {isLoading ? (
+          <View style={mergedStyles.loader}>
+            <Loader />
+          </View>
+        ) : null}
+        {renderRow ? (
+          renderRow(rowData, index)
+        ) : (
+          <Text
+            style={
+              rowData.isPredefinedPlace
+                ? mergedStyles.predefinedPlacesDescription
+                : mergedStyles.description
+            }
+            numberOfLines={numberOfLines}
+          >
+            {renderDescription(rowData)}
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  );
+
+  if (!isRowScrollable) {
+    return content;
+  }
+
+  return (
+    <ScrollView
+      contentContainerStyle={defaultStyles.minFullWidth}
+      scrollEnabled={true}
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+      horizontal={true}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+    >
+      {content}
+    </ScrollView>
+  );
+});
+
+export default Row;

package/src/debounce.js

@@ -0,0 +1,31 @@
+/**
+ * Trailing-edge debounce, replacing `lodash.debounce`.
+ *
+ * A wait of 0 still defers to the next tick, matching lodash's behaviour and
+ * the existing default of `debounce={0}`.
+ */
+export const debounce = (fn, wait = 0) => {
+  let timeoutId = null;
+
+  const debounced = function (...args) {
+    const context = this;
+
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      fn.apply(context, args);
+    }, wait);
+  };
+
+  debounced.cancel = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+
+  return debounced;
+};

package/src/queryString.js

@@ -0,0 +1,49 @@
+/**
+ * Drop-in replacement for the subset of `qs.stringify` this library uses.
+ *
+ * Matches `qs` defaults exactly: RFC3986 percent-encoding, `undefined` values
+ * omitted, `null` serialised as a bare `key=`, arrays in `indices` format
+ * (`a[0]=x`) and nested objects in bracket format (`a[b]=x`).
+ */
+
+// encodeURIComponent leaves !'()* alone; RFC3986 (and therefore qs) does not.
+const encode = (value) =>
+  encodeURIComponent(String(value)).replace(
+    /[!'()*]/g,
+    (char) => '%' + char.charCodeAt(0).toString(16).toUpperCase(),
+  );
+
+const append = (parts, key, value) => {
+  if (value === undefined) {
+    return;
+  }
+
+  if (value === null) {
+    parts.push(`${encode(key)}=`);
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => append(parts, `${key}[${index}]`, item));
+    return;
+  }
+
+  if (typeof value === 'object') {
+    Object.keys(value).forEach((nestedKey) =>
+      append(parts, `${key}[${nestedKey}]`, value[nestedKey]),
+    );
+    return;
+  }
+
+  parts.push(`${encode(key)}=${encode(value)}`);
+};
+
+export const stringify = (params) => {
+  if (!params) {
+    return '';
+  }
+
+  const parts = [];
+  Object.keys(params).forEach((key) => append(parts, key, params[key]));
+  return parts.join('&');
+};

package/src/results.js

@@ -0,0 +1,105 @@
+/**
+ * Pure helpers for turning API responses into the rows the list renders.
+ * Kept free of React so they can be unit-tested directly.
+ */
+
+/**
+ * Keep only the results carrying at least one of the requested types.
+ *
+ * Previously written as `types?.indexOf(t) !== -1`, which evaluated to
+ * `undefined !== -1` — i.e. `true` — for results with no `types` field, so
+ * untyped results slipped through the filter.
+ */
+export const filterResultsByTypes = (unfilteredResults, types) => {
+  if (!types || types.length === 0) {
+    return unfilteredResults;
+  }
+
+  return unfilteredResults.filter(
+    (result) =>
+      Array.isArray(result.types) &&
+      result.types.some((type) => types.indexOf(type) !== -1),
+  );
+};
+
+/** Map new (v1) Places API suggestions onto the legacy prediction shape. */
+export const filterResultsByPlacePredictions = (unfilteredResults) => {
+  const results = [];
+
+  for (let i = 0; i < unfilteredResults.length; i++) {
+    const { placePrediction } = unfilteredResults[i];
+
+    if (!placePrediction) {
+      continue;
+    }
+
+    results.push({
+      description: placePrediction.text?.text,
+      place_id: placePrediction.placeId,
+      reference: placePrediction.placeId,
+      structured_formatting: {
+        main_text: placePrediction.structuredFormat?.mainText?.text,
+        secondary_text: placePrediction.structuredFormat?.secondaryText?.text,
+      },
+      types: placePrediction.types ?? [],
+    });
+  }
+
+  return results;
+};
+
+/**
+ * Compose the rendered rows: predefined places (and optionally a "current
+ * location" entry) followed by the API results.
+ *
+ * Returns the `results` array untouched when there is nothing to prepend, so
+ * FlatList identity checks stay meaningful.
+ */
+export const buildRowsFromResults = (results, text, options) => {
+  const {
+    predefinedPlaces = [],
+    predefinedPlacesAlwaysVisible = false,
+    currentLocation = false,
+    currentLocationLabel = 'Current location',
+  } = options;
+
+  const shouldDisplayPredefinedPlaces =
+    predefinedPlacesAlwaysVisible === true ||
+    ((!text || text.length === 0) && results.length === 0);
+
+  if (!shouldDisplayPredefinedPlaces) {
+    return results;
+  }
+
+  const rows = predefinedPlaces
+    .filter((place) => place?.description?.length)
+    .map((place) => ({ ...place, isPredefinedPlace: true }));
+
+  if (currentLocation === true) {
+    rows.unshift({
+      description: currentLocationLabel,
+      isCurrentLocation: true,
+      isPredefinedPlace: true,
+    });
+  }
+
+  if (rows.length === 0) {
+    return results;
+  }
+
+  return [...rows, ...results];
+};
+
+/** Stable identity for a row, used as the FlatList key and loader target. */
+export const getRowKey = (row) => {
+  if (row.isCurrentLocation === true) {
+    return 'current-location';
+  }
+  if (row.place_id) {
+    return `place:${row.place_id}`;
+  }
+  if (row.isPredefinedPlace && row.description) {
+    return `predefined:${row.description}`;
+  }
+  return `row:${row.description ?? ''}`;
+};

package/src/styles.js

@@ -0,0 +1,92 @@
+import { StyleSheet } from 'react-native';
+
+export const defaultStyles = StyleSheet.create({
+  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: {},
+  fullWidth: {
+    width: '100%',
+  },
+  minFullWidth: {
+    minWidth: '100%',
+  },
+});
+
+const EMPTY = {};
+
+/**
+ * Merge a default style with the consumer override once per style key, so the
+ * render path stops allocating a fresh array for every element on every frame.
+ */
+export const mergeStyles = (styles, suppressDefaultStyles) => {
+  const userStyles = styles || EMPTY;
+  const base = (key) =>
+    suppressDefaultStyles ? undefined : defaultStyles[key];
+
+  return {
+    container: [base('container'), userStyles.container],
+    textInputContainer: [
+      base('textInputContainer'),
+      userStyles.textInputContainer,
+    ],
+    textInput: [base('textInput'), userStyles.textInput],
+    listView: [base('listView'), userStyles.listView],
+    row: [base('row'), userStyles.row],
+    specialItemRow: [base('row'), userStyles.row, userStyles.specialItemRow],
+    loader: [base('loader'), userStyles.loader],
+    description: [base('description'), userStyles.description],
+    predefinedPlacesDescription: [
+      base('description'),
+      userStyles.description,
+      userStyles.predefinedPlacesDescription,
+    ],
+    separator: [base('separator'), userStyles.separator],
+    poweredContainer: [
+      base('row'),
+      defaultStyles.poweredContainer,
+      userStyles.poweredContainer,
+    ],
+    powered: [base('powered'), userStyles.powered],
+  };
+};

package/src/uuid.js

@@ -0,0 +1,60 @@
+/**
+ * RFC4122 version 4 UUID generator.
+ *
+ * Replaces `react-native-uuid` (448 KB installed) for the one thing this
+ * library needs it for: Places API session tokens.
+ */
+
+const BYTE_TO_HEX = [];
+for (let i = 0; i < 256; i++) {
+  BYTE_TO_HEX.push((i + 0x100).toString(16).slice(1));
+}
+
+const randomBytes = (length) => {
+  const bytes = new Uint8Array(length);
+
+  // Available on web, and on Hermes/JSC in recent React Native versions.
+  const cryptoObj =
+    typeof globalThis !== 'undefined' ? globalThis.crypto : undefined;
+
+  if (cryptoObj && typeof cryptoObj.getRandomValues === 'function') {
+    cryptoObj.getRandomValues(bytes);
+    return bytes;
+  }
+
+  for (let i = 0; i < length; i++) {
+    bytes[i] = (Math.random() * 256) | 0;
+  }
+  return bytes;
+};
+
+export const uuidv4 = () => {
+  const bytes = randomBytes(16);
+
+  bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4
+  bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10xx
+
+  const hex = BYTE_TO_HEX;
+  return (
+    hex[bytes[0]] +
+    hex[bytes[1]] +
+    hex[bytes[2]] +
+    hex[bytes[3]] +
+    '-' +
+    hex[bytes[4]] +
+    hex[bytes[5]] +
+    '-' +
+    hex[bytes[6]] +
+    hex[bytes[7]] +
+    '-' +
+    hex[bytes[8]] +
+    hex[bytes[9]] +
+    '-' +
+    hex[bytes[10]] +
+    hex[bytes[11]] +
+    hex[bytes[12]] +
+    hex[bytes[13]] +
+    hex[bytes[14]] +
+    hex[bytes[15]]
+  );
+};