Multiline TextInput Auto-growing and Scrolling Behavior Issues with KeyboardAwareScrollView

[NyoriK]

Overview
I've identified several inconsistencies in the TextInput component's auto-growing behavior when used with KeyboardAwareScrollView, affecting both iOS and Android platforms. These issues vary depending on prop configurations and component wrapping.

Detailed Findings

Base Case (No value/onChangeText props)

• TextInput doesn't auto-grow regardless of multiline prop
• Height only respects minHeight or height style properties
• Behavior consistent across iOS and Android

kas-without-props.mp4

With value and onChangeText props

1. Height Behavior:

• Respects minHeight and auto-grows after reaching minimum
• Fixed height when explicitly set; no auto-growing beyond specified height

1. Scrolling Issues:

• Noticeable "jumpy" behavior when:

  • Cursor reaches end of last line
  • First character on new line triggers internal scroll
  • Second character triggers height auto-grow and ScrollView adjustment

kas-with-props.mp4

• Less noticeable when cursor is in middle of content

TextInput Wrapped in View

• Auto-growing works without value/onChangeText props
• Platform-specific differences:
  • iOS: Minimal jumping, hardly noticeable
  • Android: Jumping behavior persists, similar to non-wrapped version

kas-with-views.mp4

Comparison with React Native's ScrollView
Native ScrollView demonstrates superior behavior:

• Consistent auto-growing without requiring value/onChangeText props
• Significantly reduced jumping compared to KeyboardAwareScrollView with View wrapper

rns-without-props-and-views.mp4

Code Examples
I've included three implementation scenarios to demonstrate these issues and one with react native ScrollView:

1. Basic Implementation

<KeyboardAwareScrollView>
  <TextInput 
    multiline
    placeholder="TextInput"
    placeholderTextColor="black"
    style={styles.textInput}
  />
</KeyboardAwareScrollView>

2. With Props

<KeyboardAwareScrollView>
  <TextInput 
    multiline
    value={value}
    onChangeText={onChange}
    placeholder="TextInput"
    placeholderTextColor="black"
    style={styles.textInput}
  />
</KeyboardAwareScrollView>

3. With View Wrapper

<KeyboardAwareScrollView>
  <View>
  <TextInput 
    multiline
    placeholder="TextInput"
    placeholderTextColor="black"
    style={styles.textInput}
  />
  </View>
</KeyboardAwareScrollView>

4. React Native ScrollView

<ScrollView>
  <TextInput 
    multiline
    placeholder="TextInput"
    placeholderTextColor="black"
    style={styles.textInput}
  />
</ScrollView>

Devices tested:
Android:

• Physical: Redmi Note 10 Pro
• Emulator: Pixel_8_API_35

iOS:

• Physical: iPhone 15

Development Environment:

• Desktop OS: MacOS Sonoma

Environment:

• expo: "~52.0.28"
• expo: "~52.0.28"
• react-native: "0.76.6"
• react-native-keyboard-controller: "^1.16.1"

[kirillzyusko]

@NyoriK do you test new architecture or old?

[NyoriK]

@kirillzyusko Yes.

app.json:

{
    "expo": {
        "name": "multiline-app",
        "slug": "multiline-app",
        "version": "1.0.0",
        "orientation": "portrait",
        "icon": "./assets/images/icon.png",
        "scheme": "myapp",
        "userInterfaceStyle": "automatic",
        "newArchEnabled": true,
        "ios": {
            "supportsTablet": true,
            "bundleIdentifier": "com.knyoridev.multiline-app"
        },
        "android": {
            "adaptiveIcon": {
                "foregroundImage": "./assets/images/adaptive-icon.png",
                "backgroundColor": "#ffffff"
            },
            "package": "com.knyoridev.multilineapp"
        },
        "web": {
            "bundler": "metro",
            "output": "static",
            "favicon": "./assets/images/favicon.png"
        },
        "plugins": [
            "expo-router",
            [
                "expo-splash-screen",
                {
                    "image": "./assets/images/splash-icon.png",
                    "imageWidth": 200,
                    "resizeMode": "contain",
                    "backgroundColor": "#ffffff"
                }
            ]
        ],
        "experiments": {
            "typedRoutes": true
        }
    }
}

[kirillzyusko]

@NyoriK would you mind to try this PR? And let me know if it fixes the problem for you?

In general it works, but the main downside is that it doesn't work on Android - I opened a PR in react-native. Let's see if it gets accepted/merged 👀

[NyoriK]

@kirillzyusko I've tested the PR, and can confirm it works as intended on iOS.

The behavior is now much closer to native ScrollView. There's still some minor jumpiness when typing at the end of the TextInput, but this appears to be the same as with native ScrollView and is expected due to the combination of TextInput's internal scroll and asynchronous height adjustments (as discussed in #708).

Looking forward to the Android fix once the React Native PR is merged. Thanks for working on this!

[NyoriK]

@kirillzyusko Just tested again on Android and can confirm - the fix doesn't work on Android. When typing reaches the keyboard area, the KeyboardAwareScrollView doesn't scroll up, and the content being typed goes underneath the keyboard. Will await the Android fix once the React Native PR is merged.

[kirillzyusko]

Just tested again on Android and can confirm - the fix doesn't work on Android. When typing reaches the keyboard area, the KeyboardAwareScrollView doesn't scroll up, and the content being typed goes underneath the keyboard. Will await the Android fix once the React Native PR is merged.

Yeah, an intermediate solution can be combining "additional view" approach on Android and using contentInset on iOS.

But it looks like PR has been merged in upstream, so maybe in RN 0.79 we'll get this prop available on Android 🙈

[mostlygeek]

Hi, I'm experiencing the same problems as describe in the issue chain. I'm using RN 0.79.2 and r-n-keyboard-controller 1.17.1. I'm testing on iOS (device and simulator). Curious is there a workaround for now?

The testing code I'm using is pretty simple. I'm trying to have an automatically expanding TextInput and when it grows the scrolling behaviour jumps to the top, or doesn't scroll to the caret.

return (
    <KeyboardAwareScrollView bottomOffset={50}>
      <TextInput value={text} onChangeText={setText} multiline style={styles.textInput} textAlignVertical="top" />
    </KeyboardAwareScrollView>
  );

[rikur]

One of the last issues with this lifesaver of a library. Subscribing.