From 0478eb6a622fae2916e3d2bf0df3e839255ba68a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Wed, 26 Jun 2024 14:05:28 +0200 Subject: [PATCH 01/10] add initial docs page for reanimated swipeable --- docs/docs/components/reanimated_swipeable.md | 225 +++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 docs/docs/components/reanimated_swipeable.md diff --git a/docs/docs/components/reanimated_swipeable.md b/docs/docs/components/reanimated_swipeable.md new file mode 100644 index 0000000000..a7112e7b99 --- /dev/null +++ b/docs/docs/components/reanimated_swipeable.md @@ -0,0 +1,225 @@ +--- +id: reanimated_swipeable +title: Reanimated Swipeable +sidebar_label: Reanimated Swipeable +--- + +import useBaseUrl from '@docusaurus/useBaseUrl'; +import GifGallery from '@site/components/GifGallery' + + + + + +:::info +This component is a drop-in replacement for the `Swipeable` component, rewritten in `Reanimated2`. +::: + +Reanimated `Swipeable` allows for implementing swipeable rows or similar interaction. It renders its children within a panable container allows for horizontal swiping left and right. While swiping one of two "action" containers can be shown depends on whether user swipes left or right (containers can be rendered by `renderLeftActions` or `renderRightActions` props). + +### Usage: + +Similarly to the `DrawerLayout` and `Swipeable`, Reanimated `Swipeable` component isn't exported by default from the `react-native-gesture-handler` package. To use it, import it in the following way: + +```js +import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable'; +``` + +## Properties + +### `friction` + +a number that specifies how much the visual interaction will be delayed compared to the gesture distance. e.g. value of 1 will indicate that the swipeable panel should exactly follow the gesture, 2 means it is going to be two times "slower". + +### `leftThreshold` + +distance from the left edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width. + +### `rightThreshold` + +distance from the right edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width. + +### `dragOffsetFromLeftEdge` + +distance that the panel must be dragged from the left edge to be considered a swipe. The default value is 10. + +### `dragOffsetFromRightEdge` + +distance that the panel must be dragged from the right edge to be considered a swipe. The default value is 10. + +### `overshootLeft` + +a boolean value indicating if the swipeable panel can be pulled further than the left actions panel's width. It is set to `true` by default as long as the left panel render method is present. + +### `overshootRight` + +a boolean value indicating if the swipeable panel can be pulled further than the right actions panel's width. It is set to `true` by default as long as the right panel render method is present. + +### `overshootFriction` + +a number that specifies how much the visual interaction will be delayed compared to the gesture distance at overshoot. Default value is 1, it mean no friction, for a native feel, try 8 or above. + +### `onSwipeableLeftOpen` + +:::caution +This callback is deprecated and will be removed in the next version. Please use `onSwipeableOpen(direction)` +::: + +method that is called when left action panel gets open. + +### `onSwipeableRightOpen` + +:::caution +This callback is deprecated and will be removed in the next version. Please use `onSwipeableOpen(direction)` +::: + +method that is called when right action panel gets open. + +### `onSwipeableOpen` + +method that is called when action panel gets open (either right or left). Takes swipe direction as +an argument. + +### `onSwipeableClose` + +method that is called when action panel is closed. Takes swipe direction as +an argument. + +### `onSwipeableLeftWillOpen` + +:::caution +This callback is deprecated and will be removed in the next version. Please use `onSwipeableWillOpen(direction)` +::: + +method that is called when left action panel starts animating on open. + +### `onSwipeableRightWillOpen` + +:::caution +This callback is deprecated and will be removed in the next version. Please use `onSwipeableWillOpen(direction)` +::: + +method that is called when right action panel starts animating on open. + +### `onSwipeableWillOpen` + +method that is called when action panel starts animating on open (either right or left). Takes swipe direction as +an argument. + +### `onSwipeableWillClose` + +method that is called when action panel starts animating on close. Takes swipe direction as +an argument. + +### `renderLeftActions` + +method that is expected to return an action panel that is going to be revealed from the left side when user swipes right. +This map describes the values to use as inputRange for extra interpolation: +AnimatedValue: [startValue, endValue] + +progressAnimatedValue: [0, 1] +dragAnimatedValue: [0, +] + +To support `rtl` flexbox layouts use `flexDirection` styling. + +### `renderRightActions` + +method that is expected to return an action panel that is going to be revealed from the right side when user swipes left. +This map describes the values to use as inputRange for extra interpolation: +AnimatedValue: [startValue, endValue] + +progressAnimatedValue: [0, 1] +dragAnimatedValue: [0, -] + +To support `rtl` flexbox layouts use `flexDirection` styling. + +### `containerStyle` + +style object for the container (Animated.View), for example to override `overflow: 'hidden'`. + +### `childrenContainerStyle` + +style object for the children container (Animated.View), for example to apply `flex: 1`. + +### `enableTrackpadTwoFingerGesture` (iOS only) + +Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with enableTrackpadTwoFingerGesture swiping with two fingers will also trigger the gesture. + +### `mouseButton(value: MouseButton)` (Web & Android only) + +Allows users to choose which mouse button should handler respond to. The enum `MouseButton` consists of the following predefined fields: + +- `LEFT` +- `RIGHT` +- `MIDDLE` +- `BUTTON_4` +- `BUTTON_5` +- `ALL` + +Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`. + +### `enableContextMenu(value: boolean)` (Web only) + +Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false`. + +## Methods + +Using reference to `Swipeable` it's possible to trigger some actions on it + +### `close` + +method that closes component. + +### `openLeft` + +method that opens component on left side. + +### `openRight` + +method that opens component on right side. + +### `reset` + +method that resets the swiping states of this `Swipeable` component. + +Unlike method `close`, this method does not trigger any animation. + +### Example: + +See the [swipeable example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/showcase/swipeable/index.tsx) from GestureHandler Example App or view it directly on your phone by visiting [our expo demo](https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo). + +```js +import React, { Component } from 'react'; +import { Animated, StyleSheet, View } from 'react-native'; +import { RectButton } from 'react-native-gesture-handler'; +import Swipeable from 'react-native-gesture-handler/Swipeable'; + +class AppleStyleSwipeableRow extends Component { + renderLeftActions = (progress, dragX) => { + const trans = dragX.interpolate({ + inputRange: [0, 50, 100, 101], + outputRange: [-20, 0, 0, 1], + }); + return ( + + + Archive + + + ); + }; + render() { + return ( + + "hello" + + ); + } +} +``` From 7ce9b531c7f6af20fd01df408ee59a05827148eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Thu, 27 Jun 2024 10:31:17 +0200 Subject: [PATCH 02/10] remove deprecated functions, update example, other review suggestions --- docs/docs/components/reanimated_swipeable.md | 120 +++++++++---------- 1 file changed, 55 insertions(+), 65 deletions(-) diff --git a/docs/docs/components/reanimated_swipeable.md b/docs/docs/components/reanimated_swipeable.md index a7112e7b99..2de8b84bfe 100644 --- a/docs/docs/components/reanimated_swipeable.md +++ b/docs/docs/components/reanimated_swipeable.md @@ -12,14 +12,14 @@ import GifGallery from '@site/components/GifGallery' :::info -This component is a drop-in replacement for the `Swipeable` component, rewritten in `Reanimated2`. +This component is a drop-in replacement for the `Swipeable` component, rewritten using `Reanimated`. ::: Reanimated `Swipeable` allows for implementing swipeable rows or similar interaction. It renders its children within a panable container allows for horizontal swiping left and right. While swiping one of two "action" containers can be shown depends on whether user swipes left or right (containers can be rendered by `renderLeftActions` or `renderRightActions` props). ### Usage: -Similarly to the `DrawerLayout` and `Swipeable`, Reanimated `Swipeable` component isn't exported by default from the `react-native-gesture-handler` package. To use it, import it in the following way: +To use it, import it in the following way: ```js import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable'; @@ -59,22 +59,6 @@ a boolean value indicating if the swipeable panel can be pulled further than the a number that specifies how much the visual interaction will be delayed compared to the gesture distance at overshoot. Default value is 1, it mean no friction, for a native feel, try 8 or above. -### `onSwipeableLeftOpen` - -:::caution -This callback is deprecated and will be removed in the next version. Please use `onSwipeableOpen(direction)` -::: - -method that is called when left action panel gets open. - -### `onSwipeableRightOpen` - -:::caution -This callback is deprecated and will be removed in the next version. Please use `onSwipeableOpen(direction)` -::: - -method that is called when right action panel gets open. - ### `onSwipeableOpen` method that is called when action panel gets open (either right or left). Takes swipe direction as @@ -85,22 +69,6 @@ an argument. method that is called when action panel is closed. Takes swipe direction as an argument. -### `onSwipeableLeftWillOpen` - -:::caution -This callback is deprecated and will be removed in the next version. Please use `onSwipeableWillOpen(direction)` -::: - -method that is called when left action panel starts animating on open. - -### `onSwipeableRightWillOpen` - -:::caution -This callback is deprecated and will be removed in the next version. Please use `onSwipeableWillOpen(direction)` -::: - -method that is called when right action panel starts animating on open. - ### `onSwipeableWillOpen` method that is called when action panel starts animating on open (either right or left). Takes swipe direction as @@ -186,40 +154,62 @@ Unlike method `close`, this method does not trigger any animation. ### Example: -See the [swipeable example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/showcase/swipeable/index.tsx) from GestureHandler Example App or view it directly on your phone by visiting [our expo demo](https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo). +See the [swipeable example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/release_tests/swipeableReanimation/index.tsx) from GestureHandler Example App. -```js +```jsx import React, { Component } from 'react'; import { Animated, StyleSheet, View } from 'react-native'; import { RectButton } from 'react-native-gesture-handler'; -import Swipeable from 'react-native-gesture-handler/Swipeable'; - -class AppleStyleSwipeableRow extends Component { - renderLeftActions = (progress, dragX) => { - const trans = dragX.interpolate({ - inputRange: [0, 50, 100, 101], - outputRange: [-20, 0, 0, 1], - }); - return ( - - - Archive - - - ); - }; - render() { - return ( - - "hello" - - ); - } +import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable'; + +const LeftAction = ({ dragX, swipeableRef }: LeftActionsProps) => { + const animatedStyle = useAnimatedStyle(() => ({ + transform: [ + { + translateX: interpolate( + dragX.value, + [0, 50, 100, 101], + [-20, 0, 0, 1], + Extrapolation.CLAMP + ), + }, + ], + })); + return ( + swipeableRef.current!.close()}> + + Archive + + + ); +}; + +const renderLeftActions = ( + _progress: any, + translation: SharedValue, + swipeableRef: React.RefObject +) => ; + +function AppleStyleSwipeableRow({ children }: AppleStyleSwipeableRowProps) { + const swipeableRow = useRef(null); + + return ( + + renderLeftActions(_, progress, swipeableRow) + }> + Apple style swipeable + + ); } ``` From f7dabef4b9b2deabff7cf69722de76cc417db47a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Thu, 27 Jun 2024 10:41:25 +0200 Subject: [PATCH 03/10] add deprecation note to the old swipeable --- docs/docs/components/swipeable.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/docs/components/swipeable.md b/docs/docs/components/swipeable.md index 4f9177ab9f..17f814f1c1 100644 --- a/docs/docs/components/swipeable.md +++ b/docs/docs/components/swipeable.md @@ -11,6 +11,11 @@ import GifGallery from '@site/components/GifGallery' +:::caution +This component is deprecated. +Please use [the reanimated version](/react-native-gesture-handler/docs/components/reanimated_swipeable). +::: + This component allows for implementing swipeable rows or similar interaction. It renders its children within a panable container allows for horizontal swiping left and right. While swiping one of two "action" containers can be shown depends on whether user swipes left or right (containers can be rendered by `renderLeftActions` or `renderRightActions` props). ### Usage: From f16b01e1da8ef440e62145d56ad8617ee7ab5a02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Fri, 28 Jun 2024 13:15:28 +0200 Subject: [PATCH 04/10] replace usage of AnimatedValue --- docs/docs/components/reanimated_swipeable.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/docs/components/reanimated_swipeable.md b/docs/docs/components/reanimated_swipeable.md index 2de8b84bfe..91c93b7fcb 100644 --- a/docs/docs/components/reanimated_swipeable.md +++ b/docs/docs/components/reanimated_swipeable.md @@ -83,10 +83,12 @@ an argument. method that is expected to return an action panel that is going to be revealed from the left side when user swipes right. This map describes the values to use as inputRange for extra interpolation: -AnimatedValue: [startValue, endValue] -progressAnimatedValue: [0, 1] -dragAnimatedValue: [0, +] +SharedValue: [startValue, endValue] + +progress: [0, 1] + +drag: [0, +] To support `rtl` flexbox layouts use `flexDirection` styling. @@ -94,10 +96,12 @@ To support `rtl` flexbox layouts use `flexDirection` styling. method that is expected to return an action panel that is going to be revealed from the right side when user swipes left. This map describes the values to use as inputRange for extra interpolation: -AnimatedValue: [startValue, endValue] -progressAnimatedValue: [0, 1] -dragAnimatedValue: [0, -] +SharedValue: [startValue, endValue] + +progress: [0, 1] + +drag: [0, -] To support `rtl` flexbox layouts use `flexDirection` styling. From da4268427a8498e4ebee371b0c4f475c88b2ad52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Fri, 28 Jun 2024 13:21:32 +0200 Subject: [PATCH 05/10] add deprecation notice to the old swipeable --- src/components/Swipeable.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Swipeable.tsx b/src/components/Swipeable.tsx index e464540e5a..4639ae28f3 100644 --- a/src/components/Swipeable.tsx +++ b/src/components/Swipeable.tsx @@ -3,7 +3,7 @@ // move faster and fix possible issues quicker import * as React from 'react'; -import { Component } from 'react'; +import { Component, useEffect } from 'react'; import { Animated, StyleSheet, @@ -496,6 +496,12 @@ export default class Swipeable extends Component< }; render() { + useEffect(() => { + console.warn( + 'Warning: Swipeable is deprecated. Please use ReanimatedSwipeable instead.' + ); + }, []); + const { rowState } = this.state; const { children, From 73e19285cfca07277f1c3671997dd9c1a9a64014 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Fri, 28 Jun 2024 13:27:20 +0200 Subject: [PATCH 06/10] move deprecation notice to constructor --- src/components/Swipeable.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/Swipeable.tsx b/src/components/Swipeable.tsx index 4639ae28f3..2f3b1fec35 100644 --- a/src/components/Swipeable.tsx +++ b/src/components/Swipeable.tsx @@ -3,7 +3,7 @@ // move faster and fix possible issues quicker import * as React from 'react'; -import { Component, useEffect } from 'react'; +import { Component } from 'react'; import { Animated, StyleSheet, @@ -233,6 +233,10 @@ export default class Swipeable extends Component< }; constructor(props: SwipeableProps) { + console.warn( + 'Warning: Swipeable is deprecated. Please use ReanimatedSwipeable instead.' + ); + super(props); const dragX = new Animated.Value(0); this.state = { @@ -496,12 +500,6 @@ export default class Swipeable extends Component< }; render() { - useEffect(() => { - console.warn( - 'Warning: Swipeable is deprecated. Please use ReanimatedSwipeable instead.' - ); - }, []); - const { rowState } = this.state; const { children, From 526e079a73085da0dab29b7d7a65503fa75c8660 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Mon, 1 Jul 2024 15:40:58 +0200 Subject: [PATCH 07/10] add deprecation docstring to swipeable --- src/components/Swipeable.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/Swipeable.tsx b/src/components/Swipeable.tsx index 2f3b1fec35..14e1e39208 100644 --- a/src/components/Swipeable.tsx +++ b/src/components/Swipeable.tsx @@ -222,6 +222,12 @@ type SwipeableState = { rowWidth?: number; }; +/** + * @deprecated use Reanimated version of Swipeable instead + * + * This component allows for implementing swipeable rows or similar interaction. + */ + export default class Swipeable extends Component< SwipeableProps, SwipeableState From fdcede8e7e098233484a3eb72ee5f1ecfd9d75e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Mon, 1 Jul 2024 17:31:27 +0200 Subject: [PATCH 08/10] remove console deprecation warn --- src/components/Swipeable.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Swipeable.tsx b/src/components/Swipeable.tsx index 14e1e39208..281812d580 100644 --- a/src/components/Swipeable.tsx +++ b/src/components/Swipeable.tsx @@ -239,10 +239,6 @@ export default class Swipeable extends Component< }; constructor(props: SwipeableProps) { - console.warn( - 'Warning: Swipeable is deprecated. Please use ReanimatedSwipeable instead.' - ); - super(props); const dragX = new Animated.Value(0); this.state = { From b8298521685bb95059dce1b6fd9fb6f6183a7e54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Tue, 2 Jul 2024 13:22:48 +0200 Subject: [PATCH 09/10] encapsulate numbers into code blocks --- docs/docs/components/swipeable.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/docs/components/swipeable.md b/docs/docs/components/swipeable.md index 17f814f1c1..21a0b05297 100644 --- a/docs/docs/components/swipeable.md +++ b/docs/docs/components/swipeable.md @@ -30,7 +30,7 @@ import Swipeable from 'react-native-gesture-handler/Swipeable'; ### `friction` -a number that specifies how much the visual interaction will be delayed compared to the gesture distance. e.g. value of 1 will indicate that the swipeable panel should exactly follow the gesture, 2 means it is going to be two times "slower". +a number that specifies how much the visual interaction will be delayed compared to the gesture distance. e.g. value of `1` will indicate that the swipeable panel should exactly follow the gesture, `2` means it is going to be two times "slower". ### `leftThreshold` @@ -42,11 +42,11 @@ distance from the right edge at which released panel will animate to the open st ### `dragOffsetFromLeftEdge` -distance that the panel must be dragged from the left edge to be considered a swipe. The default value is 10. +distance that the panel must be dragged from the left edge to be considered a swipe. The default value is `10`. ### `dragOffsetFromRightEdge` -distance that the panel must be dragged from the right edge to be considered a swipe. The default value is 10. +distance that the panel must be dragged from the right edge to be considered a swipe. The default value is `10`. ### `overshootLeft` @@ -58,7 +58,7 @@ a boolean value indicating if the swipeable panel can be pulled further than the ### `overshootFriction` -a number that specifies how much the visual interaction will be delayed compared to the gesture distance at overshoot. Default value is 1, it mean no friction, for a native feel, try 8 or above. +a number that specifies how much the visual interaction will be delayed compared to the gesture distance at overshoot. Default value is `1`, it mean no friction, for a native feel, try `8` or above. ### `onSwipeableLeftOpen` @@ -118,8 +118,8 @@ method that is expected to return an action panel that is going to be revealed f This map describes the values to use as inputRange for extra interpolation: AnimatedValue: [startValue, endValue] -progressAnimatedValue: [0, 1] -dragAnimatedValue: [0, +] +progressAnimatedValue: `[0, 1]` +dragAnimatedValue: `[0, +]` To support `rtl` flexbox layouts use `flexDirection` styling. @@ -129,8 +129,8 @@ method that is expected to return an action panel that is going to be revealed f This map describes the values to use as inputRange for extra interpolation: AnimatedValue: [startValue, endValue] -progressAnimatedValue: [0, 1] -dragAnimatedValue: [0, -] +progressAnimatedValue: `[0, 1]` +dragAnimatedValue: `[0, -]` To support `rtl` flexbox layouts use `flexDirection` styling. From 673e037b977fa586ac3ada235ee501b91b4e2320 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Tue, 2 Jul 2024 13:25:57 +0200 Subject: [PATCH 10/10] Change all sentences to use Uppercase first letter --- docs/docs/components/swipeable.md | 48 +++++++++++++++---------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/docs/components/swipeable.md b/docs/docs/components/swipeable.md index 21a0b05297..da9bbc5593 100644 --- a/docs/docs/components/swipeable.md +++ b/docs/docs/components/swipeable.md @@ -30,35 +30,35 @@ import Swipeable from 'react-native-gesture-handler/Swipeable'; ### `friction` -a number that specifies how much the visual interaction will be delayed compared to the gesture distance. e.g. value of `1` will indicate that the swipeable panel should exactly follow the gesture, `2` means it is going to be two times "slower". +A number that specifies how much the visual interaction will be delayed compared to the gesture distance. e.g. value of `1` will indicate that the swipeable panel should exactly follow the gesture, `2` means it is going to be two times "slower". ### `leftThreshold` -distance from the left edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width. +Distance from the left edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width. ### `rightThreshold` -distance from the right edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width. +Distance from the right edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width. ### `dragOffsetFromLeftEdge` -distance that the panel must be dragged from the left edge to be considered a swipe. The default value is `10`. +Distance that the panel must be dragged from the left edge to be considered a swipe. The default value is `10`. ### `dragOffsetFromRightEdge` -distance that the panel must be dragged from the right edge to be considered a swipe. The default value is `10`. +Distance that the panel must be dragged from the right edge to be considered a swipe. The default value is `10`. ### `overshootLeft` -a boolean value indicating if the swipeable panel can be pulled further than the left actions panel's width. It is set to `true` by default as long as the left panel render method is present. +A boolean value indicating if the swipeable panel can be pulled further than the left actions panel's width. It is set to `true` by default as long as the left panel render method is present. ### `overshootRight` -a boolean value indicating if the swipeable panel can be pulled further than the right actions panel's width. It is set to `true` by default as long as the right panel render method is present. +A boolean value indicating if the swipeable panel can be pulled further than the right actions panel's width. It is set to `true` by default as long as the right panel render method is present. ### `overshootFriction` -a number that specifies how much the visual interaction will be delayed compared to the gesture distance at overshoot. Default value is `1`, it mean no friction, for a native feel, try `8` or above. +A number that specifies how much the visual interaction will be delayed compared to the gesture distance at overshoot. Default value is `1`, it mean no friction, for a native feel, try `8` or above. ### `onSwipeableLeftOpen` @@ -66,7 +66,7 @@ a number that specifies how much the visual interaction will be delayed compared This callback is deprecated and will be removed in the next version. Please use `onSwipeableOpen(direction)` ::: -method that is called when left action panel gets open. +Method that is called when left action panel gets open. ### `onSwipeableRightOpen` @@ -74,16 +74,16 @@ method that is called when left action panel gets open. This callback is deprecated and will be removed in the next version. Please use `onSwipeableOpen(direction)` ::: -method that is called when right action panel gets open. +Method that is called when right action panel gets open. ### `onSwipeableOpen` -method that is called when action panel gets open (either right or left). Takes swipe direction as +Method that is called when action panel gets open (either right or left). Takes swipe direction as an argument. ### `onSwipeableClose` -method that is called when action panel is closed. Takes swipe direction as +Method that is called when action panel is closed. Takes swipe direction as an argument. ### `onSwipeableLeftWillOpen` @@ -92,7 +92,7 @@ an argument. This callback is deprecated and will be removed in the next version. Please use `onSwipeableWillOpen(direction)` ::: -method that is called when left action panel starts animating on open. +Method that is called when left action panel starts animating on open. ### `onSwipeableRightWillOpen` @@ -100,21 +100,21 @@ method that is called when left action panel starts animating on open. This callback is deprecated and will be removed in the next version. Please use `onSwipeableWillOpen(direction)` ::: -method that is called when right action panel starts animating on open. +Method that is called when right action panel starts animating on open. ### `onSwipeableWillOpen` -method that is called when action panel starts animating on open (either right or left). Takes swipe direction as +Method that is called when action panel starts animating on open (either right or left). Takes swipe direction as an argument. ### `onSwipeableWillClose` -method that is called when action panel starts animating on close. Takes swipe direction as +Method that is called when action panel starts animating on close. Takes swipe direction as an argument. ### `renderLeftActions` -method that is expected to return an action panel that is going to be revealed from the left side when user swipes right. +Method that is expected to return an action panel that is going to be revealed from the left side when user swipes right. This map describes the values to use as inputRange for extra interpolation: AnimatedValue: [startValue, endValue] @@ -125,7 +125,7 @@ To support `rtl` flexbox layouts use `flexDirection` styling. ### `renderRightActions` -method that is expected to return an action panel that is going to be revealed from the right side when user swipes left. +Method that is expected to return an action panel that is going to be revealed from the right side when user swipes left. This map describes the values to use as inputRange for extra interpolation: AnimatedValue: [startValue, endValue] @@ -136,11 +136,11 @@ To support `rtl` flexbox layouts use `flexDirection` styling. ### `containerStyle` -style object for the container (Animated.View), for example to override `overflow: 'hidden'`. +Style object for the container (Animated.View), for example to override `overflow: 'hidden'`. ### `childrenContainerStyle` -style object for the children container (Animated.View), for example to apply `flex: 1`. +Style object for the children container (Animated.View), for example to apply `flex: 1`. ### `enableTrackpadTwoFingerGesture` (iOS only) @@ -169,19 +169,19 @@ Using reference to `Swipeable` it's possible to trigger some actions on it ### `close` -method that closes component. +Method that closes component. ### `openLeft` -method that opens component on left side. +Method that opens component on left side. ### `openRight` -method that opens component on right side. +Method that opens component on right side. ### `reset` -method that resets the swiping states of this `Swipeable` component. +Method that resets the swiping states of this `Swipeable` component. Unlike method `close`, this method does not trigger any animation.