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

https://github.com/user-attachments/assets/a54eb1a4-2a08-43dc-bf57-686a16eabd74

Screenshots

https://github.com/user-attachments/assets/68bd1f81-9332-4b46-a04c-e78ac83595ff

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)

https://github.com/user-attachments/assets/2ddcd6bf-03ba-40fb-b8dc-a88fb962919a

[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.

https://github.com/user-attachments/assets/c1639537-5956-4d5e-8c58-736523e17357

[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>
  );
};

https://github.com/user-attachments/assets/881be05d-6ac1-4942-92e5-4086bbefdcc9

You can try with disableScrollOnKeyboardHide = true.