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

Create gesturized pressable component #2942

Merged
merged 149 commits into from
Jul 3, 2024

Conversation

latekvo
Copy link
Contributor

@latekvo latekvo commented Jun 12, 2024

This PR adds our own Pressable component

Closes #1221

@latekvo latekvo changed the title initial pressable component Crate gesturized pressable component Jun 13, 2024
Pressable/package.json Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
src/components/Pressable.tsx Outdated Show resolved Hide resolved
src/components/Pressable.tsx Outdated Show resolved Hide resolved
src/components/Pressable.tsx Outdated Show resolved Hide resolved
src/components/Pressable.tsx Outdated Show resolved Hide resolved
src/components/Pressable.tsx Outdated Show resolved Hide resolved
src/components/Pressable.tsx Outdated Show resolved Hide resolved
src/components/Pressable.tsx Outdated Show resolved Hide resolved
src/components/Pressable.tsx Outdated Show resolved Hide resolved
@latekvo
Copy link
Contributor Author

latekvo commented Jun 14, 2024

Original onBlur and onFocus:
Pressable defaults to blurred state.
When in blurred state, the first click on the pressable calls onFocus.
When in focused state, when the user clicks outside of Pressable, onBlur is called and blurred state is set.
Original onBlur and onFocus is only implemented on Web, and doesn't work on Android

@latekvo
Copy link
Contributor Author

latekvo commented Jun 14, 2024

touchWithinBounds is still up for further investigation and i think i'll remove it all together in favour of dynamically changing hitSlop, if that'll be possible.
onFocus and onBlur still have to be implemented, it may be tricky as the pointer would have to be tracked outside of Pressable, it's likely I'll have to remove it all together, which may not be a big deal, as previously it was a web specific feature anyways.

Other Pressable features seem to all be implemented, but I'll be testing their alignment with the original some more.

What's up for discussion is compatibility with legacy events. None of them are possible to fully recreate within rngh, and they weren't too consistent across web / mobile, but they could be partially imitated to better reflect those returned by the original callbacks.

@latekvo latekvo merged commit 4ce89e3 into main Jul 3, 2024
4 checks passed
@latekvo latekvo deleted the @latekvo/add_gesture_handler_pressable_implementation branch July 3, 2024 12:23
@latekvo latekvo restored the @latekvo/add_gesture_handler_pressable_implementation branch July 3, 2024 12:26
latekvo added a commit that referenced this pull request Jul 3, 2024
@latekvo latekvo deleted the @latekvo/add_gesture_handler_pressable_implementation branch July 3, 2024 12:27
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://github.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://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.18.1)

