react-native icon indicating copy to clipboard operation
react-native copied to clipboard

TextInput value flickers when adding new lines

Open akshay-khapare opened this issue 1 year ago • 4 comments

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} </TextInput>

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

akshay-khapare avatar Mar 07 '24 12:03 akshay-khapare

:warning: Missing Reproducible Example
:information_source: We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

github-actions[bot] avatar Mar 07 '24 12:03 github-actions[bot]

⚠️ Missing Reproducible Example ℹ️ We could not detect a reproducible example in your issue report. Please provide either:

  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

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

akshay-khapare avatar Mar 07 '24 12:03 akshay-khapare

I can fixed that? @cortinico

thisames avatar Mar 09 '24 15:03 thisames

Any news on this one?

domenicoprestia avatar Apr 03 '24 09:04 domenicoprestia