TextInput multiline is jumpy and flaky when pressing new line
Nobody has claimed this yet.
- 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
iOS
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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