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
Copy link
Contributor Author

latekvo commented Jul 3, 2024

Functional styling (all platforms)

fixed, it was an issue with touch cancelling

Delay on press (web only)

couldn't replicate it, could you tell me which browser you're using?

Problems with borders on iOS

removed them

(c.c. @m-bert )

@latekvo
Copy link
Contributor Author

latekvo commented Jul 3, 2024

Regarding the hover in/out bug on web browser with stylus, I think what you described is normal behaviour.

When just clicking (press in immediately followed by press out), well then before hoverIn's timer finishes (press in), hoverOut's is started (press out), thus only the latter will be displayed.

If you were to hold down the hover element, you'd also see Hovered in with delay.

This is in line with what you requested yesterday:

image

I hope this explains the issue you've found.

@m-bert
Copy link
Contributor

m-bert commented Jul 3, 2024

couldn't replicate it, could you tell me which browser you're using?

I'm using Google Chrome (126.0.6478.63).

I hope this explains the issue you've found.

Makes sense 😅

@m-bert
Copy link
Contributor

m-bert commented Jul 3, 2024

I think this is yet another bug 😅 But as I said earlier, I'm not sure if we want to fix it in this PR

Nagranie.z.ekranu.2024-07-3.o.11.51.16.mov

@j-piasecki
Copy link
Member

I think we've done a lot in this PR and further issues may be addressed in the following PRs.

We can do that. Could you open issues for the problems you've found in that case?

@m-bert
Copy link
Contributor

m-bert commented Jul 3, 2024

Could you open issues for the problems you've found in that case?

I will.

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.

Good job! There are few things that we have to polish though - let's do this in follow ups 😅

src/components/Pressable/Pressable.tsx Outdated Show resolved Hide resolved
example/src/release_tests/gesturizedPressable/index.tsx Outdated Show resolved Hide resolved
@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 pushed a commit to valora-inc/wallet that referenced this pull request 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
[software-mansion/react-native-gesture-handler#3024

#### What's Changed

- Bump ws from 6.2.2 to 6.2.3 in /example by
[@&#8203;dependabot](https://github.com/dependabot) in
[software-mansion/react-native-gesture-handler#3003
- Bump requirejs from 2.3.6 to 2.3.7 by
[@&#8203;dependabot](https://github.com/dependabot) in
[software-mansion/react-native-gesture-handler#3009
- Bump fast-xml-parser from 4.2.5 to 4.4.1 by
[@&#8203;dependabot](https://github.com/dependabot) in
[software-mansion/react-native-gesture-handler#3016
- Bump ws from 6.2.2 to 6.2.3 in /docs by
[@&#8203;dependabot](https://github.com/dependabot) in
[software-mansion/react-native-gesture-handler#3021
- Add documentation page for `Pressable` component by
[@&#8203;latekvo](https://github.com/latekvo) in
[software-mansion/react-native-gesture-handler#2992
- Add docs page for Reanimated Swipeable by
[@&#8203;latekvo](https://github.com/latekvo) in
[software-mansion/react-native-gesture-handler#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
[software-mansion/react-native-gesture-handler#2936
- Create gesturized pressable component by
[@&#8203;latekvo](https://github.com/latekvo) in
[software-mansion/react-native-gesture-handler#2942,
[software-mansion/react-native-gesture-handler#2977,
[software-mansion/react-native-gesture-handler#2982,
[software-mansion/react-native-gesture-handler#2981
- Support for React Native 0.75 by
[@&#8203;j-piasecki](https://github.com/j-piasecki) in
[software-mansion/react-native-gesture-handler#2966

#### 👍 Improvements

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

#### 🐛 Bug fixes

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

#### 🔢 Miscellaneous

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

#### New Contributors

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