fix(mobile): remove tab control flicker on iOS PR screen

apps/mobile/src/features/pull-requests/PullRequestRouteScreen.tsx

@@ -72,7 +72,6 @@ import { AndroidWorkspaceSidebarButton } from "../layout/workspace-sidebar-toolb
 import { useWorkspaceSidebarHeaderItem } from "../layout/useWorkspaceSidebarHeaderItem";
 import { useAndroidWorkspaceBack } from "../workspace/useAndroidWorkspaceNavigation";
 import { EmptyState } from "../../components/ui/EmptyState";
-import { SegmentedControl } from "../../components/ui/SegmentedControl";
 import { SymbolView } from "../../components/ui/AppSymbol";
 import { RelativeTime } from "../../components/RelativeTime";
 import { NativeStackScreenOptions } from "../../native/StackHeader";
@@ -114,6 +113,7 @@ import { usePullRequestFilesSection } from "./PullRequestFiles";
 import { usePullRequestMaintainerEdits } from "./usePullRequestMaintainerEdits";
 import { PullRequestDescription } from "./PullRequestDescription";
 import { PullRequestMediaVisibleContext } from "./PullRequestMedia";
+import { usePullRequestTabControl } from "./PullRequestTabControl";
 import { PullRequestMarkdownRepository } from "./PullRequestMarkdown";
 import {
   PullRequestStatusMenu,
@@ -132,6 +132,7 @@ import {
 } from "@t3tools/client-runtime/source-control-clients";
 
 const EMPTY_IDS: readonly string[] = [];
+const LIST_PADDING_TOP = 8;
 
 function PullRequestTabScrollView(props: ScrollViewProps) {
   return (
@@ -401,6 +402,17 @@ export function PullRequestRouteScreen({ route }: StaticScreenProps<PullRequestP
     scrollViews.current[next]?.getNativeScrollRef().scrollTo({ y: offset, animated: false });
     setSection(next);
   };
+  const tabControl = usePullRequestTabControl({
+    options: [
+      { value: "overview", label: "Overview" },
+      ...(guidesEnabled ? [{ value: "guide" as const, label: "Guide" }] : []),
+      { value: "activity", label: "Activity" },
+    ],
+    selected: section,
+    onSelect: selectSection,
+    barInsetTop: barInsets.top,
+    listPaddingTop: LIST_PADDING_TOP,
+  });
   const tabContent = activityContent;
   const filesY = useRef(0);
   const descriptionY = useRef(0);
@@ -693,6 +705,7 @@ export function PullRequestRouteScreen({ route }: StaticScreenProps<PullRequestP
               >
                 <AnimatedLegendList
                   ref={listRefs[tab]}
+                  sharedValues={tabControl.listSharedValues(tab)}
                   // The scroll view owns its resting offset. LegendList keeps the first
                   // initialScrollOffset it gets, and the first render has the window's top
                   // inset (0 on the folded iPhone Duo), not the header's.
@@ -736,7 +749,7 @@ export function PullRequestRouteScreen({ route }: StaticScreenProps<PullRequestP
                   }}
                   contentContainerStyle={{
                     paddingHorizontal: 16,
-                    paddingTop: 8,
+                    paddingTop: LIST_PADDING_TOP,
                     paddingBottom: 24 + (Platform.OS === "android" ? toolbarHeight : 0),
                     // Short tabs must still be tall enough to preserve the collapsed header.
                     minHeight: Math.max(
@@ -870,25 +883,12 @@ export function PullRequestRouteScreen({ route }: StaticScreenProps<PullRequestP
                           onLayout={(event) => {
                             bodyY.current = event.nativeEvent.layout.height;
                             setHeaderHeight(event.nativeEvent.layout.height);
+                            tabControl.onHeaderLayout(event.nativeEvent.layout.y);
                           }}
                         >
                           <PullRequestIdentity pr={identity} params={params} />
-                          {/* UIKit draws the tapped control's glass lens outside the hidden
-                              tab's opacity, so only the visible tab mounts the control. */}
                           {Platform.OS !== "ios" || section === tab ? (
-                            <SegmentedControl
-                              options={[
-                                { value: "overview", label: "Overview" },
-                                ...(guidesEnabled
-                                  ? [{ value: "guide" as const, label: "Guide" }]
-                                  : []),
-                                { value: "activity", label: "Activity" },
-                              ]}
-                              selected={section}
-                              onSelect={selectSection}
-                              role="tab"
-                              size="compact"
-                            />
+                            tabControl.header
                           ) : (
                             <View style={{ height: 32 }} />
                           )}
@@ -900,6 +900,7 @@ export function PullRequestRouteScreen({ route }: StaticScreenProps<PullRequestP
                 />
               </View>
             ))}
+          {identity ? tabControl.overlay : null}
         </View>
         <PullRequestActionToolbar
           pr={pr}

apps/mobile/src/features/pull-requests/PullRequestTabControl.ios.tsx

@@ -0,0 +1,121 @@
+import { useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { SegmentedControl } from "../../components/ui/SegmentedControl";
+import type { PullRequestTabControl, PullRequestTabControlProps } from "./PullRequestTabControl";
+
+export type {
+  PullRequestSection,
+  PullRequestTabControl,
+  PullRequestTabControlProps,
+} from "./PullRequestTabControl";
+
+// The screen keeps one list per tab, and a control in each list header. When the tapped control's
+// list hides, UIKit keeps drawing its glass lens over the next list's control. So one control
+// above the lists takes the taps and follows the shown list's scroll. Under the bar, the header
+// copies take over, so the scroll edge effect still covers the control.
+export function usePullRequestTabControl(props: PullRequestTabControlProps): PullRequestTabControl {
+  const overviewScroll = useSharedValue(0);
+  const guideScroll = useSharedValue(0);
+  const activityScroll = useSharedValue(0);
+  const [listScroll] = useState(() => ({
+    overview: { scrollOffset: overviewScroll },
+    guide: { scrollOffset: guideScroll },
+    activity: { scrollOffset: activityScroll },
+  }));
+  const layout = useRef<{ header?: number; control?: number }>({});
+  // A shared value, not state, so a header layout change moves the control without a re-render.
+  const controlY = useSharedValue<number | null>(null);
+  // The two onLayout events can arrive in either order. Until both have, the header copy shows.
+  const measure = () => {
+    const { header, control } = layout.current;
+    if (header !== undefined && control !== undefined) {
+      controlY.set(props.listPaddingTop + header + control);
+    }
+  };
+  const shownScroll = listScroll[props.selected].scrollOffset;
+  const { barInsetTop } = props;
+  const underBar = useDerivedValue(
+    () => controlY.value === null || controlY.value - shownScroll.value < barInsetTop,
+  );
+  const overlayStyle = useAnimatedStyle(() => ({
+    opacity: underBar.value ? 0 : 1,
+    transform: [{ translateY: (controlY.value ?? 0) - shownScroll.value }],
+  }));
+  const headerStyle = useAnimatedStyle(() => ({ opacity: underBar.value ? 1 : 0 }));
+  // Touch follows whichever copy shows. It changes only when the control crosses the bar, so
+  // the JS state does not update while scrolling.
+  const [headerShown, setHeaderShown] = useState(true);
+  useAnimatedReaction(
+    () => underBar.value,
+    (shown, previous) => {
+      if (shown !== previous) runOnJS(setHeaderShown)(shown);
+    },
+  );
+  const control = (
+    <SegmentedControl
+      options={props.options}
+      selected={props.selected}
+      onSelect={props.onSelect}
+      role="tab"
+      size="compact"
+    />
+  );
+  return {
+    listSharedValues: (section) => listScroll[section],
+    onHeaderLayout: (y) => {
+      layout.current.header = y;
+      measure();
+    },
+    header: (
+      <View
+        onLayout={(event) => {
+          layout.current.control = event.nativeEvent.layout.y;
+          measure();
+        }}
+      >
+        <Animated.View
+          style={headerStyle}
+          pointerEvents={headerShown ? "auto" : "none"}
+          accessibilityElementsHidden
+        >
+          {control}
+        </Animated.View>
+        {/* VoiceOver skips views at opacity 0 and reads the overlay after the lists, so these
+            invisible tabs keep the reading order. Their taps land on the control under them. */}
+        <View
+          style={StyleSheet.absoluteFill}
+          className="flex-row"
+          pointerEvents="none"
+          accessibilityRole="tabbar"
+        >
+          {props.options.map((option) => (
+            <View
+              key={option.value}
+              className="flex-1"
+              accessible
+              accessibilityRole="tab"
+              accessibilityLabel={option.label}
+              accessibilityState={{ selected: option.value === props.selected }}
+            />
+          ))}
+        </View>
+      </View>
+    ),
+    overlay: (
+      <Animated.View
+        style={[{ position: "absolute", top: 0, left: 16, right: 16 }, overlayStyle]}
+        accessibilityElementsHidden
+      >
+        {control}
+      </Animated.View>
+    ),
+  };
+}

apps/mobile/src/features/pull-requests/PullRequestTabControl.tsx

@@ -0,0 +1,46 @@
+import type { AnimatedLegendListSharedValues } from "@legendapp/list/reanimated";
+import type { ReactNode } from "react";
+
+import { SegmentedControl } from "../../components/ui/SegmentedControl";
+
+export type PullRequestSection = "overview" | "guide" | "activity";
+
+export interface PullRequestTabControlProps {
+  readonly options: readonly { readonly value: PullRequestSection; readonly label: string }[];
+  readonly selected: PullRequestSection;
+  readonly onSelect: (section: PullRequestSection) => void;
+  /** Top inset the lists scroll under. */
+  readonly barInsetTop: number;
+  /** Top padding of each list's content container. */
+  readonly listPaddingTop: number;
+}
+
+export interface PullRequestTabControl {
+  readonly listSharedValues: (
+    section: PullRequestSection,
+  ) => AnimatedLegendListSharedValues | undefined;
+  /** Reports the y of the list header view that holds `header`. */
+  readonly onHeaderLayout: (y: number) => void;
+  /** Goes in each list header. */
+  readonly header: ReactNode;
+  /** Goes above the lists. */
+  readonly overlay: ReactNode;
+}
+
+// oxlint-disable-next-line t3code/no-hookless-use-function -- Non-iOS stub of a hook; the .ios.tsx file calls hooks.
+export function usePullRequestTabControl(props: PullRequestTabControlProps): PullRequestTabControl {
+  return {
+    listSharedValues: () => undefined,
+    onHeaderLayout: () => {},
+    header: (
+      <SegmentedControl
+        options={props.options}
+        selected={props.selected}
+        onSelect={props.onSelect}
+        role="tab"
+        size="compact"
+      />
+    ),
+    overlay: null,
+  };
+}