diff --git a/README.md b/README.md index fd52b92..b56e206 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ function MyListItem() { | `rightButtonWidth` | integer | 75 | (optional) resting visible peek of each right button after buttons are swiped open | | `onRef` | function | `null` | (optional) receive swipeable component instance reference | | `onPanAnimatedValueRef` | function | `null` | (optional) receive swipeable pan `Animated.ValueXY` reference for upstream animations | +| `bounceOnMount` | boolean | `false` | (optional) To alert the user that swiping is possible | ### Advanced Props @@ -80,6 +81,14 @@ class MyListItem extends Component { } ``` +#### bounceRight(onDone) + +Bounce the right component to alert swiping is possible. `onDone` is an optional callback. + +#### bounceLeft(onDone) + +Bounce the left component to alert swiping is possible. `onDone` is an optional callback. + ## Example To run [the example](https://github.com/jshanson7/react-native-swipeable/blob/master/example/swipeable-example.js): diff --git a/src/index.js b/src/index.js index d77cf98..a577beb 100644 --- a/src/index.js +++ b/src/index.js @@ -151,7 +151,8 @@ export default class Swipeable extends PureComponent { // misc onRef: noop, onPanAnimatedValueRef: noop, - swipeStartMinDistance: 15 + swipeStartMinDistance: 15, + bounceOnMount: false }; state = { @@ -173,6 +174,12 @@ export default class Swipeable extends PureComponent { onPanAnimatedValueRef(this.state.pan); } + componentDidMount() { + if (this.props.bounceOnMount) { + setTimeout(this._bounceOnMount, 700); + } + } + componentWillUnmount() { this._unmounted = true; } @@ -199,6 +206,48 @@ export default class Swipeable extends PureComponent { animationFn(pan, animationConfig).start(onDone); }; + _bounceOnMount = () => { + if (this._canSwipeLeft()) { + this.bounceRight(this.bounceLeft); + } else if (this._canSwipeRight()) { + this.bounceLeft(); + } + }; + + bounceRight = (onDone) => { + if (this._canSwipeLeft()) { + this.setState({ + rightActionActivated: true, + rightButtonsActivated: true, + rightButtonsOpen: true + }); + this._bounce({x: -50, y: 0}, onDone); + } + }; + + bounceLeft = (onDone) => { + if (this._canSwipeRight()) { + this.setState({ + leftActionActivated: true, + leftButtonsActivated: true, + leftButtonsOpen: true + }); + this._bounce({x: 50, y: 0}, onDone); + } + }; + + _bounce = (toValue, onDone) => { + const {pan} = this.state; + pan.flattenOffset(); + + const {swipeReleaseAnimationFn, swipeReleaseAnimationConfig} = this.props; + Animated.timing(pan, { + toValue, + duration: 250, + easing: Easing.elastic(0.5) + }).start(() => this.recenter(swipeReleaseAnimationFn, swipeReleaseAnimationConfig, () => onDone && onDone())); + }; + _unmounted = false; _handlePan = Animated.event([null, {