I am new to React Native. I tried to create flip card animation and I was following a tutorial, and created the animation but it shows only one side of the card when the animation ends. I think the problem comes from my style but couldn't figure out how to fix this.
My current code is this.
const CardFlip = ({ navigation, route }: Props) => { const animatedValue = new Animated.Value(0); const [val, setVal] = useState(0); const frontInterpolate = animatedValue.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '180deg'], }); const backInterpolate = animatedValue.interpolate({ inputRange: [0, 180], outputRange: ['180deg', '360deg'], }); const frontAnimatedStyle = { transform: [ { rotateY: frontInterpolate } ] }; const backAnimatedStyle = { transform: [ { rotateY: backInterpolate } ] }; useEffect(() => { animatedValue.addListener(({ value }) => { setVal(value); }); }); const flipCard = (): void => { Animated.spring(animatedValue, { toValue: val >= 90 ? 0 : 180, friction: 8, tension: 10, useNativeDriver: true, }).start(); }; return (<View style={styles.screen}><View style={styles.cardWrapper}><Animated.View style={[styles.card, frontAnimatedStyle]}><Text style={styles.text}> Front</Text></Animated.View><Animated.View style={[styles.cardBack, backAnimatedStyle]}><Text style={styles.text}> Back</Text></Animated.View> </View><View style={styles.buttonWrapper}><TouchableOpacity style={styles.flipCardButton}><Icon name="visibility" type="material" color="#FFFFFF" size={30} onPress={() => flipCard()} /></TouchableOpacity></View></View> );};const styles = StyleSheet.create({ screen: { height: '100%', width: '100%', top: 0, left: 0, backgroundColor: '#F7F3EC', }, cardWrapper: { alignItems: 'center', }, card: { position: 'absolute', height: 480, width: 320, top: 40, paddingTop: 45, paddingHorizontal: 25, backgroundColor: '#F9D6E2', borderRadius: 7, borderWidth: 0, elevation: 6, backfaceVisibility: 'hidden', }, cardBack: { position: 'absolute', height: 480, width: 320, top: 40, paddingTop: 45, paddingHorizontal: 25, backgroundColor: '#F9D6E2', borderRadius: 7, borderWidth: 0, elevation: 6, backfaceVisibility: 'hidden', }, text: { fontSize: 24, }, buttonWrapper: { position: 'absolute', alignItems: 'center', width: '100%', height: 60, bottom: 0, }, flipCardButton: { alignItems: 'center', justifyContent: 'center', height: 60, width: 60, position: 'absolute', bottom: 10, borderRadius: 100, borderWidth: 0, elevation: 6, backgroundColor: '#EF5350', }});
And the animation is like this.
How can I fix this?