react / react/react-native

TextInput multiline is jumpy and flaky when pressing new line

Open
#33,165 38 comments 22 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: TextInput Needs: Triage :mag:
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

When you set mutline to true and enter/delete new lines, the scrolling is really flaky. Notice that this app was instantiated with npx react-native init myapp --template react-native-template-typescript

Android

https://user-images.githubusercontent.com/21032419/155330305-e22acaae-0e77-422b-af85-c565f0e81073.mov

iOS

https://user-images.githubusercontent.com/21032419/155330662-c1bd6d24-d02a-4c6d-a6d4-8ce2010537cf.mov

Version

0.67.2

Output of npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Memory: 72.38 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - ~/projects/samalapit/sellers/mobile-app/node_modules/.bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
    Watchman: 2021.12.06.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /Users/aprilmintacpineda/.rvm/gems/ruby-3.0.2/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7935034
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.67.2 => 0.67.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Steps to reproduce
import { TextInput } from 'react-native';
<TextInput
  style={{
    borderWidth: 1,
    borderColor: '#000'
  }}
  multiline
/>

Adding scrollEnabled={false} will somehow fix the issue but:

  • it's not viable if you need the scrolling to be enabled.
  • It only fixes it for iOS, Android will still have a problem especially when delete new lines fast as seen in the video above.
Snack, code example, screenshot, or link to a repository

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the React Native TextInput multiline behavior using the provided TypeScript reproduction, and compare newline insertion and deletion with scrolling enabled on Android and iOS. Done means multiline input no longer jumps or scrolls unreliably, including rapid newline deletion, while scrollEnabled remains true.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.