react / react/react-native

TextInput multiline is jumpy and flaky when pressing new line

Ouverte
#33,165 38 commentaires 22 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Component: TextInput Needs: Triage :mag:
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par le comportement multiline de React Native TextInput en utilisant la reproduction TypeScript fournie, puis comparez l’insertion et la suppression de sauts de ligne avec le défilement activé sur Android et iOS. Le travail est terminé lorsque le champ de saisie multiline ne saute plus et ne défile plus de manière imprévisible, y compris lors de la suppression rapide de sauts de ligne, tandis que scrollEnabled reste à true.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react-native
Domaine
mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.