Skip to content

android: extending ReactEditText and ReactTextInputManager does not control how height is calculated in the multiline #54751

@divyanshu-patil

Description

@divyanshu-patil

Description

i want to make custom textinput
i extended the ReactEditText and ReactTextInputManager for creating fabric native component that will behave exactly like the react native's inbuilt textinput
but the problem was the height is set to 0 always if height is not specified explicitly
and the height auto grow logic not working if i made it multiline

Steps to reproduce

  1. create a react native app from cli
  2. go to fabric native component docs
  3. follow the exact steps
  4. create a custom textinput by extending the ReactEditText and ReactTextInputManager
  5. use the component without giving minHeight or any height
  6. observe the height

React Native Version

0.82

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 26.1
  CPU: (8) arm64 Apple M2
  Memory: 151.86 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.16.0
    path: /Users/divyanshupatil/.nvm/versions/node/v22.16.0/bin/node
  Yarn:
    version: 4.11.0
    path: /Users/divyanshupatil/.nvm/versions/node/v22.16.0/bin/yarn
  npm:
    version: 10.9.2
    path: /Users/divyanshupatil/.nvm/versions/node/v22.16.0/bin/npm
  Watchman:
    version: 2025.10.27.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK:
    API Levels:
      - "35"
      - "36"
    Build Tools:
      - 35.0.0
      - 36.0.0
      - 36.1.0
    System Images:
      - android-36.1 | Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.27812.49.2514.14217341
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.17
    path: /opt/homebrew/Cellar/openjdk@17/17.0.17/libexec/openjdk.jdk/Contents/Home/bin/javac
  Ruby:
    version: 3.2.9
    path: /opt/homebrew/opt/ruby@3.2/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.1
    wanted: 0.82.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

none its ui bug

MANDATORY Reproducer

none as it contains native code

Screenshots and Videos

Image

with minHeight 40 and multiline

Screen.Recording.2025-12-02.at.7.03.11.PM.mov

demo code

// specs/RichPasteSupportedInputText.ts

import type {
  BubblingEventHandler,
  ...
} from 'react-native/Libraries/Types/CodegenTypes';

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';

// types
....

type KeyboardType =
  | 'default'
  | 'email-address'
  ...

export type ReturnKeyType =
  | 'done'
 ...

export type Autocomplete =
  | 'birthdate-day'
  | 'birthdate-full'
  ...

/* Props */
export interface NativeProps extends ViewProps {
  value?: string;
  placeholder?: string;

  multiline?: boolean;
  numberOfLines?: Int32;

 // events and props
}

/* Commands */
type NativeComponentType = HostComponent<NativeProps>;

export default codegenNativeComponent<NativeProps>(
  'RichReactEditText',
) as HostComponent<NativeProps>;
// Minimal repro: this is only a thin wrapper around our native Fabric component
const RichReactEditText = React.forwardRef((props, ref) => {
  return <NativeRichComponent ref={ref} {...props} />;
});

export default RichReactEditText;
// RichReactEditText.kt
class RichReactEditText(context: Context) : ReactEditText(context) {
    init {
        background = null
        isVerticalScrollBarEnabled = false
        includeFontPadding = false
        gravity = android.view.Gravity.TOP
    }

// other methods
}
// RichReactEditTextManager.kt

class RichReactEditTextManager : ReactTextInputManager() {

    override fun getName(): String = "RichReactEditText"

    override fun createViewInstance(reactContext: ThemedReactContext): RichReactEditText {
        return RichReactEditText(reactContext)
    }

   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
        val base = super.getExportedCustomDirectEventTypeConstants()?.toMutableMap() ?: mutableMapOf()
        // custom events
        return base
    }
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions