-
Notifications
You must be signed in to change notification settings - Fork 64
Open
Description
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 ?
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels