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 a separate component out of the new Swipeable row #2936

Merged
merged 56 commits into from
Jun 20, 2024

Conversation

latekvo
Copy link
Contributor

@latekvo latekvo commented Jun 10, 2024

This PR extracts the ReanimatedSwipeable example into a standalone component.

@latekvo
Copy link
Contributor Author

latekvo commented Jun 11, 2024

Current state

reanimated_swipeable_reduced.mov

As it is visible on the video, pure gesture handler components import with no issues, and if the user intends to use a reanimated component imported from the gesture handler, they have to explicitly install reanimated

@latekvo
Copy link
Contributor Author

latekvo commented Jun 11, 2024

This change has to be displayed in the docs, as for most people the reanimated component is likely preferable. Should we do it in this PR (c.c. @kacperkapusciak ), or push this one and open a new one for that?

@latekvo latekvo marked this pull request as ready for review June 11, 2024 09:49
@latekvo latekvo requested a review from j-piasecki June 11, 2024 11:13
@latekvo latekvo marked this pull request as draft June 11, 2024 13:26
@latekvo
Copy link
Contributor Author

latekvo commented Jun 11, 2024

found a new issue with forwardRef'd callbacks i didn't notice before, converting to draft
edit:
resolved

@latekvo latekvo marked this pull request as ready for review June 12, 2024 12:41
example/src/new_api/swipeable/AppleStyleSwipeableRow.tsx Outdated Show resolved Hide resolved
example/src/new_api/swipeable/GmailStyleSwipeableRow.tsx Outdated Show resolved Hide resolved
example/src/new_api/swipeable/AppleStyleSwipeableRow.tsx Outdated Show resolved Hide resolved
example/src/new_api/swipeable/GmailStyleSwipeableRow.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedSwipeable.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedSwipeable.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedSwipeable.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedSwipeable.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedSwipeable.tsx Outdated Show resolved Hide resolved
src/components/ReanimatedSwipeable.tsx Outdated Show resolved Hide resolved
@latekvo
Copy link
Contributor Author

latekvo commented Jun 20, 2024

I still believe that it would be nice to have some feedback from RectButtons in new example (using them as View doesn't make much sense for me), so please either remove them or add a callback before merging 😅

I removed those completely, they were used in the apple/gmail swipeable showcase, and I must have copied them accidentally.

@latekvo latekvo merged commit 7923da1 into main Jun 20, 2024
4 checks passed
@latekvo latekvo deleted the @latekvo/add_reanimated_swipeable_row_componenet branch June 20, 2024 07:47
@jackstudd
Copy link

Hi @latekvo !🙋‍♂️

Thanks for this! It works really great and with better performances! However, I noticed there's no longer the ability to disable the swipe. I'm guessing this could be done with a props and passed to the Gesture.Pan.enabled().

I tried to just remove the renderActions based on my disabled condition, but we can still swipe, we just no longer see the action.

I would gladly do the PR myself if needed!

@latekvo
Copy link
Contributor Author

latekvo commented Jul 29, 2024

Hey @jackstudd,

I really appreciate your report.

I opened this PR with a fix for your issue, please let me know if it resolves it.

latekvo added a commit that referenced this pull request Jul 30, 2024
## Description

This issue fixes `enabled` prop having no effect on the new Swipeable.

Reported
[here](#2936 (comment))
by @jackstudd

## Test plan

- open `release_tests` > `Swipeable Reanimation` example in both an
emulator and an editor
- add `enabled={false}` prop to both the swipeables
- legacy `swipeable` is now immovable
- new `swipeable` used to be unaffected, with this fix it should be
immovable as well

I added the `enabled` usage only for the `Pan` gesture and not the `Tap`
gesture intentionally.
The `Tap` gesture should remain active even when the rest of `swipeable`
is disabled,
as I found when testing the legacy `swipeable`
@jackstudd
Copy link

Hey @latekvo !

Just tried it out, it works perfectly, many thanks!

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 <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.

4 participants