[Compare
Source](https://github.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://github.com/m-bert)
in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3024](https://github.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://github.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3003](https://github.com/software-mansion/react-native-gesture-handler/pull/3003)
- Bump requirejs from 2.3.6 to 2.3.7 by
[@&#8203;dependabot](https://github.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3009](https://github.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://github.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3016](https://github.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://github.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3021](https://github.com/software-mansion/react-native-gesture-handler/pull/3021)
- Add documentation page for `Pressable` component by
[@&#8203;latekvo](https://github.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2992](https://github.com/software-mansion/react-native-gesture-handler/pull/2992)
- Add docs page for Reanimated Swipeable by
[@&#8203;latekvo](https://github.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2962](https://github.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://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.18.0)

[Compare
Source](https://github.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://github.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2936](https://github.com/software-mansion/react-native-gesture-handler/pull/2936)
- Create gesturized pressable component by
[@&#8203;latekvo](https://github.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2942](https://github.com/software-mansion/react-native-gesture-handler/pull/2942),
[https://github.com/software-mansion/react-native-gesture-handler/pull/2977](https://github.com/software-mansion/react-native-gesture-handler/pull/2977),
[https://github.com/software-mansion/react-native-gesture-handler/pull/2982](https://github.com/software-mansion/react-native-gesture-handler/pull/2982),
[https://github.com/software-mansion/react-native-gesture-handler/pull/2981](https://github.com/software-mansion/react-native-gesture-handler/pull/2981)
- Support for React Native 0.75 by
[@&#8203;j-piasecki](https://github.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2966](https://github.com/software-mansion/react-native-gesture-handler/pull/2966)

#### 👍 Improvements

- \[macOS] Add `ForceTouch` warning by
[@&#8203;m-bert](https://github.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2954](https://github.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://github.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2957](https://github.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://github.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2967](https://github.com/software-mansion/react-native-gesture-handler/pull/2967)
- Persist rotation and pinch gesture through pointer changes on android
by [@&#8203;coado](https://github.com/coado) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2983](https://github.com/software-mansion/react-native-gesture-handler/pull/2983)
- \[macOS] Add `NativeViewGestureHandler` by
[@&#8203;m-bert](https://github.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3004](https://github.com/software-mansion/react-native-gesture-handler/pull/3004)
- Add `enabled` prop support to swipeable by
[@&#8203;latekvo](https://github.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3011](https://github.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://github.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2964](https://github.com/software-mansion/react-native-gesture-handler/pull/2964)
- fix: bind scope to null to prevent issues with inline requires by
[@&#8203;EvanBacon](https://github.com/EvanBacon) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2972](https://github.com/software-mansion/react-native-gesture-handler/pull/2972)
- Replace `queueMicrotask` with `requestAnimationFrame` by
[@&#8203;m-bert](https://github.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2969](https://github.com/software-mansion/react-native-gesture-handler/pull/2969)
- Resolve circular dependencies on JS side by
[@&#8203;latekvo](https://github.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2970](https://github.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://github.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3002](https://github.com/software-mansion/react-native-gesture-handler/pull/3002)
- Fix `ScrollView` intercepting touches through out-of-bounds children
by [@&#8203;j-piasecki](https://github.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3017](https://github.com/software-mansion/react-native-gesture-handler/pull/3017)
- Change `onPress` argument in buttons by
[@&#8203;m-bert](https://github.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3006](https://github.com/software-mansion/react-native-gesture-handler/pull/3006)
- \[macOS] Fix handlers not responding after opening context menu by
[@&#8203;m-bert](https://github.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3008](https://github.com/software-mansion/react-native-gesture-handler/pull/3008)
- \[iOS | macOS] Fix translation calculation in `LongPress` by
[@&#8203;m-bert](https://github.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3013](https://github.com/software-mansion/react-native-gesture-handler/pull/3013)
- Fix cancelling manual activation gestures blocking interactivity on
iOS by [@&#8203;latekvo](https://github.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3007](https://github.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://github.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2949](https://github.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://github.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2956](https://github.com/software-mansion/react-native-gesture-handler/pull/2956)
- docs: bump `@swmansion/t-rex-ui` to 0.0.12 by
[@&#8203;patrycjakalinska](https://github.com/patrycjakalinska) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2958](https://github.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://github.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2965](https://github.com/software-mansion/react-native-gesture-handler/pull/2965)
- Set consistent prettier version across all package.jsons by
[@&#8203;latekvo](https://github.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2971](https://github.com/software-mansion/react-native-gesture-handler/pull/2971)
- Change naming scheme in package.json from camelCase to dash-case by
[@&#8203;latekvo](https://github.com/latekvo) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2973](https://github.com/software-mansion/react-native-gesture-handler/pull/2973)
- Unify comments and simplify some conditions. by
[@&#8203;m-bert](https://github.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2984](https://github.com/software-mansion/react-native-gesture-handler/pull/2984)
- docs: Update Expo installation instructions by
[@&#8203;amandeepmittal](https://github.com/amandeepmittal) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2991](https://github.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://github.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2986](https://github.com/software-mansion/react-native-gesture-handler/pull/2986)
- Remove plural form in docs by
[@&#8203;m-bert](https://github.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2995](https://github.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://github.com/dependabot) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2994](https://github.com/software-mansion/react-native-gesture-handler/pull/2994)
- Don't run old arch integrity check on every PR by
[@&#8203;j-piasecki](https://github.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2998](https://github.com/software-mansion/react-native-gesture-handler/pull/2998)
- docs: fix footer on landing by
[@&#8203;patrycjakalinska](https://github.com/patrycjakalinska) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2997](https://github.com/software-mansion/react-native-gesture-handler/pull/2997)
- docs: Replace HireUsSection with `@swmansion/t-rex-ui` component by
[@&#8203;patrycjakalinska](https://github.com/patrycjakalinska) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2996](https://github.com/software-mansion/react-native-gesture-handler/pull/2996)
- Mention `drawerWillShow` in `DrawerLayout` docs by
[@&#8203;m-bert](https://github.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3000](https://github.com/software-mansion/react-native-gesture-handler/pull/3000)
- chore: Refactor gradle task to JS scripts by
[@&#8203;maciekstosio](https://github.com/maciekstosio) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3001](https://github.com/software-mansion/react-native-gesture-handler/pull/3001)
- Update dependencies related to tests by
[@&#8203;j-piasecki](https://github.com/j-piasecki) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3005](https://github.com/software-mansion/react-native-gesture-handler/pull/3005)
- \[macOS] Switch `hasPointerInside` to `containsPointInView` by
[@&#8203;m-bert](https://github.com/m-bert) in
[https://github.com/software-mansion/react-native-gesture-handler/pull/3012](https://github.com/software-mansion/react-native-gesture-handler/pull/3012)

#### New Contributors

- [@&#8203;coado](https://github.com/coado) made their first
contribution in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2983](https://github.com/software-mansion/react-native-gesture-handler/pull/2983)
- [@&#8203;amandeepmittal](https://github.com/amandeepmittal) made
their first contribution in
[https://github.com/software-mansion/react-native-gesture-handler/pull/2991](https://github.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 <valorabot@valoraapp.com>
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 API ?
3 participants