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