From 50de294b969d1a6e2e92725f660076a3918c31bb Mon Sep 17 00:00:00 2001 From: Muhamad Rizki Date: Wed, 15 Aug 2018 13:27:12 +0700 Subject: [PATCH 1/4] fix performance issue on android --- src/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index d77cf98..a9ef442 100644 --- a/src/index.js +++ b/src/index.js @@ -145,7 +145,8 @@ export default class Swipeable extends PureComponent { swipeReleaseAnimationConfig: { toValue: {x: 0, y: 0}, duration: 250, - easing: Easing.elastic(0.5) + easing: Easing.elastic(0.5), + useNativeDriver: true, }, // misc @@ -213,6 +214,7 @@ export default class Swipeable extends PureComponent { _handlePanResponderStart = (event, gestureState) => { const {lastOffset, pan} = this.state; + pan.setValue({x: 0, y: 0}); pan.setOffset(lastOffset); this.props.onSwipeStart(event, gestureState, this); }; From b95ebd6f45dc0ad2ca3327a4d8c615a3768c8017 Mon Sep 17 00:00:00 2001 From: Muhamad Rizki Date: Wed, 15 Aug 2018 15:32:14 +0700 Subject: [PATCH 2/4] fix package json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cb0e27d..4f2f2a3 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-native-swipeable", "version": "0.6.0", "description": "A powerful React Native swipe component", - "main": "lib/index.js", + "main": "src/index.js", "scripts": { "build": "make build", "lint": "make lint" From a5d5c50de8a2f879a3650ffaaca6856d3776912c Mon Sep 17 00:00:00 2001 From: Muhamad Rizki Date: Thu, 16 Aug 2018 09:00:27 +0700 Subject: [PATCH 3/4] fixing recenter method --- src/index.js | 52 ++++++++++++++++++++++++++++------------------------ 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/src/index.js b/src/index.js index a9ef442..33837fd 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,10 @@ /* eslint-disable import/no-unresolved, import/extensions */ -import React, {PureComponent} from 'react'; -import {Animated, Easing, PanResponder, StyleSheet, View, ViewPropTypes} from 'react-native'; -import {PropTypes} from 'prop-types'; +import React, { PureComponent } from 'react'; +import { Animated, Easing, PanResponder, StyleSheet, View, ViewPropTypes } from 'react-native'; +import { PropTypes } from 'prop-types'; /* eslint-enable import/no-unresolved, import/extensions */ -function noop() {} +function noop() { } export default class Swipeable extends PureComponent { @@ -143,7 +143,7 @@ export default class Swipeable extends PureComponent { onSwipeComplete: noop, swipeReleaseAnimationFn: Animated.timing, swipeReleaseAnimationConfig: { - toValue: {x: 0, y: 0}, + toValue: { x: 0, y: 0 }, duration: 250, easing: Easing.elastic(0.5), useNativeDriver: true, @@ -158,7 +158,7 @@ export default class Swipeable extends PureComponent { state = { pan: new Animated.ValueXY(), width: 0, - lastOffset: {x: 0, y: 0}, + lastOffset: { x: 0, y: 0 }, leftActionActivated: false, leftButtonsActivated: false, leftButtonsOpen: false, @@ -168,7 +168,7 @@ export default class Swipeable extends PureComponent { }; componentWillMount() { - const {onPanAnimatedValueRef, onRef} = this.props; + const { onPanAnimatedValueRef, onRef } = this.props; onRef(this); onPanAnimatedValueRef(this.state.pan); @@ -183,10 +183,10 @@ export default class Swipeable extends PureComponent { animationConfig = this.props.swipeReleaseAnimationConfig, onDone ) => { - const {pan} = this.state; + const { pan } = this.state; this.setState({ - lastOffset: {x: 0, y: 0}, + lastOffset: { x: 0, y: 0 }, leftActionActivated: false, leftButtonsActivated: false, leftButtonsOpen: false, @@ -197,7 +197,11 @@ export default class Swipeable extends PureComponent { pan.flattenOffset(); - animationFn(pan, animationConfig).start(onDone); + if (animationFn && animationConfig && onDone) { + animationFn(pan, animationConfig).start(onDone); + } else { + swipeReleaseAnimationFn(pan, swipeReleaseAnimationConfig).start(onDone); + } }; _unmounted = false; @@ -212,9 +216,9 @@ export default class Swipeable extends PureComponent { ); _handlePanResponderStart = (event, gestureState) => { - const {lastOffset, pan} = this.state; + const { lastOffset, pan } = this.state; - pan.setValue({x: 0, y: 0}); + pan.setValue({ x: 0, y: 0 }); pan.setOffset(lastOffset); this.props.onSwipeStart(event, gestureState, this); }; @@ -242,7 +246,7 @@ export default class Swipeable extends PureComponent { rightActionActivated, rightButtonsActivated } = this.state; - const {dx, vx} = gestureState; + const { dx, vx } = gestureState; const x = dx + lastOffset.x; const canSwipeRight = this._canSwipeRight(); const canSwipeLeft = this._canSwipeLeft(); @@ -365,7 +369,7 @@ export default class Swipeable extends PureComponent { } this.setState({ - lastOffset: {x: animationConfig.toValue.x, y: animationConfig.toValue.y}, + lastOffset: { x: animationConfig.toValue.x, y: animationConfig.toValue.y }, leftActionActivated: false, rightActionActivated: false, leftButtonsOpen: leftButtonsActivated, @@ -429,7 +433,7 @@ export default class Swipeable extends PureComponent { onPanResponderTerminationRequest: this._handlePanResponderEnd }); - _handleLayout = ({nativeEvent: {layout: {width}}}) => this.setState({width}); + _handleLayout = ({ nativeEvent: { layout: { width } } }) => this.setState({ width }); _canSwipeRight() { return this.props.leftContent || this._hasLeftButtons(); @@ -440,13 +444,13 @@ export default class Swipeable extends PureComponent { } _hasLeftButtons() { - const {leftButtons, leftContent} = this.props; + const { leftButtons, leftContent } = this.props; return !leftContent && leftButtons && leftButtons.length; } _hasRightButtons() { - const {rightButtons, rightContent} = this.props; + const { rightButtons, rightContent } = this.props; return !rightContent && rightButtons && rightButtons.length; } @@ -562,8 +566,8 @@ export default class Swipeable extends PureComponent { } _renderButtons(buttons, isLeftButtons) { - const {leftButtonContainerStyle, rightButtonContainerStyle} = this.props; - const {pan, width} = this.state; + const { leftButtonContainerStyle, rightButtonContainerStyle } = this.props; + const { pan, width } = this.state; const canSwipeLeft = this._canSwipeLeft(); const canSwipeRight = this._canSwipeRight(); const count = buttons.length; @@ -583,7 +587,7 @@ export default class Swipeable extends PureComponent { }]; const buttonStyle = [ StyleSheet.absoluteFill, - {width, transform}, + { width, transform }, isLeftButtons ? leftButtonContainerStyle : rightButtonContainerStyle ]; @@ -608,7 +612,7 @@ export default class Swipeable extends PureComponent { style, ...props } = this.props; - const {pan, width} = this.state; + const { pan, width } = this.state; const canSwipeLeft = this._canSwipeLeft(); const canSwipeRight = this._canSwipeRight(); const transform = [{ @@ -625,13 +629,13 @@ export default class Swipeable extends PureComponent { return ( {canSwipeRight && ( - + {leftContent || this._renderButtons(leftButtons, true)} )} - {children} + {children} {canSwipeLeft && ( - + {rightContent || this._renderButtons(rightButtons, false)} )} From ca62a6445deeb15081ddd008555ab02c839105d0 Mon Sep 17 00:00:00 2001 From: Muhamad Rizki Date: Thu, 16 Aug 2018 09:28:52 +0700 Subject: [PATCH 4/4] fixing recenter method --- src/index.js | 52 ++++++++++++++++++++++++++++------------------------ 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/src/index.js b/src/index.js index a9ef442..b67eaf7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,10 @@ /* eslint-disable import/no-unresolved, import/extensions */ -import React, {PureComponent} from 'react'; -import {Animated, Easing, PanResponder, StyleSheet, View, ViewPropTypes} from 'react-native'; -import {PropTypes} from 'prop-types'; +import React, { PureComponent } from 'react'; +import { Animated, Easing, PanResponder, StyleSheet, View, ViewPropTypes } from 'react-native'; +import { PropTypes } from 'prop-types'; /* eslint-enable import/no-unresolved, import/extensions */ -function noop() {} +function noop() { } export default class Swipeable extends PureComponent { @@ -143,7 +143,7 @@ export default class Swipeable extends PureComponent { onSwipeComplete: noop, swipeReleaseAnimationFn: Animated.timing, swipeReleaseAnimationConfig: { - toValue: {x: 0, y: 0}, + toValue: { x: 0, y: 0 }, duration: 250, easing: Easing.elastic(0.5), useNativeDriver: true, @@ -158,7 +158,7 @@ export default class Swipeable extends PureComponent { state = { pan: new Animated.ValueXY(), width: 0, - lastOffset: {x: 0, y: 0}, + lastOffset: { x: 0, y: 0 }, leftActionActivated: false, leftButtonsActivated: false, leftButtonsOpen: false, @@ -168,7 +168,7 @@ export default class Swipeable extends PureComponent { }; componentWillMount() { - const {onPanAnimatedValueRef, onRef} = this.props; + const { onPanAnimatedValueRef, onRef } = this.props; onRef(this); onPanAnimatedValueRef(this.state.pan); @@ -183,10 +183,10 @@ export default class Swipeable extends PureComponent { animationConfig = this.props.swipeReleaseAnimationConfig, onDone ) => { - const {pan} = this.state; + const { pan } = this.state; this.setState({ - lastOffset: {x: 0, y: 0}, + lastOffset: { x: 0, y: 0 }, leftActionActivated: false, leftButtonsActivated: false, leftButtonsOpen: false, @@ -197,7 +197,11 @@ export default class Swipeable extends PureComponent { pan.flattenOffset(); - animationFn(pan, animationConfig).start(onDone); + if (animationFn && animationConfig && onDone) { + animationFn(pan, animationConfig).start(onDone); + } else { + this.props.swipeReleaseAnimationFn(pan, this.props.swipeReleaseAnimationConfig).start(onDone); + } }; _unmounted = false; @@ -212,9 +216,9 @@ export default class Swipeable extends PureComponent { ); _handlePanResponderStart = (event, gestureState) => { - const {lastOffset, pan} = this.state; + const { lastOffset, pan } = this.state; - pan.setValue({x: 0, y: 0}); + pan.setValue({ x: 0, y: 0 }); pan.setOffset(lastOffset); this.props.onSwipeStart(event, gestureState, this); }; @@ -242,7 +246,7 @@ export default class Swipeable extends PureComponent { rightActionActivated, rightButtonsActivated } = this.state; - const {dx, vx} = gestureState; + const { dx, vx } = gestureState; const x = dx + lastOffset.x; const canSwipeRight = this._canSwipeRight(); const canSwipeLeft = this._canSwipeLeft(); @@ -365,7 +369,7 @@ export default class Swipeable extends PureComponent { } this.setState({ - lastOffset: {x: animationConfig.toValue.x, y: animationConfig.toValue.y}, + lastOffset: { x: animationConfig.toValue.x, y: animationConfig.toValue.y }, leftActionActivated: false, rightActionActivated: false, leftButtonsOpen: leftButtonsActivated, @@ -429,7 +433,7 @@ export default class Swipeable extends PureComponent { onPanResponderTerminationRequest: this._handlePanResponderEnd }); - _handleLayout = ({nativeEvent: {layout: {width}}}) => this.setState({width}); + _handleLayout = ({ nativeEvent: { layout: { width } } }) => this.setState({ width }); _canSwipeRight() { return this.props.leftContent || this._hasLeftButtons(); @@ -440,13 +444,13 @@ export default class Swipeable extends PureComponent { } _hasLeftButtons() { - const {leftButtons, leftContent} = this.props; + const { leftButtons, leftContent } = this.props; return !leftContent && leftButtons && leftButtons.length; } _hasRightButtons() { - const {rightButtons, rightContent} = this.props; + const { rightButtons, rightContent } = this.props; return !rightContent && rightButtons && rightButtons.length; } @@ -562,8 +566,8 @@ export default class Swipeable extends PureComponent { } _renderButtons(buttons, isLeftButtons) { - const {leftButtonContainerStyle, rightButtonContainerStyle} = this.props; - const {pan, width} = this.state; + const { leftButtonContainerStyle, rightButtonContainerStyle } = this.props; + const { pan, width } = this.state; const canSwipeLeft = this._canSwipeLeft(); const canSwipeRight = this._canSwipeRight(); const count = buttons.length; @@ -583,7 +587,7 @@ export default class Swipeable extends PureComponent { }]; const buttonStyle = [ StyleSheet.absoluteFill, - {width, transform}, + { width, transform }, isLeftButtons ? leftButtonContainerStyle : rightButtonContainerStyle ]; @@ -608,7 +612,7 @@ export default class Swipeable extends PureComponent { style, ...props } = this.props; - const {pan, width} = this.state; + const { pan, width } = this.state; const canSwipeLeft = this._canSwipeLeft(); const canSwipeRight = this._canSwipeRight(); const transform = [{ @@ -625,13 +629,13 @@ export default class Swipeable extends PureComponent { return ( {canSwipeRight && ( - + {leftContent || this._renderButtons(leftButtons, true)} )} - {children} + {children} {canSwipeLeft && ( - + {rightContent || this._renderButtons(rightButtons, false)} )}