react / react/react-native

TextInput multiline is jumpy and flaky when pressing new line

未关闭
#33,165 38 条评论 22 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Component: TextInput Needs: Triage :mag:
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

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

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

使用提供的 TypeScript 复现代码,从 React Native TextInput 的 multiline 行为入手,并比较在 Android 和 iOS 上启用滚动时换行符的插入和删除。完成标准是 multiline 输入不再出现不可靠的跳动或滚动,包括快速删除换行符时,同时 scrollEnabled 仍保持为 true。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native
领域
mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
冷清
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。