From a43fe8099539f19a593b505b0531965f6e361716 Mon Sep 17 00:00:00 2001
From: Aziz Becha <aziz07becha@gmail.com>
Date: Mon, 11 May 2026 15:27:39 +0100
Subject: [PATCH] fix(animated-fab): keep icon attached when toggling iconMode
 on iOS

The icon's transform.translateX was conditionally either an Animated.Value
(dynamic) or a plain number (static). With useNativeDriver, switching the
prop from an animated node to a plain value doesn't reliably release it
from the native animated module, leaving the icon stuck at animFAB's last
value and visually detached from the FAB pill after static -> dynamic ->
static.

Drive iconWrapper translateX through animFAB.interpolate(...) in all
animateFrom/RTL branches, using a constant output range for the
non-animating case, so the prop is always owned by the native driver.
---
 src/components/FAB/utils.ts | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts
index e87d24019f..7dbce9fc49 100644
--- a/src/components/FAB/utils.ts
+++ b/src/components/FAB/utils.ts
@@ -70,7 +70,12 @@ export const getCombinedStyles = ({
     ];
     combinedStyles.iconWrapper.transform = [
       {
-        translateX: isIconStatic ? 0 : animFAB,
+        translateX: isIconStatic
+          ? animFAB.interpolate({
+              inputRange: [distance, 0],
+              outputRange: [0, 0],
+            })
+          : animFAB,
       },
     ];
     combinedStyles.absoluteFill.transform = [
@@ -85,7 +90,10 @@ export const getCombinedStyles = ({
     combinedStyles.iconWrapper.transform = [
       {
         translateX: isIconStatic
-          ? 0
+          ? animFAB.interpolate({
+              inputRange: [distance, 0],
+              outputRange: [0, 0],
+            })
           : animFAB.interpolate({
               inputRange: [distance, 0],
               outputRange: [-distance, 0],
@@ -112,7 +120,10 @@ export const getCombinedStyles = ({
     combinedStyles.iconWrapper.transform = [
       {
         translateX: isIconStatic
-          ? distance
+          ? animFAB.interpolate({
+              inputRange: [0, distance],
+              outputRange: [distance, distance],
+            })
           : animFAB.interpolate({
               inputRange: [0, distance],
               outputRange: [distance, distance * 2],
@@ -140,7 +151,10 @@ export const getCombinedStyles = ({
               inputRange: [0, distance],
               outputRange: [-distance, -distance * 2],
             })
-          : -distance,
+          : animFAB.interpolate({
+              inputRange: [0, distance],
+              outputRange: [-distance, -distance],
+            }),
       },
     ];
     combinedStyles.innerWrapper.transform = [