Skip to content

[iOS] TextInput is hidden by the keyboard even when using KeyboardAwareScrollView #1218

@floydkim

Description

@floydkim

Thank you for your efforts that brought groundbreaking improvements to React Native keyboard handling.

Describe the bug

Starting from version 1.18.0, the TextInput area gets hidden behind the keyboard even when using KeyboardAwareScrollView.

It seems that the behavior when focusing changes depending on the cursor position from the previous focus.
Up to version 1.17.5, scrolling behaved based on the TextInput area, but from 1.18.0 it appears to behave based on the cursor position.

Code snippet

const BIG_TEXT = `Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum pass

age, and going through the cites of the word in classical literature, discovered the certain source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of The Extremes of Good and Evil by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit..", comes from a line in section 1.10.32.

s
s
s
`;

function AppContent() {
  const [_, setText] = useState('');

  return (
    <KeyboardAwareScrollView
      contentContainerStyle={styles.content}
      style={styles.container}
    >
      <View style={styles.spacer} />
      <TextInput
        multiline={true}
        defaultValue={BIG_TEXT}
        placeholder="TextInput#10"
        style={styles.input}
        onChangeText={setText}
      />
    </KeyboardAwareScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    paddingTop: 50,
  },
  spacer: {
    height: 400,
  },
  input: {
    width: '100%',
    borderWidth: 2,
    borderColor: 'black',
    borderRadius: 8,
    paddingHorizontal: 12,
  },
});

Repo for reproducing

https://github.com/floydkim/keyboard-controller-textinput-repro

To compare only the version of the library while keeping the React Native version fixed, I created a reproducer.
But this issue can also be reproduced in the example app.

To Reproduce
Steps to reproduce the behavior:

  1. Render multiple lines of text in a multiline TextInput component.
  2. Tap near the bottom of the TextInput area so the cursor is positioned at the bottom.
    • You can see the bottom of the TextInput is covered by the keyboard from the very first tap. 💥
  3. Tap near the top of the TextInput area and repeat.
  4. The TextInput area becomes hidden by the keyboard. 💥

It can be easily reproduced even without following the reproduction steps I provided.

Expected behavior

The entire TextInput area, including the bottom, should not be hidden by the keyboard.

Screenshots
If applicable, add screenshots to help explain your problem.

1.17.5 ✅ 1.18.0 💥
KC-1.17.5-RN0.81.5-NewArch.mov
KC-1.18.0-RN0.81.5-NewArch.mov

Smartphone (please complete the following information):

  • Desktop OS: MacOS 26.0.1 or less
  • Device: Simulator / iPhone 15
  • OS: iOS 26, 18
  • RN version: 0.81.5, 0.76.9
  • RN architecture: New / Old
  • JS engine: Hermes
  • Library version: 1.18.0+

Additional context

For reference, this problem is not limited to iOS 26. It was first discovered on iOS 18 real devices, and iOS 26 was just used for reproduction.

Because of this issue, I'm still staying on version 1.17.5.

To enable the New Architecture, I had to manually patch a few diffs released in later versions.
Thanks to the well-organized PRs and release notes, it hasn't been too difficult to keep using 1.17.5. 😭

Metadata

Metadata

Assignees

Labels

KeyboardAwareScrollView 📜Anything related to KeyboardAwareScrollView componentrepro providedIssue contains reproduction repository/code🐛 bugSomething isn't working🔥 AttentionAn issue, that requires attention (disturbs many users/has many reactions)

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions