react / react/react-native

TextInput value flickers when adding new lines

Đang mở
#43,363 6 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Component: TextInput Issue: Author Provided Repro Needs: Attention Platform: Android
Ngôn ngữ chính
C++
Star
127k
Fork
25.3k
Merge trung bình
1 ngày 23 giờ
Pull request đã merge (30 ngày)
4

Mô tả

Description

Text inside text input is flickering while going to next line as well as deleting text (video 1)

but problem solved if i give height prop instead of maxHeight to the textinput or specify number of lines (video 2)

code

<TextInput
multiline
onFocus={() => setIsFocused(true)}
underlineColorAndroid={'red'}
style={{
color: colors.text,
// height: 350,
fontSize: 18,
maxHeight: 350,
marginLeft: 5,
width: '100%',
}}
textAlignVertical="top"
spellCheck={false}
onChange={e => setText(e.nativeEvent.text)}>
{txt}

Steps to reproduce
React Native Version

0.73.5

Affected Platforms

Runtime - Android

Output of npx react-native info
info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.22631
  CPU: "(8) x64 AMD Ryzen 3 5300U with Radeon Graphics         "
  Memory: 969.45 MB / 7.33 GB
Binaries:
  Node:
    version: 20.11.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 10.5.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "21"
      - "28"
      - "29"
      - "30"
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 29.0.2
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-34 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.19041.0
IDEs:
  Android Studio: AI-222.4459.24.2221.10121639
  Visual Studio: Not Found
Languages:
  Java: 17.0.8
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.5
    wanted: 0.73.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found
Stacktrace or Logs
-
Reproducer

snack.expo.dev/@akshaykhapare/carefree-blue-croissant?platform=android

Screenshots and Videos

video 1

https://github.com/facebook/react-native/assets/139696100/89d6f958-aefd-401e-b9dc-40a9f799abd8

video 2

https://github.com/facebook/react-native/assets/139696100/38443aae-2857-47db-b8ec-0047d9dd07fd

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Issue không nêu tệp mã nguồn hay test nào. Trước tiên, hãy chạy Expo Snack được liên kết trên Android và tái hiện hiện tượng nhấp nháy khi thêm hoặc xóa các dòng trong một TextInput nhiều dòng sử dụng maxHeight; được xem là hoàn tất khi hiện tượng nhấp nháy biến mất mà không cần chiều cao cố định hoặc số dòng tường minh.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
android, react-native
Lĩnh vực
mobile-dev
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
42/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.