Modernize code and update to support newer versions of RN without warnings.

README.md

@@ -11,6 +11,8 @@ The code is based on the experimental SwipeableListView of react-native.
 npm install --save react-native-swipeable-view
 ```
 
+If using React Native < 0.54, you must stay at <= 1.0.0.
+
 ## Usage example
 
 ```
@@ -36,7 +38,7 @@ var btnsArray = [
 
 Prop                | Type   | Optional | Default   | Description
 ------------------- | ------ | -------- | --------- | -----------
-isOpen              | bool   | Yes      | false     | Swipeout is open or not
+isOpen              | bool   | Yes      | false     | Swipeout is open or not. CHanging this value will animate the Swipeout open or closed.
 autoClose           | bool   | Yes      | false     | Auto-Close on button press
 btnsArray           | array  | No       | []        | Swipe buttons array
 onOpen              | func   | Yes      |           | Callback when swipe is opened

index.js

@@ -125,16 +125,14 @@ class SwipeableView extends Component {
     };
 
     this._swipeoutRef = null;
-  }
 
-  componentWillMount() {
     this._panResponder = PanResponder.create({
-      onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture.bind(this),
-      onPanResponderGrant: this._handlePanResponderGrant.bind(this),
-      onPanResponderMove: this._handlePanResponderMove.bind(this),
-      onPanResponderRelease: this._handlePanResponderEnd.bind(this),
-      onPanResponderTerminationRequest: this._onPanResponderTerminationRequest.bind(this),
-      onPanResponderTerminate: this._handlePanResponderEnd.bind(this),
+      onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture,
+      onPanResponderGrant: this._handlePanResponderGrant,
+      onPanResponderMove: this._handlePanResponderMove,
+      onPanResponderRelease: this._handlePanResponderEnd,
+      onPanResponderTerminationRequest: this._onPanResponderTerminationRequest,
+      onPanResponderTerminate: this._handlePanResponderEnd,
       onShouldBlockNativeResponder: () => false,
     });
   }
@@ -151,8 +149,6 @@ class SwipeableView extends Component {
         this._animateBounceBack(ON_MOUNT_BOUNCE_DURATION);
       }, ON_MOUNT_BOUNCE_DELAY);
     }
-
-    setTimeout(this._measureSwipeout.bind(this));
   }
 
   componentWillUnmount() {
@@ -161,14 +157,16 @@ class SwipeableView extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     const { isOpen } = this.props;
     /**
      * We do not need an "animateOpen(noCallback)" because this animation is
      * handled internally by this component.
      */
-    if (isOpen && !nextProps.isOpen) {
+    if (prevProps.isOpen && !isOpen) {
       this._animateToClosedPosition();
+    } else if (!prevProps.isOpen && isOpen) {
+      this._animateToOpenPosition();
     }
   }
 
@@ -183,7 +181,7 @@ class SwipeableView extends Component {
     return true;
   }
 
-  _onPanResponderTerminationRequest() {
+  _onPanResponderTerminationRequest = () => {
     return false;
   }
 
@@ -204,7 +202,7 @@ class SwipeableView extends Component {
     this._animateTo(CLOSED_LEFT_POSITION, duration);
   }
 
-  _animateToClosedPositionDuringBounce() {
+  _animateToClosedPositionDuringBounce = () => {
     this._animateToClosedPosition(RIGHT_SWIPE_BOUNCE_BACK_DURATION);
   }
 
@@ -246,7 +244,7 @@ class SwipeableView extends Component {
     this._animateTo(
       -swipeBounceBackDistance,
       duration,
-      this._animateToClosedPositionDuringBounce.bind(this),
+      this._animateToClosedPositionDuringBounce,
     );
   }
 
@@ -261,7 +259,7 @@ class SwipeableView extends Component {
     );
   }
 
-  _handlePanResponderEnd(event, gestureState) {
+  _handlePanResponderEnd = (event, gestureState) => {
     const { onOpen, onClose, onSwipeEnd, isRTL } = this.props;
     const horizontalDistance = isRTL ? -gestureState.dx : gestureState.dx;
 
@@ -319,7 +317,7 @@ class SwipeableView extends Component {
     );
   }
 
-  _handlePanResponderMove(event, gestureState) {
+  _handlePanResponderMove = (event, gestureState) => {
     const { onSwipeStart } = this.props;
 
     if (this._isSwipingExcessivelyRightFromClosedPosition(gestureState)) {
@@ -335,10 +333,10 @@ class SwipeableView extends Component {
     }
   }
 
-  _handlePanResponderGrant() {
+  _handlePanResponderGrant = () => {
   }
 
-  _handleMoveShouldSetPanResponderCapture(event, gestureState) {
+  _handleMoveShouldSetPanResponderCapture = (event, gestureState) => {
     // Decides whether a swipe is responded to by this component or its child
     return gestureState.dy < 10 && this._isValidSwipe(gestureState);
   }
@@ -392,7 +390,7 @@ class SwipeableView extends Component {
     }
   }
 
-  _measureSwipeout() {
+  _measureSwipeout = () => {
     if (this._swipeoutRef) {
       this._swipeoutRef.measure((a, b, width, height) => {
         const { btnsArray } = this.props;
@@ -417,7 +415,7 @@ class SwipeableView extends Component {
     };
   }
 
-  _onSwipeableViewLayout(event) {
+  _onSwipeableViewLayout = (event) => {
     this.setState({
       isSwipeableViewRendered: true,
       rowHeight: event.nativeEvent.layout.height,
@@ -464,7 +462,7 @@ class SwipeableView extends Component {
     // The swipeable item
     const swipeableView = (
       <Animated.View
-        onLayout={this._onSwipeableViewLayout.bind(this)}
+        onLayout={this._onSwipeableViewLayout}
         style={{transform: [{translateX: this.state.currentLeft}], backgroundColor: 'white'}}>
         {this.props.children}
       </Animated.View>
@@ -473,6 +471,7 @@ class SwipeableView extends Component {
     return (
       <View
         ref={ (ref) => (this._swipeoutRef = ref) }
+        onLayout={this._measureSwipeout}
         {...this._panResponder.panHandlers}
         collapsable={false}>
         {btnsArray}