Textinput Issue

[akshay-khapare]

Description

While typing in a TextInput, moving to the next line causes the top line of text to partially hide under the input area. It reappears only after typing a character, creating a poor UI/UX experience.

Steps to reproduce

1. while typing

React Native Version

0.76.5

Affected Platforms

Runtime - Android, Runtime - iOS, Build - MacOS, Build - Windows

Output of npx react-native info

System:
  OS: Windows 11 10.0.22631
  CPU: "(8) x64 AMD Ryzen 3 5300U with Radeon Graphics         "
  Memory: 556.77 MB / 7.33 GB
Binaries:
  Node:
    version: 22.11.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 10.9.0
    path: ~\AppData\Roaming\npm\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 33.0.0
      - 34.0.0
      - 35.0.0
    Android NDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
IDEs:
  Android Studio: AI-241.18034.62.2411.12169540
  Visual Studio: Not Found
Languages:
  Java: javac 23
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: ^15.1.3
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.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

none

Reproducer

none

Screenshots and Videos

video_2024-12-13_21-30-34.mp4

[react-native-bot]

Warning

Missing reproducer: 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/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[DeepakSharma04]

I'm also facing a similar issue in iOS. I'm trying to implement the @mention input functionality. When I add a mentioned email, the text in the input field gets hidden and shows an indicator but in android it's working. Can anyone help me fix this?

"react": "18.3.1",
"react-native": "0.76.3",

<View style={{ flex: 1 }}>
     <TextInput
       multiline={true}
       {...textInputProps}
       ref={handleTextInputRef}
       onChangeText={onChangeInput}
       onSelectionChange={handleSelectionChange}>

       <Text style={{ flex: 1, flexDirection: 'row' }}>
         {parts.map(({ text, partType, data }, index) =>
           partType ? (
             <Text
               key={`${index}-${data?.trigger ?? 'pattern'}`}
               style={partType.textStyle ?? defaultMentionTextStyle}>
               {text}
             </Text>
           ) : (
             <Text
               key={index}
               style={{ color: COLORS.secondary, fontSize: 18, fontFamily: FontFamily.PTSansRegular, }} >
               {text}
             </Text>
           )
         )}
       </Text>

     </TextInput>

     {/*---Show suggestions list on bottom if isBottomMentionSuggestionsRender ==true---*/}
     {partTypes
       .filter(one => (
         isMentionPartType(one) &&
         one.renderSuggestions != null &&
         one.isBottomMentionSuggestionsRender
       ))
       .map(renderMentionSuggestions)}
   </View>

Screen.Recording.2024-12-15.at.7.39.54.PM.mov

[Tencryn]

I ran into this exact same issue, and here is a reproduction:
https://snack.expo.dev/obYXADmXjSlyg6bEes5oQ?platform=android

Steps:

• Type anything in the first line
• Make a new line (the first line will now be cut off)
• Type anything in the second line (the first line is now fully visible)

It does not occur when running the snack using Expo 51, only with Expo 52. Occurs with RN 0.76.x without Expo too.