junghsuan / react-native-gesture-flip-card Goto Github PK
View Code? Open in Web Editor NEWA card flipping animation component using gesture for react-native.
License: MIT License
A card flipping animation component using gesture for react-native.
License: MIT License
Will it be possible to support for swiping up/down?
HI JH,
I really like your flip card component, but currently facing a warning in v.1.0.3
Among others you find a related discussion here.
And react-native changes here.
Fix should look something ike this:
return Animated.event([null, {dx: this.state.scrollX}], {useNativeDriver: bool})(
evt,
gestureState,
);
Let me know what you are thinking.
π Very nice lib and thanks for sharing it! β€οΈ
Do you think it be possible to fix console.warn
messages when reaching 90deg
while dragging?
Produced warning at 90deg
:
The value 'touchEvent.locationX' equals NaN or INF and will be replaced by '0'.
Same apply also for touchEvent.locationY
Thanks for this library!
How can I retrieve which card face is showing so that I can default to the 'front' on focus?
Thanks!
Hi! π
Firstly, thanks for your work on this project! π
Today I used patch-package to patch [email protected]
for the project I'm working on.
width
and height
as references to avoid memoizing old dimensions within the rest of the component logictypes.d.ts
for those crasy devs (like us) using Typescript
;-)Here is the diff that solved my problem:
diff --git a/node_modules/react-native-gesture-flip-card/gestureFlipView.js b/node_modules/react-native-gesture-flip-card/gestureFlipView.js
index 8ea8ee2..418f4ca 100644
--- a/node_modules/react-native-gesture-flip-card/gestureFlipView.js
+++ b/node_modules/react-native-gesture-flip-card/gestureFlipView.js
@@ -1,16 +1,16 @@
-import React, { useState, useEffect, useRef, useImperativeHandle } from "react";
+import PropTypes from "prop-types";
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
import {
- View,
Animated,
PanResponder,
Platform,
- StyleSheet,
+ StyleSheet, View
} from "react-native";
-import PropTypes from "prop-types";
const GestureFlipView = React.forwardRef((props, ref) => {
- const width = Math.floor(props.width);
- const height = Math.floor(props.height);
+ // Bug fix: using width and height as references avoid memoizing old dimensions within the rest of the component logic
+ const width = useRef(Math.floor(props.width)).current;
+ const height = useRef(Math.floor(props.height)).current;
const [cardFace, setCardFace] = useState(true);
const isAnimating = useRef(false);
diff --git a/node_modules/react-native-gesture-flip-card/index.d.ts b/node_modules/react-native-gesture-flip-card/index.d.ts
new file mode 100644
index 0000000..e4d03d9
--- /dev/null
+++ b/node_modules/react-native-gesture-flip-card/index.d.ts
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ViewProps } from 'react-native';
+
+export type GestureFlipViewrops = {
+ width: number,
+ height: number,
+ perspective?: number,
+ gestureEnabled?: boolean,
+ onFlipEnd?: () => void,
+} & ViewProps;
+
+declare class GestureFlipView extends React.Component<GestureFlipViewrops, any> {
+ flipLeft: () => void;
+ flipRight: () => void;
+}
+
+export default GestureFlipView;
This issue body was partially generated by patch-package.
I want to disable gestures and flip it use method, can I ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.