diff --git a/README.md b/README.md index 30c3eb5..65ed85d 100644 --- a/README.md +++ b/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 diff --git a/index.js b/index.js index 6bd630b..4b9686b 100644 --- a/index.js +++ b/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 = ( {this.props.children} @@ -473,6 +471,7 @@ class SwipeableView extends Component { return ( (this._swipeoutRef = ref) } + onLayout={this._measureSwipeout} {...this._panResponder.panHandlers} collapsable={false}> {btnsArray}