Adds ability to bounce on mount

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):

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, {