From d257a3fc537709c47f8de523af6ab04653ac69ed Mon Sep 17 00:00:00 2001 From: ofer morag Date: Mon, 15 Jan 2018 11:27:14 +0200 Subject: [PATCH 1/4] =?UTF-8?q?=E2=80=93=20Support=20manual=20flip=20?= =?UTF-8?q?=E2=80=93=20Support=20`activeOpacity`=20customization?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/FlipCard.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/lib/FlipCard.js b/lib/FlipCard.js index 21cbd5f..d07d782 100644 --- a/lib/FlipCard.js +++ b/lib/FlipCard.js @@ -32,10 +32,10 @@ export default class FlipCard extends Component { } componentWillReceiveProps (nextProps) { if (this.state.isFlipped !== nextProps.flip) { - this._toggleCard() + this.toggleCard() } } - _toggleCard () { + toggleCard () { this.setState({isFlipping: true}) this.props.onFlipStart(this.state.isFlipped) this._animation(!this.state.isFlipped) @@ -77,6 +77,14 @@ export default class FlipCard extends Component { }) } + _onPress() { + if (this.props.shouldFlipOnUserTap) { + this.toggleCard() + } else { + this.props.onPress() + } + } + render () { var c = this.props.children; var transform = this.props.perspective ? [{ perspective: this.props.perspective }] : [] @@ -162,8 +170,8 @@ export default class FlipCard extends Component { return ( { this._toggleCard(); }} + activeOpacity={ this.props.activeOpacity } + onPress={ this._onPress.bind(this) } > {}, + onPress: () => {} } From ac3a70b5301f96fb77c9288fddade28bc6667286 Mon Sep 17 00:00:00 2001 From: ofer morag Date: Mon, 15 Jan 2018 11:33:40 +0200 Subject: [PATCH 2/4] Removed unused change --- lib/FlipCard.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/lib/FlipCard.js b/lib/FlipCard.js index d07d782..a35ff59 100644 --- a/lib/FlipCard.js +++ b/lib/FlipCard.js @@ -32,10 +32,10 @@ export default class FlipCard extends Component { } componentWillReceiveProps (nextProps) { if (this.state.isFlipped !== nextProps.flip) { - this.toggleCard() + this._toggleCard() } } - toggleCard () { + _toggleCard () { this.setState({isFlipping: true}) this.props.onFlipStart(this.state.isFlipped) this._animation(!this.state.isFlipped) @@ -79,7 +79,7 @@ export default class FlipCard extends Component { _onPress() { if (this.props.shouldFlipOnUserTap) { - this.toggleCard() + this._toggleCard() } else { this.props.onPress() } @@ -216,7 +216,6 @@ FlipCard.propTypes = { alignWidth: PropTypes.bool, useNativeDriver: PropTypes.bool, shouldFlipOnUserTap: PropTypes.bool, - toggleCard: PropTypes.func, onPress: PropTypes.func, activeOpacity: PropTypes.number, children (props, propName, componentName) { @@ -246,7 +245,6 @@ FlipCard.defaultProps = { useNativeDriver: true, shouldFlipOnUserTap: true, activeOpacity: 1.0, - toggleCard: () => {}, onPress: () => {} } From 5cf20182e3e31ae60b74d834643a7e53452fe9ba Mon Sep 17 00:00:00 2001 From: ofer morag Date: Tue, 16 Jan 2018 12:21:29 +0200 Subject: [PATCH 3/4] =?UTF-8?q?Android:=20=E2=80=93=20Fix=20crashed=20due?= =?UTF-8?q?=20to=20passing=20`perspective`=20value=20of=200=20=E2=80=93=20?= =?UTF-8?q?Fix=20flip=20animation=20not=20working=20well?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/FlipCard.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/lib/FlipCard.js b/lib/FlipCard.js index a35ff59..86f3718 100644 --- a/lib/FlipCard.js +++ b/lib/FlipCard.js @@ -36,17 +36,11 @@ export default class FlipCard extends Component { } } _toggleCard () { - this.setState({isFlipping: true}) + this.setState({isFlipping: true, isFlipped: !this.state.isFlipped}) this.props.onFlipStart(this.state.isFlipped) this._animation(!this.state.isFlipped) } - _animation (isFlipped) { - if (!this.timer) { - this.timer = setTimeout(() => { - this.setState({isFlipped: !this.state.isFlipped}) - this.timer = null - }, 120) - } + _animation (isFlipped) { Animated.spring(this.state.rotate, { toValue: Number(isFlipped), @@ -234,7 +228,7 @@ FlipCard.propTypes = { FlipCard.defaultProps = { flip: false, friction: 6, - perspective: 0, + perspective: (Platform.OS === "android") ? 1000 : 0, flipHorizontal: false, flipVertical: true, clickable: true, @@ -309,4 +303,4 @@ Back.propTypes = { perspective: PropTypes.number, children (props, propName, componentName) { } -} +} \ No newline at end of file From b11e5011033daa22829b584cb0dd6c2c806f2932 Mon Sep 17 00:00:00 2001 From: ofer morag Date: Tue, 16 Jan 2018 17:01:56 +0200 Subject: [PATCH 4/4] Reverted back the state change, as it seems that this bug only happens in the emulator --- lib/FlipCard.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/lib/FlipCard.js b/lib/FlipCard.js index 86f3718..4838280 100644 --- a/lib/FlipCard.js +++ b/lib/FlipCard.js @@ -36,11 +36,18 @@ export default class FlipCard extends Component { } } _toggleCard () { - this.setState({isFlipping: true, isFlipped: !this.state.isFlipped}) + this.setState({isFlipping: true}) this.props.onFlipStart(this.state.isFlipped) this._animation(!this.state.isFlipped) } _animation (isFlipped) { + if (!this.timer) { + this.timer = setTimeout(() => { + this.setState({isFlipped: !this.state.isFlipped}) + this.timer = null + }, 120) + } + Animated.spring(this.state.rotate, { toValue: Number(isFlipped),