react / react/react-native

TextInput multiline is jumpy and flaky when pressing new line

オープン
#33,165 コメント 38 件 リアクション 22 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Component: TextInput Needs: Triage :mag:
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
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. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

提供された TypeScript の再現コードを使用して React Native TextInput の multiline 動作から始め、Android と iOS でスクロールを有効にした場合の改行の挿入と削除を比較します。scrollEnabled を true のままにしても、改行をすばやく削除する場合を含め、multiline の入力が不安定にジャンプしたりスクロールしたりしなくなれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。