KeyboardAwareScrollView jumps when contentInsetAdjustmentBehavior is set to "automatic"

[matinzd]

Describe the bug

When native react navigation header is enabled on iOS, we need to set the contentInsetAdjustmentBehavior to automatic so that scroll view can adjust the content inside based on the header height. Now when that is set on iOS, it causes visual jumps. I also have provided a workaround but that is not a good solution since if someone enables reduce transparency in iOS, the code can break. That's why contentInsetAdjustmentBehavior="automatic" is important.

Code snippet

Buggy code:

const Component = () => {
  return (
    <KeyboardAwareScrollView
      bottomOffset={64 + 16 * 2}
      keyboardShouldPersistTaps="handled"
      contentInsetAdjustmentBehavior="automatic"
      contentContainerStyle={{
        paddingHorizontal: 16,
        gap: 16,
      }}
    >
}

Workaround:

const Component = () => {
+ const headerHeight = useHeaderHeight();

  return (
    <KeyboardAwareScrollView
      bottomOffset={64 + 16 * 2}
      keyboardShouldPersistTaps="handled"
+     // contentInsetAdjustmentBehavior="automatic"
      contentContainerStyle={{
        paddingHorizontal: 16,
        gap: 16,
+        paddingTop: headerHeight,
      }}
    >
}

Repo for reproducing

TBD

To Reproduce
Steps to reproduce the behavior:

1. Enable native ios header
2. Set contentInsetAdjustmentBehavior to automatic so that scrollview inset would be adjusted automatically
3. Add inputs inside the scroll view

Expected behavior

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-03-13.at.09.09.50.mp4

Screenshots

ScreenRecording_03-12-2025_5-32-01_PM_1.mov

Smartphone (please complete the following information):

• Device: All
• OS: iOS 18
• RN version: 0.69.x
• RN architecture: old
• JS engine: Hermes
• Library version: 1.15.2