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}