-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Flip card animation example is broken in iOS with Expo 52 #6722
Comments
I am also experiencing this after Expo SDK 52 upgrade |
Hi @david-bermejo ! It looks like on newer releases // ...
<FlipCard
isFlipped={isFlipped}
cardStyle={styles.flipCard}
FlippedContent={<FlippedContent />}
RegularContent={<RegularContent />}
/>
// ...
const styles = StyleSheet.create({
flipCard: {
width: 170,
height: 200,
backfaceVisibility: 'hidden'
},
}); |
Hi @patrycjakalinska I tried that on both the cards and that has not fixed it. However in my implementation the cards are two separate modals with equal dimensions that I am flipping between. Their animated styles are below, as you can see the backfaceVisibility has always been 'hidden', and that used to work but no longer does
|
Hi @kristof-kovacs, could you provide a full snack or some code source, so I can look into that? |
Really appreciate you taking the time to look into it @patrycjakalinska. The most productive thing for me to show you here is the rendering logic of the modals. Both modals that make up the card, as well as the screen in which they are rendered are massive files so not too comfortable sharing them in full here. Here is the style, as well as the function that flips the card:
and here is the rendering of the two different card views with the frontFlipCard and backFlipCard
and finally, the relevant styles
|
Wow it really solved my problem, thank you for your time! |
I was having the same problem, and this worked for me too, thanks! |
Yes, it works for me too. Hope the example page also be fixed. |
Description
As the title says, flip card animation example present in your page is broken in iOS with Expo 52. I am using it in one of my projects and the same happens.
The provided Snack project is the one present in your page as an example. When flipped, the back card face is visible on top during the animation, and that should not happen. This bug was not present in Expo 51 or previous versions. Other platforms are not affected.
Steps to reproduce
Snack or a link to a repository
https://snack.expo.dev/@bermejus/flip-card-%7C-react-native-reanimated?platform=ios
Reanimated version
3.16.1
React Native version
0.76.2
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Expo Go
Architecture
Fabric (New Architecture)
Build type
None
Device
iOS simulator
Device model
No response
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: