[Snyk] Security upgrade react-native-google-places-autocomplete from 2.5.6 to 2.6.4 - #82233
[Snyk] Security upgrade react-native-google-places-autocomplete from 2.5.6 to 2.6.4#82233MelvinBot wants to merge 28 commits into
Conversation
The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-JS-QS-15268416
|
@MarioExpensify Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
The Snyk auto-fix PR updated package.json to use react-native-google-places-autocomplete@2.6.4 but did not regenerate package-lock.json, causing npm ci to fail in all CI checks.
|
Fixed the failing checks. All CI failures (TypeScript, ESLint, Prettier, Translation Dry Run, Spellcheck, etc.) had the same root cause: The Snyk auto-fix updated
I regenerated |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8e95219764
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| "react-native-gesture-handler": "2.28.0", | ||
| "react-native-get-random-values": "^1.11.0", | ||
| "react-native-google-places-autocomplete": "2.5.6", | ||
| "react-native-google-places-autocomplete": "2.6.4", |
There was a problem hiding this comment.
This change bumps react-native-google-places-autocomplete in package.json but leaves package-lock.json pinned to 2.5.6 (package-lock.json:112), so the upgrade is not actually reproducible. In this repo, CI setup runs npm ci (.github/actions/composite/setupNode/action.yml:56), and npm ci requires the manifest and lockfile to be in sync (it errors: npm ci can only install packages when your package.json and package-lock.json ... are in sync), which can break installs on cache misses; on cache hits, the cache key is derived from package-lock.json (action.yml:35), so workers can keep reusing node_modules with the old vulnerable version.
Useful? React with 👍 / 👎.
|
If this requires C+ testing, I can help |
The patch was created for v2.5.6 to add React 19 support by removing defaultProps and forwardRef usage. Version 2.6.4 already removes defaultProps and uses destructured defaults, making this patch unnecessary and incompatible with the new version.
|
Fixed the failing checks by removing the obsolete Root cause: The Snyk upgrade from v2.5.6 to v2.6.4 broke Why the patch is no longer needed: The patch added React 19 compatibility by removing What was removed:
|
|
The failing checks on the previous commit ( The latest commit ( No further code changes should be needed. |
…ete v2.6.4 The upgraded react-native-google-places-autocomplete package changed the Point interface to require both lat/lng and latitude/longitude properties. Updated recentWaypointsSelector to provide all four.
|
Fixed the failing Root cause: The upgrade of Fix: Added |
|
The failing checks have already been fixed in the latest commit (
The current CI run shows all completed checks passing (typecheck ✅, ESLint ✅, Prettier ✅, spellcheck ✅, validate-patches ✅, Storybook ✅, builds ✅). Tests and remaining builds are still in progress. |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
| @@ -48,6 +48,8 @@ function recentWaypointsSelector(waypoints: RecentWaypoint[] = []) { | |||
| location: { | |||
| lat: waypoint.lat ?? 0, | |||
There was a problem hiding this comment.
@MelvinBot do we still need the old lat/lng parameters? Or just the new latitude/longitude?
|
Both are needed. The interface Point {
lat: number;
lng: number;
latitude: number;
longitude: number;
}Since TypeScript enforces this, omitting either pair would cause a type error. The PR correctly provides all four ( The rest of the codebase (e.g., |
|
The failing check is Analysis: This check requires a reviewer to post a comment containing the Reviewer Checklist (from Evidence: All other checks pass (ESLint, typecheck, Prettier, tests, builds, verifySignedCommits, etc.). The failure is purely a process check, not a code issue. Resolution: A reviewer needs to post the Reviewer Checklist as a PR comment with all items checked off. This will cause the |
|
@situchan yes, please test, review and fill in the checklist. Thank you! |
| latitude: waypoint.lat ?? 0, | ||
| longitude: waypoint.lng ?? 0, |
There was a problem hiding this comment.
This is to fix lint error. These props were added in this upstream PR. Not used anywhere in our app.
Old lat/lng parameters are still needed.
There was a problem hiding this comment.
I investigated the full GooglePlacesAutocomplete.js source (v2.6.4) for all forward-reference / TDZ issues.
True TDZ violations (cause runtime ReferenceError): There are exactly 3, and the existing patch already fixes all of them:
| Variable | Referenced at | Declared at | Why it crashes | Patch fix |
|---|---|---|---|---|
_request |
Line 161 | Line 466 | useRef(_request) evaluates immediately |
Changed to useRef(null) |
_disableRowLoaders |
Line 450 (dep array) | Line 653 | useCallback dep arrays evaluate immediately |
Moved declaration to ~line 348 |
_disableRowLoaders |
Line 629 (dep array) | Line 653 | Same as above | Same move fixes both |
_renderDescription and getCurrentLocation are NOT true TDZ violations. They are "soft" forward references — referenced only inside function bodies (like _onPress) that execute lazily from event handlers, not during render. By the time a user taps a row and _onPress fires, the entire component body has already executed and all const declarations are initialized.
Full list of soft forward references (safe, no runtime errors):
| Referenced variable | Referenced inside | Ref lines | Declared at |
|---|---|---|---|
_renderDescription |
_onPress body |
696, 704, 762, 768 | 837 |
hideListView |
_onPress body |
670, 758, 767 | 795 |
_onBlur |
_onPress body |
694, 770 | 821 |
debounceData |
_onChangeText body |
782 | 1082 |
These 4 cases reference later-declared const functions, but only inside callback bodies that never run during render — they only run when triggered by user interaction or effects, at which point all declarations are initialized.
Bottom line: The current patch already covers all runtime TDZ crashes. The soft forward references are standard JavaScript and don't need reordering for correctness. That said, if you'd prefer to reorder them for code clarity/consistency, I can do that — just let me know.
There was a problem hiding this comment.
if you'd prefer to reorder them for code clarity/consistency, I can do that — just let me know.
Please do that
There was a problem hiding this comment.
Done. Updated the patch to reorder all forward-referenced declarations so they are declared before use:
Moved before _onPress:
_renderDescription(was in RENDER FUNCTIONS section)hideListView(was after_handleChangeText)isNewFocusInAutocompleteResultList(was afterhideListView)_onBlur(was afterisNewFocusInAutocompleteResultList)_onFocus(was after_onBlur)
Moved before _onChangeText:
debounceData(was in the EFFECTS section)
Commit: 4029453
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppiOS: mWeb SafariMacOS: Chrome / Safari |
|
I acknowledge the previous root cause analysis was incorrect. The Revised Root Cause AnalysisWhy the Pressable → TouchableHighlight swap doesn't helpIn React Native 0.81.4, What's actually happeningThe issue is the cascade triggered by
Meanwhile, the XHR for place details was sent (line 815), but the component tree is being disrupted by all these state changes. The XHR success handler (line 745-758) calls The critical question is whether v2.5.6 vs v2.6.4 — what changedIn v2.5.6:
In v2.6.4:
What I'd recommend investigating nextSince I cannot run the app on a physical iOS device to confirm, I'm unable to determine with certainty which of these two scenarios is occurring: Scenario A — Scenario B — To determine which scenario it is, adding Possible fixes to try
Given the complexity of this interaction and the number of iterations this has gone through, it may be worth considering whether this Snyk upgrade (2.5.6 → 2.6.4) provides enough security value to justify the behavioral regressions, or if pinning at 2.5.6 with the existing React 19 patch is the safer path. |
|
I spent significant time struggling with Melvin and he keeps generating buggy code which causes regressions. |
|
@situchan is there an issue for this? |
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
|
@MelvinBot revert all the changes, pull main and apply below: Detailsdiff --git a/package-lock.json b/package-lock.json
index ab0da81d56b..a769eabaf7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -114,7 +114,7 @@
"react-native-draggable-flatlist": "^4.0.3",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "2.32.0",
- "react-native-google-places-autocomplete": "2.5.6",
+ "react-native-google-places-autocomplete": "2.6.4",
"react-native-haptic-feedback": "^2.3.3",
"react-native-image-picker": "^7.1.2",
"react-native-image-size": "git+[https://github.com/Expensify/react-native-image-size#8a1c3b7359977462cdd4e63b09ea45afbd3d77c7",](https://github.com/Expensify/react-native-image-size#8a1c3b7359977462cdd4e63b09ea45afbd3d77c7%22,)
@@ -35870,20 +35870,28 @@
}
},
"node_modules/react-native-google-places-autocomplete": {
- "version": "2.5.6",
+ "version": "2.6.4",
+ "resolved": "[https://registry.npmjs.org/react-native-google-places-autocomplete/-/react-native-google-places-autocomplete-2.6.4.tgz",](https://registry.npmjs.org/react-native-google-places-autocomplete/-/react-native-google-places-autocomplete-2.6.4.tgz%22,)
+ "integrity": "sha512-/DjXEa20doSJYiykqLbTAPL3GtIHVRdjpAoPpxnLXK6uFi103wdqXZoqXnKdqlov/lJLIO8Wex6GIu6MZz3Osw==",
"license": "MIT",
"dependencies": {
"lodash.debounce": "^4.0.8",
- "prop-types": "^15.7.2",
- "qs": "~6.9.1"
+ "qs": "^6.14.1",
+ "react-native-uuid": "^2.0.3"
},
"peerDependencies": {
"react-native": ">= 0.59"
}
},
"node_modules/react-native-google-places-autocomplete/node_modules/qs": {
- "version": "6.9.7",
+ "version": "6.15.3",
+ "resolved": "[https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",](https://registry.npmjs.org/qs/-/qs-6.15.3.tgz%22,)
+ "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==",
"license": "BSD-3-Clause",
+ "dependencies": {
+ "es-define-property": "^1.0.1",
+ "side-channel": "^1.1.1"
+ },
"engines": {
"node": ">=0.6"
},
@@ -35891,6 +35899,41 @@
"url": "[https://github.com/sponsors/ljharb"](https://github.com/sponsors/ljharb%22)
}
},
+ "node_modules/react-native-google-places-autocomplete/node_modules/side-channel": {
+ "version": "1.1.1",
+ "resolved": "[https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",](https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz%22,)
+ "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "object-inspect": "^1.13.4",
+ "side-channel-list": "^1.0.1",
+ "side-channel-map": "^1.0.1",
+ "side-channel-weakmap": "^1.0.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "[https://github.com/sponsors/ljharb"](https://github.com/sponsors/ljharb%22)
+ }
+ },
+ "node_modules/react-native-google-places-autocomplete/node_modules/side-channel-list": {
+ "version": "1.0.1",
+ "resolved": "[https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",](https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz%22,)
+ "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "object-inspect": "^1.13.4"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "[https://github.com/sponsors/ljharb"](https://github.com/sponsors/ljharb%22)
+ }
+ },
"node_modules/react-native-haptic-feedback": {
"version": "2.3.3",
"license": "MIT",
@@ -36582,6 +36625,16 @@
"react-native": "*"
}
},
+ "node_modules/react-native-uuid": {
+ "version": "2.0.4",
+ "resolved": "[https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-2.0.4.tgz",](https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-2.0.4.tgz%22,)
+ "integrity": "sha512-LSJNeh559qC17fgVPBsWuTSW/OygFp2dwTcf94IQBLYft5FzIQS9pCsuT36OPvyvDOMb6yiGr6TafaJDnz9PPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=18.0.0",
+ "npm": ">=9.0.0"
+ }
+ },
"node_modules/react-native-view-shot": {
"version": "5.1.0",
"resolved": "[https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-5.1.0.tgz",](https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-5.1.0.tgz%22,)
diff --git a/package.json b/package.json
index 1c4101cd6c0..569485a0ffa 100644
--- a/package.json
+++ b/package.json
@@ -188,7 +188,7 @@
"react-native-draggable-flatlist": "^4.0.3",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "2.32.0",
- "react-native-google-places-autocomplete": "2.5.6",
+ "react-native-google-places-autocomplete": "2.6.4",
"react-native-haptic-feedback": "^2.3.3",
"react-native-image-picker": "^7.1.2",
"react-native-image-size": "git+[https://github.com/Expensify/react-native-image-size#8a1c3b7359977462cdd4e63b09ea45afbd3d77c7",](https://github.com/Expensify/react-native-image-size#8a1c3b7359977462cdd4e63b09ea45afbd3d77c7%22,)
diff --git a/patches/react-native-google-places-autocomplete/details.md b/patches/react-native-google-places-autocomplete/details.md
index e495f093035..84f3cab4f0b 100644
--- a/patches/react-native-google-places-autocomplete/details.md
+++ b/patches/react-native-google-places-autocomplete/details.md
@@ -1,18 +1,6 @@
# `react-native-google-places-autocomplete` patches
-### [react-native-google-places-autocomplete+2.5.6+001+react-19-support.patch](react-native-google-places-autocomplete+2.5.6+001+react-19-support.patch)
-
-- Reason:
-
- ```
- This patch supports for React 19 by removing propTypes.
- ```
-
-- Upstream PR/issue: https://github.com/FaridSafi/react-native-google-places-autocomplete/pull/970
-- E/App issue: https://github.com/Expensify/App/issues/57511
-- PR introducing patch: https://github.com/Expensify/App/pull/60421
-
-### [react-native-google-places-autocomplete+2.5.6+002+keyboard-navigation.patch](react-native-google-places-autocomplete+2.5.6+002+keyboard-navigation.patch)
+### [react-native-google-places-autocomplete+2.6.4+001+keyboard-navigation.patch](react-native-google-places-autocomplete+2.6.4+001+keyboard-navigation.patch)
- Reason:
@@ -31,4 +19,92 @@
via onKeyDown to also prevent page scroll.
```
-- E/App issue: https://github.com/Expensify/App/issues/79621
\ No newline at end of file
+- E/App issue: https://github.com/Expensify/App/issues/79621
+
+### [react-native-google-places-autocomplete+2.6.4+002+fix-tdz-crash-on-render.patch](react-native-google-places-autocomplete+2.6.4+002+fix-tdz-crash-on-render.patch)
+
+- Reason:
+
+ ```
+ Upstream 2.6.4 crashes on the component's very first render with
+ "ReferenceError: Cannot access '_request' before initialization".
+ The 2.6.x rewrite introduced two temporal dead zone (TDZ) bugs where
+ component-scope `const`s are read during render before they are
+ declared:
+
+ 1. `const requestRef = useRef(_request)` reads `_request`, which is
+ declared ~300 lines later. Fixed by initializing the ref to `null`;
+ the component already assigns `requestRef.current = _request` on
+ every render, and the ref is only ever read from inside the
+ debounced callback, which cannot fire before that assignment.
+ 2. `_disableRowLoaders` (a `useCallback`) appears in the dependency
+ arrays of two earlier hooks. Dependency arrays are evaluated during
+ render, so both reads hit the TDZ. Fixed by moving the
+ `_disableRowLoaders` declaration above its first use; it only
+ depends on `buildRowsFromResults`, which is declared earlier still,
+ so the move is behavior-preserving.
+
+ Note: Jest cannot reproduce this crash because Babel transpiles
+ `const` to `var` in the test environment, which erases TDZ semantics.
+ It reproduces under Hermes and in browsers, where `const` is native.
+ ```
+
+- Upstream issue: not yet reported at the time of writing (2.6.4 is the latest release).
+
+### [react-native-google-places-autocomplete+2.6.4+003+restore-list-loading-state.patch](react-native-google-places-autocomplete+2.6.4+003+restore-list-loading-state.patch)
+
+- Reason:
+
+ ```
+ Upstream 2.6.4 gates the whole result list on `dataSource.length > 0`, but the
+ loader and the "no results" state are rendered through the FlatList's
+ ListEmptyComponent, which by definition only renders when the list IS empty.
+ Those two conditions are mutually exclusive, so both `listLoaderComponent` and
+ `listEmptyComponent` became unreachable dead props in 2.6.x.
+
+ AddressSearch passes both, so upgrading from 2.5.6 silently dropped the address
+ search spinner and the "no results found" message.
+
+ This patch restores the 2.5.6 behavior by also rendering the list when there is
+ an empty state to show. The `stateText.length > minLength` guard mirrors 2.5.6's
+ `stateText !== ''` gate; it matters because `_request` clears results without
+ resetting `listLoaderDisplayed`, so without it an aborted in-flight request
+ could leave a spinner on screen after the input is cleared.
+
+ Resulting behavior (matches 2.5.6 / production):
+ - loader shows only while searching AND there are no previous results
+ - previous results stay visible, with no loader, while the next search runs
+ - the empty state shows when a search comes back with nothing
+
+ Covered by tests/unit/AddressSearchListTest.tsx.
+ ```
+
+- Upstream issue: not yet reported at the time of writing (2.6.4 is the latest release).
+
+### [react-native-google-places-autocomplete+2.6.4+004+restore-predefined-places-updates.patch](react-native-google-places-autocomplete+2.6.4+004+restore-predefined-places-updates.patch)
+
+- Reason:
+
+ ```
+ In 2.5.6 the effect that rebuilds the list from `predefinedPlaces` depended on
+ `props.predefinedPlaces`, so the list reacted to that prop changing. In 2.6.4 the
+ same effect became mount-only (`}, []`), so predefined places that arrive or are
+ filtered out after mount never reach the list.
+
+ AddressSearch passes `filteredPredefinedPlaces` (recent destinations, filtered by
+ the search text and hidden once the user starts typing), so on 2.6.4 the recent
+ destinations went stale: they never updated, and stale rows kept the list
+ non-empty, which also suppressed the loader added in patch 003.
+
+ Restoring the dependency requires a second change. 2.5.6 held its defaults in one
+ module-scope `defaultProps` object, so the default `predefinedPlaces` array had a
+ stable identity. 2.6.4 moved defaults into destructuring (`= []`), which allocates
+ a new array on every render — with the dependency restored that feeds an infinite
+ render loop (effect -> setDataSource -> render -> new array -> effect). Hoisting
+ the default to a module-level EMPTY_PREDEFINED_PLACES restores the stable identity
+ 2.5.6 had.
+
+ Covered by tests/unit/AddressSearchListTest.tsx.
+ ```
+
+- Upstream issue: not yet reported at the time of writing (2.6.4 is the latest release).
diff --git a/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.5.6+001+react-19-support.patch b/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.5.6+001+react-19-support.patch
deleted file mode 100644
index 0c72fb0dac6..00000000000
--- a/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.5.6+001+react-19-support.patch
+++ /dev/null
@@ -1,122 +0,0 @@
-diff --git a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
-index 99a2a13..f733e49 100644
---- a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
-+++ b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
-@@ -70,7 +70,56 @@ const defaultStyles = {
- powered: {},
- };
-
--export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
-+const 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,
-+};
-+
-+export const GooglePlacesAutocomplete = ({ ref, ...rest }) => {
-+ const props = {
-+ ...defaultProps,
-+ ...rest,
-+ };
-+
- let _results = [];
- let _requests = [];
-
-@@ -887,7 +936,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
- {props.children}
- </View>
- );
--});
-+};
-
- GooglePlacesAutocomplete.propTypes = {
- autoFillOnNotFound: PropTypes.bool,
-@@ -944,50 +993,6 @@ GooglePlacesAutocomplete.propTypes = {
- 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 };
diff --git a/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.5.6+002+keyboard-navigation.patch b/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+001+keyboard-navigation.patch
similarity index 85%
rename from patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.5.6+002+keyboard-navigation.patch
rename to patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+001+keyboard-navigation.patch
index 469f75a2210..15e8b7fab73 100644
--- a/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.5.6+002+keyboard-navigation.patch
+++ b/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+001+keyboard-navigation.patch
@@ -1,8 +1,8 @@
diff --git a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
-index f733e49..2d1da44 100644
+index 9fedd7e..6f78506 100644
--- a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
+++ b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
-@@ -719,6 +719,15 @@ export const GooglePlacesAutocomplete = ({ ref, ...rest }) => {
+@@ -907,6 +907,15 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
]}
onPress={() => _onPress(rowData)}
onBlur={_onBlur}
diff --git a/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+002+fix-tdz-crash-on-render.patch b/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+002+fix-tdz-crash-on-render.patch
new file mode 100644
index 00000000000..56649415aab
--- /dev/null
+++ b/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+002+fix-tdz-crash-on-render.patch
@@ -0,0 +1,47 @@
+diff --git a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
+index 6f78506..ea8febf 100644
+--- a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
++++ b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
+@@ -158,7 +158,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
+ 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 requestRef = useRef(null);
+ const queryString = useMemo(() => JSON.stringify(query), [query]);
+
+ const [stateText, setStateText] = useState('');
+@@ -351,6 +351,16 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
+ // API REQUEST FUNCTIONS
+ // ==========================================================================
+
++ 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 _requestNearby = useCallback(
+ (latitude, longitude) => {
+ _abortRequests();
+@@ -650,16 +660,6 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
+ }
+ };
+
+- 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 && fetchDetails === true) {
+ if (rowData.isLoading === true) {
diff --git a/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+003+restore-list-loading-state.patch b/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+003+restore-list-loading-state.patch
new file mode 100644
index 00000000000..ccd1ef08cc2
--- /dev/null
+++ b/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+003+restore-list-loading-state.patch
@@ -0,0 +1,28 @@
+diff --git a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
+index ea8febf..6dbdded 100644
+--- a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
++++ b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
+@@ -1021,13 +1021,21 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
+
+ // Show list if:
+ // 1. Platform is supported
+- // 2. There's data to show (dataSource has items)
++ // 2. There's data to show (dataSource has items), OR there is an empty state
++ // to render in its place (the loader, or the "no results" component)
+ // 3. listViewDisplayed is true OR we're in 'auto' mode (auto-shows when data exists)
+ const isAutoMode =
+ listViewDisplayedProp === 'auto' || listViewDisplayedProp === undefined;
++ // ListEmptyComponent only renders when the list is empty, so gating the whole
++ // list on dataSource.length > 0 makes the loader and the empty state
++ // unreachable. Requiring stateText.length > minLength mirrors 2.5.6 and keeps
++ // the loader hidden once the input is cleared.
++ const hasEmptyStateToShow =
++ stateText.length > minLength &&
++ (listLoaderDisplayed || !!props.listEmptyComponent);
+ const shouldShowList =
+ supportedPlatform() &&
+- dataSource.length > 0 &&
++ (dataSource.length > 0 || hasEmptyStateToShow) &&
+ (listViewDisplayed === true || (isAutoMode && !listWasDismissed));
+
+ if (shouldShowList) {
diff --git a/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+004+restore-predefined-places-updates.patch b/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+004+restore-predefined-places-updates.patch
new file mode 100644
index 00000000000..6432e9ccfb4
--- /dev/null
+++ b/patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.6.4+004+restore-predefined-places-updates.patch
@@ -0,0 +1,56 @@
+diff --git a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
+index 6dbdded..131b42b 100644
+--- a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
++++ b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
+@@ -29,6 +29,10 @@ import {
+ // CONSTANTS
+ // ============================================================================
+
++// Stable identity so that omitting the prop does not produce a new array on every
++// render, which would retrigger every hook memoized on it.
++const EMPTY_PREDEFINED_PLACES = [];
++
+ const defaultStyles = {
+ container: {
+ flex: 1,
+@@ -115,7 +119,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
+ onTimeout = () =>
+ console.warn('google places autocomplete: request timeout'),
+ placeholder = '',
+- predefinedPlaces: predefinedPlacesProp = [],
++ predefinedPlaces: predefinedPlacesProp = EMPTY_PREDEFINED_PLACES,
+ predefinedPlacesAlwaysVisible = false,
+ query = {
+ key: 'missing api key',
+@@ -135,9 +139,10 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
+ // ==========================================================================
+ // STATE & REFS
+ // ==========================================================================
+- const predefinedPlaces = useMemo(() => predefinedPlacesProp || [], [
+- predefinedPlacesProp,
+- ]);
++ const predefinedPlaces = useMemo(
++ () => predefinedPlacesProp || EMPTY_PREDEFINED_PLACES,
++ [predefinedPlacesProp],
++ );
+
+ // Store results array - useRef prevents re-renders when updating results, allows access to latest results in callbacks
+ const resultsRef = useRef([]);
+@@ -1086,11 +1091,14 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
+ setUrl(getRequestUrl(props.requestUrl));
+ }, [props.requestUrl]);
+
+- // Initialize dataSource on mount
++ // Rebuild dataSource on mount and whenever the predefined places change.
++ // buildRowsFromResults is memoized on predefinedPlaces / currentLocation, so this
++ // mirrors 2.5.6, where the effect depended on props.predefinedPlaces. Without the
++ // dependency, predefined places that arrive (or are filtered out) after mount never
++ // reach the list, and stale rows keep the list non-empty so the loader never shows.
+ useEffect(() => {
+ setDataSource(buildRowsFromResults([]));
+- // eslint-disable-next-line react-hooks/exhaustive-deps
+- }, []);
++ }, [buildRowsFromResults]);
+
+ // Keep requestRef updated
+ requestRef.current = _request;
diff --git a/tests/unit/AddressSearchListTest.tsx b/tests/unit/AddressSearchListTest.tsx
new file mode 100644
index 00000000000..38d6a87c35d
--- /dev/null
+++ b/tests/unit/AddressSearchListTest.tsx
@@ -0,0 +1,209 @@
+import {act, fireEvent, render, screen} from '@testing-library/react-native';
+
+import Text from '@components/Text';
+
+import type {Place} from 'react-native-google-places-autocomplete';
+
+import React from 'react';
+import {TextInput} from 'react-native';
+import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
+
+/**
+ * Guards the address-search list behavior that AddressSearch depends on. All of it comes from
+ * `react-native-google-places-autocomplete` and is held in place by the patches in
+ * `patches/react-native-google-places-autocomplete`, because the 2.6.x rewrite changed it:
+ *
+ * - the loader shows only while searching AND there are no previous results
+ * - previous results stay visible (no loader) while the next search is in flight
+ * - the "no results" empty state shows when a search comes back empty
+ * - the list reacts to `predefinedPlaces` (recent destinations) changing after mount
+ *
+ * These are silent regressions — they produce no crash, type error, or console warning — so
+ * they are only caught by asserting on what the list actually renders.
+ */
+
+type FakeRequest = {
+ readyState: number;
+ status: number;
+ responseText: string;
+ onreadystatechange: (() => void) | null;
+};
+
+const inFlight: FakeRequest[] = [];
+
+class MockXMLHttpRequest {
+ readyState = 0;
+
+ status = 200;
+
+ responseText = '';
+
+ onreadystatechange: (() => void) | null = null;
+
+ ontimeout: (() => void) | null = null;
+
+ withCredentials = false;
+
+ timeout = 0;
+
+ open() {}
+
+ setRequestHeader() {}
+
+ abort() {}
+
+ send() {
+ inFlight.push(this);
+ }
+}
+
+function buildPredictions(descriptions: string[]) {
+ return JSON.stringify({
+ predictions: descriptions.map((description, index) => ({
+ // eslint-disable-next-line @typescript-eslint/naming-convention -- mirrors the Google Places API response shape
+ place_id: `place-${index}`,
+ description,
+ // eslint-disable-next-line @typescript-eslint/naming-convention -- mirrors the Google Places API response shape
+ structured_formatting: {main_text: description, secondary_text: 'secondary'},
+ })),
+ });
+}
+
+function latestRequest() {
+ const request = inFlight.at(-1);
+ if (!request) {
+ throw new Error('expected a search request to be in flight');
+ }
+ return request;
+}
+
+/** Put the in-flight request into its loading phase (readyState < 4). */
+function beginLoading() {
+ const request = latestRequest();
+ act(() => {
+ request.readyState = 1;
+ request.onreadystatechange?.();
+ });
+}
+
+/** Complete the in-flight request with the given results. */
+function respondWith(descriptions: string[]) {
+ const request = latestRequest();
+ act(() => {
+ request.readyState = 4;
+ request.status = 200;
+ request.responseText = buildPredictions(descriptions);
+ request.onreadystatechange?.();
+ });
+}
+
+function typeAddress(text: string) {
+ fireEvent.changeText(screen.UNSAFE_getByType(TextInput), text);
+ // The library debounces before firing the request.
+ act(() => {
+ jest.advanceTimersByTime(100);
+ });
+}
+
+function buildTree(predefinedPlaces: Place[] = []) {
+ return (
+ <GooglePlacesAutocomplete
+ listViewDisplayed
+ placeholder=""
+ minLength={0}
+ predefinedPlaces={predefinedPlaces}
+ query={{key: 'test-key', language: 'en'}}
+ requestUrl={{useOnPlatform: 'all', url: 'https://example.com'}}/
+ listLoaderComponent={<Text>LOADER</Text>}
+ listEmptyComponent={<Text>NO_RESULTS</Text>}
+ renderRow={(data) => <Text>{data.description}</Text>}
+ onPress={() => {}}
+ />
+ );
+}
+
+function place(description: string): Place {
+ return {description, geometry: {location: {lat: 0, lng: 0, latitude: 0, longitude: 0}}};
+}
+
+describe('AddressSearch list', () => {
+ let originalXMLHttpRequest: typeof XMLHttpRequest;
+
+ beforeEach(() => {
+ jest.useFakeTimers();
+ inFlight.length = 0;
+ originalXMLHttpRequest = global.XMLHttpRequest;
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- a minimal stub is enough to drive the request lifecycle
+ global.XMLHttpRequest = MockXMLHttpRequest as unknown as typeof XMLHttpRequest;
+ });
+
+ afterEach(() => {
+ global.XMLHttpRequest = originalXMLHttpRequest;
+ jest.useRealTimers();
+ });
+
+ describe('loading state', () => {
+ it('shows the loader while searching when there are no previous results', () => {
+ render(buildTree());
+
+ typeAddress('a');
+ beginLoading();
+
+ expect(screen.getByText('LOADER')).toBeTruthy();
+ });
+
+ it('keeps previous results visible and hides the loader while the next search runs', () => {
+ render(buildTree());
+
+ typeAddress('a');
+ beginLoading();
+ respondWith(['Alpha Street', 'Apple Road']);
+ expect(screen.getByText('Alpha Street')).toBeTruthy();
+
+ typeAddress('ap');
+ beginLoading();
+
+ expect(screen.getByText('Alpha Street')).toBeTruthy();
+ expect(screen.queryByText('LOADER')).toBeNull();
+
+ respondWith(['Apple Road']);
+ expect(screen.getByText('Apple Road')).toBeTruthy();
+ expect(screen.queryByText('Alpha Street')).toBeNull();
+ });
+
+ it('shows the empty state when a search returns no results', () => {
+ render(buildTree());
+
+ typeAddress('zzzz');
+ beginLoading();
+ respondWith([]);
+
+ expect(screen.queryByText('LOADER')).toBeNull();
+ expect(screen.getByText('NO_RESULTS')).toBeTruthy();
+ });
+ });
+
+ describe('predefined places (recent destinations)', () => {
+ it('re-renders the list when the predefinedPlaces prop changes after mount', () => {
+ const {rerender} = render(buildTree([place('Recent A')]));
+ expect(screen.getByText('Recent A')).toBeTruthy();
+
+ rerender(buildTree([place('Recent B')]));
+
+ expect(screen.getByText('Recent B')).toBeTruthy();
+ expect(screen.queryByText('Recent A')).toBeNull();
+ });
+
+ it('clears stale search results when the predefinedPlaces prop changes', () => {
+ const {rerender} = render(buildTree([place('Recent A')]));
+
+ typeAddress('x');
+ respondWith(['Result 1']);
+ expect(screen.getByText('Result 1')).toBeTruthy();
+
+ rerender(buildTree([place('Recent B')]));
+
+ expect(screen.queryByText('Result 1')).toBeNull();
+ });
+ });
+}); |
|
Blockers
Current branch state (already partially there): Recommended local recipe git fetch origin
git checkout snyk-fix-c52ee80b8574f10c1c574110df57502f
git reset --hard origin/main # revert everything to main
# bump the dep in package.json to 2.6.4, then:
npm install # regenerates package-lock.json correctly
# drop the two old 2.5.6 patches, add your 4 new patches + updated details.md,
# and add tests/unit/AddressSearchListTest.tsx from your working copy
npx patch-package # verify all 4 patches apply against pristine 2.6.4
npm run test -- AddressSearchListTest # sanity-check the new test
git add -A && git commit && git push --force-with-leaseIf you'd rather I take over the mechanical part (recreating the 4 patch files + |
|
@MelvinBot do it |
…earch list test Co-authored-by: Situ Chandra Shil <situchan@users.noreply.github.com>
|
Done — pushed What I did (the scope from my offer — the patch/test recreation on top of the branch, no history revert, no main merge): reset the patches dir to
One fix: your diff's Verified: I fetched pristine Not done / caveats:
|
|
MelvinBot has made 26 consecutive commits trying to fix CI failures. Automatic CI fix dispatches are now paused for this PR. Next steps: A human should review the recent commits and resolve the conflicting CI errors manually. |
|
@MelvinBot pull main |
|
What the merge looks like: the branch is ~58k commits behind Resolve locally: git checkout snyk-fix-c52ee80b8574f10c1c574110df57502f
git merge origin/main
# 1) package.json — take main's, then re-apply the only intended edit
git checkout origin/main -- package.json
# set "react-native-google-places-autocomplete" back to "2.6.4"
# 2) details.md — keep the branch's rewrite (documents the 4 new 2.6.4 patches)
git checkout --ours patches/react-native-google-places-autocomplete/details.md
git add patches/react-native-google-places-autocomplete/details.md
# 3) drop the stale patch main re-adds (branch already replaced it with 2.6.4+001)
git rm -f patches/react-native-google-places-autocomplete/react-native-google-places-autocomplete+2.5.6+002+keyboard-navigation.patch
# 4) package-lock.json — regenerate (the step I can't run here)
git checkout origin/main -- package-lock.json
npm install # picks up gpa 2.6.4 + react-native-uuid from the merged package.json
npx patch-package # sanity-check all 4 patches still apply against 2.6.4
git add -A
git commit # completes the merge commit (no rebase/force needed)
git pushAfter Note: I couldn't verify any of this in a browser this run — the steps above are from resolving the merge locally, not from a runtime check. |
|
@MelvinBot do these steps in order:
|
|
Step 1 — undo package-lock.json and commit git fetch origin
git checkout snyk-fix-c52ee80b8574f10c1c574110df57502f
git checkout "$(git merge-base origin/main HEAD)" -- package-lock.json
git commit -m "Undo package-lock.json changes (regenerate after merging main)"Resetting the lock to the pre-PR base is what makes the merge take main's lock with no conflict (then step 3 regenerates it). Step 2 — merge main and fix conflicts git merge origin/mainExactly 3 things need hand-resolving (everything else auto-merges):
Then: git add -A && git commit --no-edit
Step 3 — regenerate package-lock.json npm install # or: npm install --package-lock-only
git add package-lock.json
git commit -m "Regenerate package-lock.json"
git pushOne heads-up on pushing: because this branch is ~8 months behind, the merge makes a large number of commits newly-reachable on the ref, which is what tips the I could not verify any of this in a browser this run (browser control was unavailable), so please sanity-check the app after |
|
@MelvinBot force push this. It's fine to lose all previous commits history |
|
Since you already have the diff locally, the fastest path is to do it yourself: git fetch origin
git checkout snyk-fix-c52ee80b8574f10c1c574110df57502f
git reset --hard origin/main # wipe the branch back to main
# bump react-native-google-places-autocomplete -> 2.6.4 in package.json, then:
npm install # regenerates package-lock.json (see note below)
# add the 4 new patches + updated details.md, delete the old 2.5.6 patches,
# add tests/unit/AddressSearchListTest.tsx
npx patch-package # confirm all 4 patches apply against pristine 2.6.4
git commit -am "Upgrade react-native-google-places-autocomplete to 2.6.4"
git push --force-with-leaseNote: the Alternatively, I can land the same final file state as a normal commit on top of the branch (history preserved, no force-push). That delivers the same merge result without needing me to force-push — though it still needs the lockfile reconciled via |
|
@MelvinBot do alternative |
|
I verified the content matches your diff: the reconstructed keyboard-navigation patch is byte-identical to your header ( Two caveats from the alternative you picked (each is intentional, neither blocks patch-package):
CI's postinstall (patch-package) is the final apply check. Note I couldn't verify anything in a browser this run. |
|
@MelvinBot revert full changes in details.md, package.json, package-lock.json |
Co-authored-by: Situ Chandra Shil <situchan@users.noreply.github.com>
|
Done — reverted Heads-up: the branch is now internally inconsistent — (Note: I couldn't verify anything in a browser this run — no dev env available — so this is confirmed from git state only.) |
|
@MelvinBot pull main |
|
What's failing
Both are GitHub-side timeouts, and I think the cause is how far behind this branch is — it's ~6 months stale, so the merge drags in a huge slice of Suggested next steps
I couldn't verify anything in a browser this run, but no verification was needed here — the merge is conflict-free; the only blocker is GitHub refusing the update under load. |
|
@MelvinBot close this PR in favor of #98735 I created myself. |
|
Closing in favor of #98735, which |
5 participants
Explanation of Change
Fixed Issues
$ #82234
PROPOSAL:
Tests
Offline tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari