-
-
Notifications
You must be signed in to change notification settings - Fork 984
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
Add docs page for Reanimated Swipeable #2962
Conversation
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can also add type definitions to the props and update parts that relate to the old Animated
api.
It would be nice to show a warning that the new one should be used.
I think we can deprecate it (cc @m-bert)
See review above |
Yes, I think we can deprecate old |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, please don't merge yet. It will get published automatically ReanimatedSwipeable hasn't been released yet.
|
||
progress: [0, 1] | ||
|
||
drag: [0, +] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't understand the [0, +]
, [0, -]
notation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It means these values travel from 0
to positive infinity
and from 0
to negative infinity
respectively.
I copied this notation from the legacy Swipeable
docs for consistency, but i can write it down differently if you'd prefer.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[0, +]
is not that bad, but [0, -]
is confusing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is [0, +∞]
and [0, -∞]
fine?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What I meant is not the infinity sign, but rather the notation of [0, -∞]
(it doesn't follow formal definition of interval). I'm not sure though if that is what @kacperkapusciak meant.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey so what's the verdict on this issue?
As far as I see, the formal way would be to note it this way: (-∞, 0]
and [0, +∞)
But since here, it represents a mapping from input
to output
, i think [0, -∞)
and [0, +∞)
would be more readable.
Please let me know, which one you think would work better @m-bert.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well, I don't like [0, -∞)
because it looks very unnatural to me. On the other hand I cannot think of any better idea 😞 One could argue that if we only talk about input and output range, we could leave formal notation (but it is not a strong argument)
Anyway, it was @kacperkapusciak who has started this discussion and I want to know what's his stance on this
…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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 [@​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 - [@​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) - [@​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]>
## Description Fixed the example provided with the `Reanimated Swipeable` docs, it looks like a fragment of it was missing. Also, what's the verdict on [this issue](#2962 (comment))? Today I had to take a look at these docs again and it really occurred to me the way it's currently written can be really confusing. Here's my proposition, it removes the `[0, +]` mapping in favour of a verbose explanation: > ### `renderRightActions` > > accepts a function. > The function receives the following arguments: > > - `progress` value representing swiping progress relative to the width of the returned element. > `progress` is `0` when `swipeable` is closed, `1` when `right` action is fully visible. > > - `translation` horizontal translation of `swipeable` in pixels. > - `swipeable` provides an object exposing the methods listed [here](#methods) > > This function must return a `ReactNode`. side-by-side comparison: old|new ---|--- ![image](https://github.com/user-attachments/assets/0ca633f3-05ce-4486-8310-d355183b7703)|![image](https://github.com/user-attachments/assets/07c9c647-0623-46d5-bce2-e48ee24cb70b) Of course this change applies to both `renderLeftActions` and `renderRightActions`
This PR adds documentation page for the new Reanimated
Swipeable
component.