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

[kirillzyusko]

Hm, in my example project I can not reproduce the problem 🤔

But I'm using react-native 0.78.x 🤔 (paper arch)

Simulator_Screen_Recording_-_iPhone_15_Pro_-_2025-03-18_at_14.53.12.mov

[matinzd]

For some weird reason this is still happening for me. I will try to reproduce this in a template app. @High5Apps I tried upgrading to latest 79 but I am still see the flickering. Not sure what's causing this.

[matinzd]

I was able to reproduce the bug. It occurs when the number of input fields exactly matches the window height, and a bottomOffset is set on the KeyboardAwareScrollView.

In the recording below, you can see that the bug disappears once I start adding more input fields. Since there’s a button at the bottom, I tried setting the offset to match the button’s height plus some additional spacing, ensuring the button remains visible when the last input is focused.

bug-repro.mp4

[alex-pominov]

Having exact same issue even with single input in the view. No matter if bottomOffset is set.

[baont97]

import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
import { useIsFocused } from "@react-navigation/native";

import * as hooks from "./SignUp.hooks";
import * as Components from "./components";

export const SignUpScreen = () => {
  const {} = hooks.useSignUp();
  const isFocused = useIsFocused();

  return (
    <KeyboardAwareScrollView
      keyboardDismissMode="interactive"
      enabled={isFocused}
      contentInsetAdjustmentBehavior="automatic"
      automaticallyAdjustKeyboardInsets
      disableScrollOnKeyboardHide // Enabling disableScrollOnKeyboardHide can fix this issue.
    >
      <Components.SignUpForm onSubmit={() => {}} isLoading={false} />
    </KeyboardAwareScrollView>
  );
};

simulator.mp4

You can try with disableScrollOnKeyboardHide = true.

[kirillzyusko]

Hey everyone 👋

I published a new preview version 1.21.0-beta.3 - could you please test and let me know if new implementation still have this issue? I re-worked the approach how layout is changing, so just curious if it's fixed in new version or not 👀

[matinzd]

Sure @kirillzyusko

I will do it when I find time.

[kirillzyusko]

Also not sure, but this issue may be caused by the same cause as #1336

I hope I can merge this PR soon and then publish new beta (or maybe final release) 🤞