From b2c591425649dba3a3f10890e96498fcd5100582 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?=
 <59940332+patrycjakalinska@users.noreply.github.com>
Date: Fri, 20 Dec 2024 10:22:54 +0100
Subject: [PATCH] docs: Fix FlipCard example on Android/iOS (#6823)

## Summary

FlipCard example was "flickering" and not showing current card (on iOS
and Android). Change in styles fixed that.

It was discovered in #6722

Before:


https://github.com/user-attachments/assets/373980e1-c86d-4521-bfe3-fe1e312ba920

After:


https://github.com/user-attachments/assets/32b47476-27c2-4eb8-9300-362c45ffb238
---
 packages/docs-reanimated/blog/flip-card.md           | 6 +++---
 packages/docs-reanimated/static/examples/FlipCard.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/docs-reanimated/blog/flip-card.md b/packages/docs-reanimated/blog/flip-card.md
index d71c1308dbcb..930962f98b77 100644
--- a/packages/docs-reanimated/blog/flip-card.md
+++ b/packages/docs-reanimated/blog/flip-card.md
@@ -12,11 +12,11 @@ import FlipCardSrc from '!!raw-loader!@site/static/examples/FlipCard';
 
 For storing information about whether the card is flipped or not we use [shared value](/docs/fundamentals/glossary#shared-value) with the `useSharedValue` hook. Using shared values helps to prevent unnecessary re-renders.
 
-<CollapsibleCode src={FlipCardSrc} showLines={[117,117]} />
+<CollapsibleCode src={FlipCardSrc} showLines={[116,116]} />
 
 This allows us to [interpolate](/docs/utilities/interpolate) values between 0-180 and 180-360 degrees, depending on whether the card is flipped or not. In addition, we use [withTiming](/docs/animations/withTiming) util which makes our animation smooth.
 
-<CollapsibleCode src={FlipCardSrc} showLines={[62,64]} />
+<CollapsibleCode src={FlipCardSrc} showLines={[61,63]} />
 
 <ExampleVideo
 sources={{
@@ -29,4 +29,4 @@ The **FlipCard** component accepts several props: `duration` allows you to chang
 
 <samp id="FlipCard">Flip Card</samp>
 
-<CollapsibleCode src={FlipCardSrc} showLines={[51,103]} />
+<CollapsibleCode src={FlipCardSrc} showLines={[50,102]} />
diff --git a/packages/docs-reanimated/static/examples/FlipCard.js b/packages/docs-reanimated/static/examples/FlipCard.js
index 5cc919b8a4ac..b8f5b40275a4 100644
--- a/packages/docs-reanimated/static/examples/FlipCard.js
+++ b/packages/docs-reanimated/static/examples/FlipCard.js
@@ -109,7 +109,6 @@ const flipCardStyles = StyleSheet.create({
     zIndex: 1,
   },
   flippedCard: {
-    backfaceVisibility: 'hidden',
     zIndex: 2,
   },
 });
@@ -162,5 +161,6 @@ const styles = StyleSheet.create({
   flipCard: {
     width: 170,
     height: 200,
+    backfaceVisibility: 'hidden',
   },
 });