From ed88937cf03e65fe5d620f170fd14b1fae6bb2e7 Mon Sep 17 00:00:00 2001
From: Alex <me@pixp.cc>
Date: Wed, 16 Sep 2026 17:51:20 -0700
Subject: [PATCH] fix(mobile): prevent Android compose FAB animation jitter
 (#12169)

---
 apps/mobile/assets/icons/compose.xml          |  8 ++
 .../MaterialNewThreadButton.android.tsx       |  4 +
 .../MaterialScrollComposeButton.android.tsx   | 75 +++++++++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 apps/mobile/assets/icons/compose.xml
 create mode 100644 apps/mobile/src/components/MaterialScrollComposeButton.android.tsx

diff --git a/apps/mobile/assets/icons/compose.xml b/apps/mobile/assets/icons/compose.xml
new file mode 100644
index 0000000000000000000000000000000000000000..1a958a9abc60abba8603ee7f41da7f5ba47f0d1d
--- /dev/null
+++ b/apps/mobile/assets/icons/compose.xml
@@ -0,0 +1,8 @@
+<!-- Tabler Icons edit (MIT), matching AppSymbol's square.and.pencil.
+     Strokes expanded to fills: Expo UI's vector parser does not support strokes. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp" android:height="24dp"
+    android:viewportWidth="24" android:viewportHeight="24">
+    <path android:fillColor="#000000"
+        android:pathData="M7,6 L6,6 C4.3431,6 3,7.3431 3,9 L3,18 C3,19.6569 4.3431,21 6,21 L15,21 C16.6569,21 18,19.6569 18,18 L18,17 C18,16.4477 17.5523,16 17,16 C16.4477,16 16,16.4477 16,17 L16,18 C16,18.5523 15.5523,19 15,19 L6,19 C5.4477,19 5,18.5523 5,18 L5,9 C5,8.4477 5.4477,8 6,8 L7,8 C7.5523,8 8,7.5523 8,7 C8,6.4477 7.5523,6 7,6 Z M21.0921,5.8779 L21.092,5.8778 L20.3849,6.5849 L21.092,7.292 C22.3027,6.0814 22.3027,4.1186 21.092,2.908 C19.8814,1.6973 17.9186,1.6973 16.708,2.908 L8.2942,11.2916 C8.1059,11.4793 8,11.7342 8,12 L8,15 C8,15.5523 8.4477,16 9,16 L12,16 C12.2658,16 12.5207,15.8942 12.7084,15.7058 L21.0934,7.2908 C21.4832,6.8996 21.4821,6.2665 21.0908,5.8766 C20.6996,5.4868 20.0665,5.4879 19.6766,5.8792 L11.2916,14.2942 L12,14 L9,14 L10,15 L10,12 L9.7058,12.7084 L18.1209,4.3235 C18.5518,3.8926 19.2482,3.8926 19.6778,4.3222 C20.1074,4.7518 20.1074,5.4482 19.6778,5.8778 C19.2873,6.2683 19.2873,6.9015 19.6778,7.292 L19.6779,7.2921 C20.0684,7.6826 20.7016,7.6826 21.0921,7.2921 C21.4826,6.9016 21.4826,6.2684 21.0921,5.8779 Z M15.2929,5.7071 L18.2929,8.7071 C18.6834,9.0976 19.3166,9.0976 19.7071,8.7071 C20.0976,8.3166 20.0976,7.6834 19.7071,7.2929 L16.7071,4.2929 C16.3166,3.9024 15.6834,3.9024 15.2929,4.2929 C14.9024,4.6834 14.9024,5.3166 15.2929,5.7071 Z" />
+</vector>
diff --git a/apps/mobile/src/components/MaterialNewThreadButton.android.tsx b/apps/mobile/src/components/MaterialNewThreadButton.android.tsx
index 8d2caf704f42681a70757fb82a033a7e954def40..cd76633d893570f5a13bc9ad0d02b92110d52bce 100644
--- a/apps/mobile/src/components/MaterialNewThreadButton.android.tsx
+++ b/apps/mobile/src/components/MaterialNewThreadButton.android.tsx
@@ -1,10 +1,14 @@
 import type { ComponentProps } from "react";
 import { MaterialFloatingActionButton } from "./MaterialFloatingActionButton.android";
+import { MaterialScrollComposeButton } from "./MaterialScrollComposeButton.android";
 import type { MaterialNewThreadButton as SharedMaterialNewThreadButton } from "./MaterialNewThreadButton.shared";
 
 export function MaterialNewThreadButton(
   props: ComponentProps<typeof SharedMaterialNewThreadButton>,
 ) {
+  if (props.extended && props.expanded !== undefined) {
+    return <MaterialScrollComposeButton {...props} expanded={props.expanded} />;
+  }
   return (
     <MaterialFloatingActionButton
       {...props}
diff --git a/apps/mobile/src/components/MaterialScrollComposeButton.android.tsx b/apps/mobile/src/components/MaterialScrollComposeButton.android.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..018dbdc19b42cfa0fa3167bfc1247c866cdb9e1d
--- /dev/null
+++ b/apps/mobile/src/components/MaterialScrollComposeButton.android.tsx
@@ -0,0 +1,75 @@
+import { Box, ExtendedFloatingActionButton, Host, Icon, Text } from "@expo/ui/jetpack-compose";
+import { fillMaxWidth, onSizeChanged, size } from "@expo/ui/jetpack-compose/modifiers";
+import { useCallback, useState } from "react";
+import { Pressable, View, type StyleProp, type ViewStyle } from "react-native";
+import { useAppearancePreferences } from "../features/settings/appearance/AppearancePreferencesProvider";
+import { useScaledTextRole } from "../features/settings/appearance/useScaledTextRole";
+
+/** Keep the animated width and icon positioning entirely inside Compose, not Yoga. */
+export function MaterialScrollComposeButton(props: {
+  readonly expanded: boolean;
+  readonly onPress: () => void;
+  readonly className?: string;
+  readonly style?: StyleProp<ViewStyle>;
+}) {
+  const { themeAppearance, themeVariables: colors } = useAppearancePreferences();
+  const typography = useScaledTextRole("footnote");
+  const [expandedWidth, setExpandedWidth] = useState(56);
+  const rememberWidth = useCallback(({ width }: { width: number }) => {
+    setExpandedWidth((previous) => Math.max(previous, width));
+  }, []);
+  return (
+    <View pointerEvents="box-none" className={props.className} style={[props.style, { left: 20 }]}>
+      <View pointerEvents="none" importantForAccessibility="no-hide-descendants">
+        <Host
+          matchContents={{ vertical: true }}
+          colorScheme={themeAppearance}
+          ignoreSafeAreaKeyboardInsets
+          style={{ width: "100%" }}
+        >
+          <Box modifiers={[fillMaxWidth()]} contentAlignment="centerEnd">
+            <ExtendedFloatingActionButton
+              expanded={props.expanded}
+              containerColor={colors["--color-primary"]}
+              modifiers={[onSizeChanged(rememberWidth)]}
+            >
+              <ExtendedFloatingActionButton.Icon>
+                <Box modifiers={[size(24, 24)]}>
+                  <Icon
+                    source={require("../../assets/icons/compose.xml")}
+                    size={24}
+                    tint={colors["--color-primary-foreground"]}
+                  />
+                </Box>
+              </ExtendedFloatingActionButton.Icon>
+              <ExtendedFloatingActionButton.Text>
+                <Text
+                  color={colors["--color-primary-foreground"]}
+                  style={{ ...typography, fontWeight: "500" }}
+                >
+                  New thread
+                </Text>
+              </ExtendedFloatingActionButton.Text>
+            </ExtendedFloatingActionButton>
+          </Box>
+        </Host>
+      </View>
+      {/* The visual host is wider than the button; only this target intercepts list touches. */}
+      <Pressable
+        onPress={props.onPress}
+        accessibilityRole="button"
+        accessibilityLabel="New thread"
+        android_ripple={{ foreground: true }}
+        style={{
+          position: "absolute",
+          right: 0,
+          top: 0,
+          bottom: 0,
+          width: props.expanded ? expandedWidth : 56,
+          borderRadius: 16,
+          overflow: "hidden",
+        }}
+      />
+    </View>
+  );
+}
-- 
2.54.0