lhandel / react-native-card-flip Goto Github PK
View Code? Open in Web Editor NEWCard flip animation for React Native
License: MIT License
Card flip animation for React Native
License: MIT License
A warning is displayed when this component is used. componentWillReceiveProps has been deprecated
"Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
npx react-codemod rename-unsafe-lifecycles
in your project source folder."While I try to install package, it gives this error:
`
Hi,
In your Examples directory, the source code listed there contains the header, a license from Facebook, which includes their Patent Provision clause, but no other indication where the code originates from. Can you clarify from which projects this code comes from?
Thanks
This is the perfect lib for my use case in a production app, where my card(s) have dual animation - the same card can jiggle, as well as flip depending on based on a condition/state.
Unfortunately, after implementing CardFlip I realised that jiggle (and tip as well) only work well on the front face of the card. If we apply jiggle/tip to the back of the card, it jitters heavily (and on web, simply fails to execute the animation).
To repro, try this:
import React from 'react';
import {
TouchableOpacity,
StyleSheet,
View,
Text,
} from 'react-native';
import CardFlip from 'react-native-card-flip';
const App = (props) => {
return (
<View style={styles.container}>
<CardFlip style={styles.cardContainer} ref={card => (this.card = card)}>
<TouchableOpacity
activeOpacity={1}
style={[styles.card, styles.card1]}
onPress={() => this.card.flip()}>
<Text style={styles.label}>AB</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={1}
style={[styles.card, styles.card2]}
onPress={() => this.card.jiggle()}>
<Text style={styles.label}>CD</Text>
</TouchableOpacity>
</CardFlip>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
cardContainer: {
width: 320,
height: 470,
},
card: {
width: 320,
height: 470,
backgroundColor: '#FE474C',
borderRadius: 5,
shadowColor: 'rgba(0,0,0,0.5)',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.5,
},
card1: {
backgroundColor: '#FE474C',
},
card2: {
backgroundColor: '#FEB12C',
},
label: {
lineHeight: 470,
textAlign: 'center',
fontSize: 55,
fontFamily: 'System',
color: '#ffffff',
backgroundColor: 'transparent',
},
});
export default App;
Any suggestions ?
Hi there :)
The card turns halfway, switches sides (correctly) but then instead of continuing to flip left to right, it flips back right to left.
So you end up in the correct state but the animation isn't a full flip.
It's like going halfway to turning the card over and then it magically changing what's on its front face, and then turning back - it breaks the illusion of a "card" existing and isn't the desired behaviour I think.
React Native 0.57
It works fine on iOS though
Hello,
First of all - thanks for the great library which allows to have some nice animation without actually understanding how the animations work :)
I have an issue, though. In the examples provided, the height of the card is always set explicitly. Is it possible to have it dynamic? When I try that, the child container renders with the height 0.
Here is the snack where everything works fine (switch to iOS):
https://snack.expo.io/S1GXtV5zS
Here is the snack where I remove height from the card (switch to iOS):
https://snack.expo.io/BkSrK4qMB (you don't see anything)
In my app I don't know the height of the card upfront and can not calculate it based on the screen dimensions.
This also can be a reason for this issue: #3, however no reproduceble example was provided there.
Would appreciate any help or suggestions.
Regards,
The cart itself works but we can't see the text?
<TouchableOpacity onPress={() => this.card.flip()} style={styles.card}>
<Text style={styles.text}>ADDDDDDDDDDDDDDDB</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.card.flip()} style={styles.card}>
<Text style={styles.text}>CDDDDDDDDDDDDDDDD</Text>
</TouchableOpacity>
</CardFlip>
my style
container: {
flex: 1,
},
cardContainer: {
width: 150,
height: 150,
backgroundColor: '#f00',
padding: 30,
justifyContent: 'center',
alignItems: 'center',
},
card: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
color: 'white',
},
})
The title sort of says it all. When using React Native 0.46.0, the card flip animation will start and then the card will disappear until the animation is completed and the card is flipped. If anyone has a work around or a fix, that would be much appreciated.
Flipping from the right instead of the left need help with that
Would love to have the option to flip the other way. Anyone know how I would go about doing this with the code?
In npm audit, i have noticed node-fetch version in this library has security vulnarablities. Can you please upgrade to version 3.1.1 or 2.6.7?
Hello,
Is it possible to publish to npm a version of this package with the latest commits/merges ?
The last npm version is now a year old.
Thanks !
Hello,
as I am using Typescript for developing, I had to type this module so it is usable with linting.
Maybe it is helpful for others, here is the code:
`
declare module "react-native-card-flip" {
import { StyleProp, ViewStyle } from "react-native";
interface Card {
/**
* Flips the card
*/
flip: () => void;
/**
* Flips the card
* @default { direction: 'left', progress: 0.05, duration: 150 }
*/
tip: (direction: 'y'|'x', progress: number, duration: number) => void;
/**
* Jiggles the card
* @default { count: 2, duration: 200, progress: 0.05 }
*/
jiggle: (count: number, duration: number, progress: number) => void;
}
interface Props {
/**
* container style
* @default {}
*/
style?: StyleProp<ViewStyle>;
/**
* flip duration
* @default 1000
*/
duration?: number;
/**
* zoom level on flip
* @default 0.09
*/
flipZoom?: number;
/**
* the rotation axis. 'x' or 'y'
* @default 'y'
*/
flipDirection?: 'y'|'x';
/**
* @default 800
*/
perspective?: number;
ref?: (card: Card) => void;
children?: any;
/**
* function to be called when a card is fliped. it receives the card-sides index
*/
onFlip?: () => void;
/**
* function to be called when the flip-animation starts. it receives the card-sides index
*/
onFlipStart?: () => void;
/**
* function to be called when the flip-animation ends. it receives the card-sides index
*/
onFlipEnd?: () => void;
}
export default function CardFlip(props: Props): JSX.Element;
}
`
We're using this awesome library in our project - our user love it!
We want to upgrade to Expo 49 but are stuck - would you consider upgrading to the latest versions of react & react-native and publishing to NPM again? You're only dependencies... ;-D
When I do npm i
in my project, I get:
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0-beta.5" from [email protected]
npm ERR! node_modules/react-native-card-flip
npm ERR! react-native-card-flip@"1.0.7" from the root project
I want to use the card flip in my components did mount method to set the initial state of the cards.
The problem is that the animation is too slow.
I found out that it was because of this in CardFlip.js
this.state ={
duration: 5000,
side: 0,
sides: [],
progress: new Animated.Value(0),
rotation: new Animated.ValueXY({x: 50, y: 50}),
zoom: new Animated.Value(0),
rotateOrientation: '',
flipDirection: 'y'
}
The default duration is set to 5000 and wasn't respecting the duration I was setting in the CardFlip property.
I had to manually change it to 1000 but it would be better if this could be fixed in the official code.
This only happens if I use card.flip() in the componentDidMount of my component. In any other case it works as expected
I need this npm module in a project and just tried it before using by copying the code provided in the example, my App.js is simple and looks like this: `import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import CardFlip from 'react-native-card-flip';
export default class App extends React.Component {
render() {
return (
<CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
<TouchableOpacity style={styles.card} onPress={() => this.card.flip()} >AB
<TouchableOpacity style={styles.card} onPress={() => this.card.flip()} >CD
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
`
But on simulator it gives the following error:
ReferenceError: bYRotation is not defined
and it marks the following lines:
` });
262 | } else {
263 | // cardB Y-rotation
264 | bYRotation = rotation.y.interpolate({
| ^ 265 | inputRange: [0, 50, 100, 150],
266 | outputRange: ["0deg", "-180deg", "0deg", "180deg"],
267 | extrapolate: "clamp"`
I am guessing it's some issues with the this module.
i am havng a flat list in which i had take 8 cards on which flip animation is performing. but it is only working on 5 cards on adding another card it is showing "toValue" error without any description.
In android touchs in butons not working, the screen stops response.
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.