Glitchy large header behavior when combaining SafeArea with Scroll

[maciekstosio]

Large header on iOS does not feel so smooth when wrapping with SafeArea (which is required in some cases).

You should be able to see a jump when using ScrollView wrapped with SafeAreaView:

without SafeArea	with SafeArea
without.SafeArea.mov	with.SafeArea.mov

Source code:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { ScrollView, Text, View, SafeAreaView } from 'react-native';
import {
  createNativeStackNavigator,
} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function NativeNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{
            headerLargeTitle: true,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const Card = ({text}) => (
  <View style={{
    height: 100,
    borderWidth: 1,
    borderColor: "#f0f",
    justifyContent: 'center',
    alignItems: 'center',
  }}>
    <Text style={{fontSize: 30}}>{text}</Text>
  </View>
);

export function Home() {
  const content = (
    <>
      <Card text="1" />
      <Card text="2" />
      <Card text="3" />
      <Card text="4" />
      <Card text="5" />
      <Card text="6" />
      <Card text="7" />
    </>
  );

  // ScrollView adjusted
  // return (
  //   <ScrollView contentInsetAdjustmentBehavior="automatic">
  //     {content}
  //   </ScrollView>
  // );

  // SafeAreaView with ScrollView
  return (
    <SafeAreaView>
      <ScrollView>
        {content}
      </ScrollView>
    </SafeAreaView>
  );
}

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description, Steps to reproduce, Snack or a link to a repository, Screens version, React Native version and Platforms sections.

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?