Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput value flickers when adding new lines #43363

Open
akshay-khapare opened this issue Mar 7, 2024 · 4 comments
Open

TextInput value flickers when adding new lines #43363

akshay-khapare opened this issue Mar 7, 2024 · 4 comments
Labels
Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Needs: Attention Issues where the author has responded to feedback. Platform: Android Android applications.

Comments

@akshay-khapare
Copy link

akshay-khapare commented Mar 7, 2024

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

default.1yes.mp4

video 2

default.1no.mp4
@github-actions github-actions bot added Component: TextInput Related to the TextInput component. Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Mar 7, 2024
Copy link

github-actions bot commented Mar 7, 2024

⚠️ 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.

@akshay-khapare
Copy link
Author

⚠️ 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

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Mar 7, 2024
@cortinico cortinico added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. and removed Needs: Triage 🔍 Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Mar 8, 2024
@lunaleaps lunaleaps added the Platform: Android Android applications. label Mar 8, 2024
@lunaleaps lunaleaps changed the title about TextInput TextInput value flickers when adding new lines Mar 8, 2024
@thisames
Copy link

thisames commented Mar 9, 2024

I can fixed that? @cortinico

@domenicoprestia
Copy link

Any news on this one?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: TextInput Related to the TextInput component. Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Needs: Attention Issues where the author has responded to feedback. Platform: Android Android applications.
Projects
None yet
Development

No branches or pull requests

5 participants