Skip to content

TextInput value flickers when adding new lines #43363

@akshay-khapare

Description

@akshay-khapare

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Component: TextInputRelated to the TextInput component.Issue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.Needs: AttentionIssues where the author has responded to feedback.Platform: AndroidAndroid applications.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions