Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix nested pressable's event propagation. #2981

Merged
merged 75 commits into from
Jul 25, 2024

Conversation

latekvo
Copy link
Contributor

@latekvo latekvo commented Jul 4, 2024

Issue:

Test case: 3 nested pressables
Actions: click, press for <500ms, press for >500ms
Expected behaviour: No propagation
Observed behaviour: Propagation for 500ms (until long press activates), then no propagation.

Cause:

Touch and non-active events disregard component's layer,
only state respecting component's level is ACTIVE.

Solution:

Create a component which activates immediately after pressing Pressable, capture that event and use it for state setting and callback calling.

Important:

This PR also performs a lot of de-cluttering work in the utils.ts file.
This is necessary due to the convoluted nature of the handled problem, it was especially important to me in this PR to be dealing with clearly labelled functions.

closes: #2980

@latekvo
Copy link
Contributor Author

latekvo commented Jul 9, 2024

As of 7326626, both Android and IOS works thanks to View's onTouchStart which is identical to Gesture handler's onTouchStart except for stopPropagation() method which prevents events from reaching obstructed parent elements.

@latekvo
Copy link
Contributor Author

latekvo commented Jul 10, 2024

Previously I described how InnerPressableEvent (formerly PressEvent) has a structure that looks like it should be recursive but isn't.

Namely:

type InnerPressableEvent = {
  changedTouches: InnerPressableEvent[];
  touches: InnerPressableEvent[];
  [...]
};

After further testing, View actually uses it's version of this type in a recursive manner, which isn't the case for the legacy Pressable.

Since recursiveness in this case is not forced - aligns with the type's structure, and does occur on other components using this structure I'd argue that this is a direct upgrade from the current state, and thus should be implemented onto Pressable despite lack of it's presence on the legacy component.

What do you think? (c.c. @m-bert @j-piasecki )

Copy link
Contributor

@m-bert m-bert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Finally, the time has come :shipit:

src/components/Pressable/Pressable.tsx Outdated Show resolved Hide resolved
@latekvo latekvo merged commit e2098dc into main Jul 25, 2024
3 checks passed
@latekvo latekvo deleted the @latekvo/fix-pressable-event-propagation branch July 25, 2024 09:37
github-merge-queue bot referenced this pull request in valora-inc/wallet Aug 6, 2024
…5714)

[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
|
[react-native-gesture-handler](https://togithub.com/software-mansion/react-native-gesture-handler)
| [`^2.17.1` ->
`^2.18.1`](https://renovatebot.com/diffs/npm/react-native-gesture-handler/2.17.1/2.18.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/react-native-gesture-handler/2.18.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-native-gesture-handler/2.18.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-native-gesture-handler/2.17.1/2.18.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-native-gesture-handler/2.17.1/2.18.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>software-mansion/react-native-gesture-handler
(react-native-gesture-handler)</summary>

###
[`v2.18.1`](https://togithub.com/software-mansion/react-native-gesture-handler/releases/tag/2.18.1)

[Compare
Source](https://togithub.com/software-mansion/react-native-gesture-handler/compare/2.18.0...2.18.1)

#### 🐛 Bug fixes

- Fix build on RN 0.74 by [@&#8203;m-bert](https://togithub.com/m-bert)
in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3024](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3024)

#### What's Changed

- Bump ws from 6.2.2 to 6.2.3 in /example by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3003](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3003)
- Bump requirejs from 2.3.6 to 2.3.7 by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3009](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3009)
- Bump fast-xml-parser from 4.2.5 to 4.4.1 by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3016](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3016)
- Bump ws from 6.2.2 to 6.2.3 in /docs by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3021](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3021)
- Add documentation page for `Pressable` component by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2992](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2992)
- Add docs page for Reanimated Swipeable by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2962](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2962)

**Full Changelog**:
software-mansion/react-native-gesture-handler@2.18.0...2.18.1

###
[`v2.18.0`](https://togithub.com/software-mansion/react-native-gesture-handler/releases/tag/2.18.0)

[Compare
Source](https://togithub.com/software-mansion/react-native-gesture-handler/compare/2.17.1...2.18.0)

#### ❗ Important changes

- Create a separate component out of the new Swipeable row by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2936](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2936)
- Create gesturized pressable component by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2942](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2942),
[https://github.com/software-mansion/react-native-gesture-handler/pull/2977](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2977),
[https://github.com/software-mansion/react-native-gesture-handler/pull/2982](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2982),
[https://github.com/software-mansion/react-native-gesture-handler/pull/2981](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2981)
- Support for React Native 0.75 by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2966](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2966)

#### 👍 Improvements

- \[macOS] Add `ForceTouch` warning by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2954](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2954)
- Remove shared value read on the JS thread during detector update by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2957](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2957)
- Use a newer constructor for all Gesture Handler events on Android by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2967](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2967)
- Persist rotation and pinch gesture through pointer changes on android
by [@&#8203;coado](https://togithub.com/coado) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2983](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2983)
- \[macOS] Add `NativeViewGestureHandler` by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3004](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3004)
- Add `enabled` prop support to swipeable by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3011](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3011)

#### 🐛 Bug fixes

- Make handler comparator work only on non-null objects by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2964](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2964)
- fix: bind scope to null to prevent issues with inline requires by
[@&#8203;EvanBacon](https://togithub.com/EvanBacon) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2972](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2972)
- Replace `queueMicrotask` with `requestAnimationFrame` by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2969](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2969)
- Resolve circular dependencies on JS side by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2970](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2970)
- Fix Android native buttons emitting 2 press events when talkback is
enabled by [@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3002](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3002)
- Fix `ScrollView` intercepting touches through out-of-bounds children
by [@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3017](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3017)
- Change `onPress` argument in buttons by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3006](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3006)
- \[macOS] Fix handlers not responding after opening context menu by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3008](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3008)
- \[iOS | macOS] Fix translation calculation in `LongPress` by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3013](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3013)
- Fix cancelling manual activation gestures blocking interactivity on
iOS by [@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3007](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3007)

#### 🔢 Miscellaneous

- Bump ws from 6.2.2 to 6.2.3 in /FabricExample by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2949](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2949)
- Bump braces from 3.0.2 to 3.0.3 in /MacOSExample by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2956](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2956)
- docs: bump `@swmansion/t-rex-ui` to 0.0.12 by
[@&#8203;patrycjakalinska](https://togithub.com/patrycjakalinska) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2958](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2958)
- Bump braces from 3.0.2 to 3.0.3 in /FabricExample by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2965](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2965)
- Set consistent prettier version across all package.jsons by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2971](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2971)
- Change naming scheme in package.json from camelCase to dash-case by
[@&#8203;latekvo](https://togithub.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2973](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2973)
- Unify comments and simplify some conditions. by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2984](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2984)
- docs: Update Expo installation instructions by
[@&#8203;amandeepmittal](https://togithub.com/amandeepmittal) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2991](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2991)
- Bump fast-loops from 1.1.3 to 1.1.4 in /docs by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2986](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2986)
- Remove plural form in docs by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2995](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2995)
- Bump fast-loops from 1.1.3 to 1.1.4 in /example by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2994](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2994)
- Don't run old arch integrity check on every PR by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2998](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2998)
- docs: fix footer on landing by
[@&#8203;patrycjakalinska](https://togithub.com/patrycjakalinska) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2997](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2997)
- docs: Replace HireUsSection with `@swmansion/t-rex-ui` component by
[@&#8203;patrycjakalinska](https://togithub.com/patrycjakalinska) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2996](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2996)
- Mention `drawerWillShow` in `DrawerLayout` docs by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3000](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3000)
- chore: Refactor gradle task to JS scripts by
[@&#8203;maciekstosio](https://togithub.com/maciekstosio) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3001](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3001)
- Update dependencies related to tests by
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3005](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3005)
- \[macOS] Switch `hasPointerInside` to `containsPointInView` by
[@&#8203;m-bert](https://togithub.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3012](https://togithub.com/software-mansion/react-native-gesture-handler/pull/3012)

#### New Contributors

- [@&#8203;coado](https://togithub.com/coado) made their first
contribution in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2983](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2983)
- [@&#8203;amandeepmittal](https://togithub.com/amandeepmittal) made
their first contribution in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2991](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2991)

**Full Changelog**:
software-mansion/react-native-gesture-handler@2.17.0...2.18.0

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "after 5pm,every weekend" in timezone
America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone
America/Los_Angeles.

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR was generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View the
[repository job
log](https://developer.mend.io/github/valora-inc/wallet).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40NDAuNyIsInVwZGF0ZWRJblZlciI6IjM3LjQ0MC43IiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJucG0iLCJyZW5vdmF0ZSJdfQ==-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: valora-bot <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Pressable] Nested Pressables don't behave as the ones from RN
3 participants