# Files changed · PR \#24235 · pingdotgg/t3code [View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/24235/diffs) Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code) Visibility: public [feat\(mobile\): thread header minimizes on the Duo while reading back through history](https://git.cafe/pingdotgg/t3code/pull/24235.md) Version: 10 Head commit: 106459045a52aba28b8bca8e3e8317773357a952 Base commit: 9a391eb3f55b738113b61768cf2d8263b4f3ac2e Comparison base: 9a391eb3f55b738113b61768cf2d8263b4f3ac2e Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing. ## apps/mobile/deps/react-native-screens-5.0.0-t3.36.tgz Status: deleted; +0; −0 Binary file; no text patch. ## apps/mobile/deps/react-native-screens-5.0.0-t3.37.tgz Status: added; +0; −0 Binary file; no text patch. ## apps/mobile/package.json Status: modified; +1; −1 ```diff @@ -134,7 +134,7 @@ "react-native-pdf-jsi": "5.0.0", "react-native-reanimated": "4.7.1", "react-native-safe-area-context": "~5.10.1", - "react-native-screens": "file:deps/react-native-screens-5.0.0-t3.36.tgz", + "react-native-screens": "file:deps/react-native-screens-5.0.0-t3.37.tgz", "react-native-shiki-engine": "^0.3.12", "react-native-svg": "15.16.0", "react-native-webview": "14.0.1", ``` ## apps/mobile/src/Stack.tsx Status: modified; +9; −1 ```diff @@ -147,6 +147,7 @@ type AppScreenOptions = NativeStackNavigationOptions & { readonly unstable_navigationItemStyle?: "editor"; + readonly unstable_headerMinimizationBehavior?: "onScrollUp"; }; const GLASS_HEADER_OPTIONS: AppScreenOptions = { @@ -169,6 +170,13 @@ headerShown: Platform.OS !== "android", }; +// Like Messages on the Duo: reading back through history (scrolling up) minimizes the +// header, and reversing toward the latest message restores it. Other devices ignore it. +const THREAD_HEADER_OPTIONS: AppScreenOptions = { + ...DETAIL_HEADER_OPTIONS, + unstable_headerMinimizationBehavior: "onScrollUp", +}; + const SOLID_HEADER_OPTIONS: AppScreenOptions = { headerBackButtonDisplayMode: "minimal", headerBackTitle: "", @@ -707,7 +715,7 @@ Thread: createNativeStackScreen({ screen: ThreadRouteScreen, linking: { path: "threads/:environmentId?/:threadId?", alias: ["new/draft"] }, - options: DETAIL_HEADER_OPTIONS, + options: THREAD_HEADER_OPTIONS, }), NewTaskProject: createNativeStackScreen({ screen: NewTaskRouteScreen, ``` ## apps/mobile/src/features/threads/ThreadFeed.tsx Status: modified; +13; −0 ```diff @@ -96,6 +96,7 @@ useRef, useState, useId, + type ComponentPropsWithRef, type ReactNode, type RefObject, } from "react"; @@ -124,6 +125,7 @@ import { isPdfFile } from "../../lib/filePreview"; import { flattenThemeColor } from "../../lib/mobileTheme"; import { PresentationSource } from "../../components/ui/NativePresentation"; +import { NativeScrollViewMarker } from "../../native/NativeScrollViewMarker"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import Animated, { FadeIn, FadeInUp, type SharedValue } from "react-native-reanimated"; import { useUniwindTheme } from "../../lib/useUniwindTheme"; @@ -751,6 +753,16 @@ // LegendList only computes hook visibility when the list has a viewability config. const THREAD_MEDIA_VIEWABILITY_CONFIG = { itemVisiblePercentThreshold: 0 }; +// The composer and overlays beside the feed keep UIKit from finding it on its own, so +// register it with the screen controller. Header minimization observes this scroll view. +function ThreadFeedScrollView(props: ComponentPropsWithRef) { + return ( + + + + ); +} + function ThreadMediaVisibility(props: { readonly children: ReactNode }) { const [visible, setVisible] = useState(false); useViewabilityAmount( @@ -2977,6 +2989,7 @@ // (facebook/react-native#54123); the anchored end space after a send // is pure inset, so without this the blank region can't be scrolled. applyWorkaroundForContentInsetHitTestBug + {...(Platform.OS === "ios" ? { ScrollViewComponent: ThreadFeedScrollView } : {})} // Horizontal Duo reservations are already included in the row padding. contentInsetAdjustmentBehavior={ usesNativeAutomaticInsets ``` ## apps/mobile/src/native/StackHeader.tsx Status: modified; +1; −0 ```diff @@ -26,6 +26,7 @@ readonly unstable_headerSubtitle?: unknown; readonly unstable_headerToolbarItems?: unknown; readonly unstable_navigationItemStyle?: unknown; + readonly unstable_headerMinimizationBehavior?: unknown; }; function useNativeStackNavigation(): NativeStackNavigationProp | null { ``` ## apps/mobile/src/native/V5StackHeader.ios.tsx Status: modified; +7; −0 ```diff @@ -5,6 +5,7 @@ } from "@react-navigation/native-stack"; import { isValidElement, useEffect, useRef } from "react"; import { StyleSheet } from "react-native"; +import { isDuoDevice } from "../lib/device-type"; import { useMobileNavigationTheme } from "../lib/useMobileNavigationTheme"; import { useDeviceType, useNativeLayoutMetrics } from "../native/native-layout-metrics"; import { @@ -13,6 +14,7 @@ type HeaderBarButtonMailSearchToolbarItem, type SearchBarCommands, type StackHeaderConfigProps, + type StackHeaderMinimizationBehaviorIOS, type StackHeaderMenuElementIOS, type StackHeaderMenuIOS, type HeaderBarButtonItemWithMenu, @@ -26,6 +28,7 @@ | HeaderBarButtonSearchBarPlacementItem; type Options = NativeStackNavigationOptions & { readonly unstable_navigationItemStyle?: "editor" | "navigator"; + readonly unstable_headerMinimizationBehavior?: StackHeaderMinimizationBehaviorIOS; readonly headerSubtitle?: string; readonly unstable_headerSubtitle?: string; readonly headerSubtitleStyle?: { color?: string; fontSize?: number; fontFamily?: string }; @@ -279,6 +282,10 @@ backButtonHidden={options.headerBackVisible === false} ios={{ navigationItemStyle: options.unstable_navigationItemStyle, + // Opt-ins apply only on the Duo's short display; unset falls back to the system default. + minimizationBehavior: isDuoDevice(deviceType) + ? options.unstable_headerMinimizationBehavior + : undefined, tintColor: options.headerTintColor, searchBar: mailSearch || searchOptions ? ( ``` ## docs/operations/mobile-screens-fork.md Status: modified; +1; −1 ```diff @@ -1,7 +1,7 @@ # Building the mobile Screens dependency The mobile v5 stack uses a committed tarball from the -[T3 Screens fork](https://github.com/pingdotgg/react-native-screens/tree/t3-v5.0.0-t3.36). +[T3 Screens fork](https://github.com/pingdotgg/react-native-screens/tree/t3-v5.0.0-t3.37). The fork owns the integration changes; the app does not patch this package. Each archive includes compiled JavaScript, declarations, native source and `t3-fork.json` recording its version, source commit and upstream base. ``` ## pnpm-lock.yaml Status: modified; +9; −9 ```diff @@ -553,7 +553,7 @@ version: 7.5.1(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) '@react-navigation/native-stack': specifier: 7.21.0 - version: 7.21.0(patch_hash=990d575444c4af2ce8218b3b7a8280fe244c03abbdb32b822a2e862f791dbf42)(717295d9841cbe75b29e7bc95e2e9d14) + version: 7.21.0(patch_hash=990d575444c4af2ce8218b3b7a8280fe244c03abbdb32b822a2e862f791dbf42)(110925a0d7a34aa12f32b4b743079ccc) '@shikijs/core': specifier: 4.2.0 version: 4.2.0 @@ -765,8 +765,8 @@ specifier: ~5.10.1 version: 5.10.1(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) react-native-screens: + specifier: file:deps/react-native-screens-5.0.0-t3.37.tgz - specifier: file:deps/react-native-screens-5.0.0-t3.36.tgz + version: file:apps/mobile/deps/react-native-screens-5.0.0-t3.37.tgz(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) - version: file:apps/mobile/deps/react-native-screens-5.0.0-t3.36.tgz(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) react-native-shiki-engine: specifier: ^0.3.12 version: 0.3.12(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) @@ -10675,9 +10675,9 @@ react: '*' react-native: '*' - react-native-screens@file:apps/mobile/deps/react-native-screens-5.0.0-t3.36.tgz: - resolution: {integrity: sha512-Fkd/KBWVC8NrGc3sBL7JdK5Zn1+2cw5tU0NxXWlqdkjjar5BntiQNU+NBvALM+NUnB4q7oHykYCQjW4Nk6i67A==, tarball: file:apps/mobile/deps/react-native-screens-5.0.0-t3.36.tgz} - version: 5.0.0-t3.36 + react-native-screens@file:apps/mobile/deps/react-native-screens-5.0.0-t3.37.tgz: + resolution: {integrity: sha512-LMm9e8lHseFaUYKF4tFkGkqpJFu36uwp6ZGQgBYksn+pmcx0voaSMkK0tGaZ59LFXXD2TGoBR3K9kAX++72Xig==, tarball: file:apps/mobile/deps/react-native-screens-5.0.0-t3.37.tgz} + version: 5.0.0-t3.37 peerDependencies: react: '*' react-native: '*' @@ -15618,7 +15618,7 @@ optionalDependencies: '@react-native-masked-view/masked-view': 0.3.2(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) - '@react-navigation/native-stack@7.21.0(patch_hash=990d575444c4af2ce8218b3b7a8280fe244c03abbdb32b822a2e862f791dbf42)(717295d9841cbe75b29e7bc95e2e9d14)': + '@react-navigation/native-stack@7.21.0(patch_hash=990d575444c4af2ce8218b3b7a8280fe244c03abbdb32b822a2e862f791dbf42)(110925a0d7a34aa12f32b4b743079ccc)': dependencies: '@react-navigation/elements': 2.9.45(d8845bac868f4d8a58c8a8f12ad0d4a5) '@react-navigation/native': 7.5.1(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) @@ -15626,7 +15626,7 @@ react: 19.3.0 react-native: 0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6) react-native-safe-area-context: 5.10.1(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) - react-native-screens: file:apps/mobile/deps/react-native-screens-5.0.0-t3.36.tgz(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) + react-native-screens: file:apps/mobile/deps/react-native-screens-5.0.0-t3.37.tgz(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) sf-symbols-typescript: 2.2.0 warn-once: 0.1.1 transitivePeerDependencies: @@ -21212,7 +21212,7 @@ react: 19.3.0 react-native: 0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6) - react-native-screens@file:apps/mobile/deps/react-native-screens-5.0.0-t3.36.tgz(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0): + react-native-screens@file:apps/mobile/deps/react-native-screens-5.0.0-t3.37.tgz(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0): dependencies: react: 19.3.0 react-freeze: 1.0.4(react@19.3.0) ```