iOS: Large title jumps / offset appears during interrupted scroll #3386
Description
Description:
When using headerLargeTitle with Expo Router and react-native-screens, the large title collapses incorrectly when the scroll animation is interrupted — for example, if you start scrolling up, then release or drag again before the animation completes.
As a result, a visible offset (gap) appears between the header and the scroll content, and the list “jumps” slightly on small upward scrolls.
This makes the scroll interaction feel jittery and inconsistent.
The issue occurs consistently with both ScrollView and FlatList on iOS.
🔍 Environment
- expo-router:
~6.0.14 - react-native-screens:
4.18.0(also reproducible on4.16.0) - react-native:
0.81.5 - expo:
~54.0.23(prebuilt for iOS) - Platform: iOS (physical device + simulator)
🧩 Steps to Reproduce
- Create a new Expo project (
npx create-expo-app largetitle) - Add the following files:
app/_layout.tsx
import { Stack } from "expo-router";
export default function RootLayout() {
return (
<Stack
screenOptions={{
title: "Example",
headerLargeTitle: true,
headerShadowVisible: false,
headerLargeTitleShadowVisible: false,
headerLargeStyle: {
backgroundColor: "yellow",
},
}}
/>
);
}app/index.tsx
import { ScrollView, Text, View } from "react-native";
export default function Index() {
return (
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={{ flex: 1, backgroundColor: "white" }}
>
{Array.from({ length: 100 }).map((_, i) => (
<View
key={i}
style={{
paddingVertical: 16,
borderBottomWidth: 1,
borderBottomColor: "#eee",
alignItems: "center",
}}
>
<Text style={{ fontSize: 18 }}>Text {i + 1}</Text>
</View>
))}
</ScrollView>
);
}- Run
npx expo run:ios - Scroll up slightly and interrupt the scroll (drag, pause, or change direction mid-gesture).
→ The large title collapses prematurely, creating a visible gap before snapping back.
🎥 Video
Attached below — shows how the large title collapses too early and creates a brief offset.
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-11-11.at.00.46.43.mov
✅ Expected behavior
The large title should collapse smoothly only after crossing the scroll threshold, without any jitter or visible offset when the scroll is interrupted.
❌ Actual behavior
Interrupting the scroll (by slightly dragging or holding) causes a layout jump and a temporary gap between the header and list content.