From b9365af79c349228431867585bff303fc4184b26 Mon Sep 17 00:00:00 2001
From: Bogusz Kaszowski <bogusz.kaszowski@callstack.com>
Date: Sun, 19 Apr 2026 18:18:22 +0200
Subject: [PATCH] fix(animated-fab): correct Android shadow/content stacking

---
 src/components/FAB/AnimatedFAB.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx
index ecfe7e1c60..a43c713677 100644
--- a/src/components/FAB/AnimatedFAB.tsx
+++ b/src/components/FAB/AnimatedFAB.tsx
@@ -130,6 +130,8 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
 
 const SIZE = 56;
 const SCALE = 0.9;
+const SHADOW_LAYER_Z_INDEX = 1;
+const CONTENT_LAYER_Z_INDEX = 2;
 
 /**
  * An animated, extending horizontally floating action button represents the primary action in an application.
@@ -596,9 +598,19 @@ const styles = StyleSheet.create({
   innerWrapper: {
     flexDirection: 'row',
     overflow: 'hidden',
+    ...Platform.select({
+      android: {
+        zIndex: CONTENT_LAYER_Z_INDEX,
+      },
+    }),
   },
   shadowWrapper: {
     elevation: 0,
+    ...Platform.select({
+      android: {
+        zIndex: SHADOW_LAYER_Z_INDEX,
+      },
+    }),
   },
   shadow: {
     elevation: 6,