From baf5583fd535dd265ae7b308daf37d626061512a Mon Sep 17 00:00:00 2001 From: Mark Rickert Date: Wed, 24 Jun 2020 10:54:39 -0400 Subject: [PATCH 1/3] Update example package to always use the local version in the project isntead of ^1.0.4 --- Example/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Example/package.json b/Example/package.json index 8cbf580..27a9087 100644 --- a/Example/package.json +++ b/Example/package.json @@ -13,7 +13,7 @@ "react": "16.9.0", "react-lifecycles-compat": "^3.0.4", "react-native": "0.61.2", - "react-native-card-flip": "^1.0.4" + "react-native-card-flip": "../" }, "devDependencies": { "@babel/core": "^7.6.4", From 045c1b527a8cc4ee955835c6dd179f3d765fa4f4 Mon Sep 17 00:00:00 2001 From: Mark Rickert Date: Wed, 24 Jun 2020 11:11:48 -0400 Subject: [PATCH 2/3] Adds flipReverse property This allows the card to flip the opposite direction of default. Works on x & y flipDirection. Closes #7 Includes an example in the example app. --- CardFlip.js | 15 +++++++++------ Example/App.js | 16 +++++++++++++++- README.md | 1 + index.d.ts | 1 + 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/CardFlip.js b/CardFlip.js index 70f2683..3f1f7ed 100644 --- a/CardFlip.js +++ b/CardFlip.js @@ -15,7 +15,8 @@ class CardFlip extends Component { rotation: new Animated.ValueXY({ x: 50, y: 50 }), zoom: new Animated.Value(0), rotateOrientation: "", - flipDirection: "y" + flipDirection: "y", + flipReverse: false, } } @@ -213,7 +214,7 @@ class CardFlip extends Component { if (rotateOrientation === "x") { const aXRotation = rotation.x.interpolate({ inputRange: [0, 50, 100, 150], - outputRange: ["-180deg", "0deg", "180deg", "0deg"], + outputRange: this.props.flipReverse ? ["180deg", "0deg", "-180deg", "0deg"] : ["-180deg", "0deg", "180deg", "0deg"], extrapolate: "clamp" }); sideATransform.transform.push({ rotateX: aXRotation }); @@ -221,7 +222,7 @@ class CardFlip extends Component { // cardA Y-rotation const aYRotation = rotation.y.interpolate({ inputRange: [0, 50, 100, 150], - outputRange: ["-180deg", "0deg", "180deg", "0deg"], + outputRange: this.props.flipReverse ? ["180deg", "0deg", "-180deg", "0deg"] : ["-180deg", "0deg", "180deg", "0deg"], extrapolate: "clamp" }); sideATransform.transform.push({ rotateY: aYRotation }); @@ -247,7 +248,7 @@ class CardFlip extends Component { if (rotateOrientation === "x") { const bXRotation = rotation.x.interpolate({ inputRange: [0, 50, 100, 150], - outputRange: ["0deg", "-180deg", "-360deg", "180deg"], + outputRange: this.props.flipReverse ? ["0deg", "180deg", "360deg", "-180deg"] : ["0deg", "-180deg", "-360deg", "180deg"], extrapolate: "clamp" }); sideBTransform.transform.push({ rotateX: bXRotation }); @@ -256,14 +257,14 @@ class CardFlip extends Component { // cardB Y-rotation bYRotation = rotation.y.interpolate({ inputRange: [0, 50, 100, 150], - outputRange: ["0deg", "180deg", "0deg", "-180deg"], + outputRange: this.props.flipReverse ? ["0deg", "-180deg", "0deg", "180deg"] : ["0deg", "180deg", "0deg", "-180deg"], extrapolate: "clamp" }); } else { // cardB Y-rotation bYRotation = rotation.y.interpolate({ inputRange: [0, 50, 100, 150], - outputRange: ["0deg", "-180deg", "0deg", "180deg"], + outputRange: this.props.flipReverse ? ["0deg", "180deg", "0deg", "-180deg"] : ["0deg", "-180deg", "0deg", "180deg"], extrapolate: "clamp" }); } @@ -321,6 +322,7 @@ CardFlip.defaultProps = { duration: 500, flipZoom: 0.09, flipDirection: "y", + flipReverse: false, perspective: 800, onFlip: () => { }, onFlipStart: () => { }, @@ -336,6 +338,7 @@ CardFlip.propTypes = { duration: PropTypes.number, flipZoom: PropTypes.number, flipDirection: PropTypes.string, + flipReverse: PropTypes.bool, onFlip: PropTypes.func, onFlipEnd: PropTypes.func, onFlipStart: PropTypes.func, diff --git a/Example/App.js b/Example/App.js index 405a8fd..5f91de8 100644 --- a/Example/App.js +++ b/Example/App.js @@ -16,7 +16,7 @@ const App: () => React$Node = () => { activeOpacity={1} style={[styles.card, styles.card1]} onPress={() => this.card.flip()}> - AB + Regular React$Node = () => { CD + (this.card2 = card)}> + this.card2.flip()}> + flipReverse + + this.card2.flip()}> + CD + + ); }; diff --git a/README.md b/README.md index 2e95a09..5eba6b8 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ import CardFlip from 'react-native-card-flip'; | duration | number | flip duration | | 1000 | | flipZoom | number | zoom level on flip | | 0.09 | | flipDirection | string | the rotation axis. 'x' or 'y' | | 'y' | +| flipReverse | boolean | reverses flip direction | | false | | perspective | number | | | 800 | diff --git a/index.d.ts b/index.d.ts index a74e705..0342b0f 100644 --- a/index.d.ts +++ b/index.d.ts @@ -10,6 +10,7 @@ export type FlipCardProps = { duration?: number; flipZoom?: number; flipDirection?: FlipDirection; + flipReverse?: boolean; onFlip?: (index: number) => void; onFlipEnd?: (index: number) => void; onFlipStart?: (index: number) => void; From d189bc4676b0c428774249ef91e5f4e9b2e52d2f Mon Sep 17 00:00:00 2001 From: Mark Rickert Date: Wed, 24 Jun 2020 14:14:34 -0400 Subject: [PATCH 3/3] destructure `flipReverse` when using it from `state`. --- CardFlip.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/CardFlip.js b/CardFlip.js index 3f1f7ed..7477179 100644 --- a/CardFlip.js +++ b/CardFlip.js @@ -198,7 +198,7 @@ class CardFlip extends Component { getCardATransformation() { //0, 50, 100 - const { progress, rotation, side, rotateOrientation } = this.state; + const { progress, rotation, side, rotateOrientation, flipReverse } = this.state; const sideAOpacity = progress.interpolate({ inputRange: [50, 51], @@ -214,7 +214,7 @@ class CardFlip extends Component { if (rotateOrientation === "x") { const aXRotation = rotation.x.interpolate({ inputRange: [0, 50, 100, 150], - outputRange: this.props.flipReverse ? ["180deg", "0deg", "-180deg", "0deg"] : ["-180deg", "0deg", "180deg", "0deg"], + outputRange: flipReverse ? ["180deg", "0deg", "-180deg", "0deg"] : ["-180deg", "0deg", "180deg", "0deg"], extrapolate: "clamp" }); sideATransform.transform.push({ rotateX: aXRotation }); @@ -222,7 +222,7 @@ class CardFlip extends Component { // cardA Y-rotation const aYRotation = rotation.y.interpolate({ inputRange: [0, 50, 100, 150], - outputRange: this.props.flipReverse ? ["180deg", "0deg", "-180deg", "0deg"] : ["-180deg", "0deg", "180deg", "0deg"], + outputRange: flipReverse ? ["180deg", "0deg", "-180deg", "0deg"] : ["-180deg", "0deg", "180deg", "0deg"], extrapolate: "clamp" }); sideATransform.transform.push({ rotateY: aYRotation }); @@ -231,7 +231,7 @@ class CardFlip extends Component { } getCardBTransformation() { - const { progress, rotation, side, rotateOrientation } = this.state; + const { progress, rotation, side, rotateOrientation, flipReverse } = this.state; const sideBOpacity = progress.interpolate({ inputRange: [50, 51], @@ -248,7 +248,7 @@ class CardFlip extends Component { if (rotateOrientation === "x") { const bXRotation = rotation.x.interpolate({ inputRange: [0, 50, 100, 150], - outputRange: this.props.flipReverse ? ["0deg", "180deg", "360deg", "-180deg"] : ["0deg", "-180deg", "-360deg", "180deg"], + outputRange: flipReverse ? ["0deg", "180deg", "360deg", "-180deg"] : ["0deg", "-180deg", "-360deg", "180deg"], extrapolate: "clamp" }); sideBTransform.transform.push({ rotateX: bXRotation }); @@ -257,14 +257,14 @@ class CardFlip extends Component { // cardB Y-rotation bYRotation = rotation.y.interpolate({ inputRange: [0, 50, 100, 150], - outputRange: this.props.flipReverse ? ["0deg", "-180deg", "0deg", "180deg"] : ["0deg", "180deg", "0deg", "-180deg"], + outputRange: flipReverse ? ["0deg", "-180deg", "0deg", "180deg"] : ["0deg", "180deg", "0deg", "-180deg"], extrapolate: "clamp" }); } else { // cardB Y-rotation bYRotation = rotation.y.interpolate({ inputRange: [0, 50, 100, 150], - outputRange: this.props.flipReverse ? ["0deg", "180deg", "0deg", "-180deg"] : ["0deg", "-180deg", "0deg", "180deg"], + outputRange: flipReverse ? ["0deg", "180deg", "0deg", "-180deg"] : ["0deg", "-180deg", "0deg", "180deg"], extrapolate: "clamp" }); }