Create EditText native from android not working properly

[Unich-HieuDT]

Description

As you can see in the video, I entered text that is longer than the width of the EditText, and the text beyond that is not visible. The text should gradually scroll to the right.

• Notes:

  • I tried switching from Java to Kotlin, but it still doesn’t work.
  • I created a new project with version 0.73 + Kotlin, and it works.

• File CustomTextInputManager.java:

import android.text.InputType;
import android.widget.EditText;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;

public class CustomTextInputManager extends SimpleViewManager<EditText> {

    @Override
    public String getName() {
        return "CustomTextInput";
    }

    @Override
    protected EditText createViewInstance(ThemedReactContext reactContext) {
        EditText editText = new EditText(reactContext);
        editText.setHint("Enter text here");
        editText.setInputType(InputType.TYPE_CLASS_TEXT);
        return editText;
    }

    @ReactProp(name = "placeholder")
    public void setPlaceholder(EditText view, String placeholder) {
        view.setHint(placeholder);
    }

    @ReactProp(name = "text")
    public void setText(EditText view, String text) {
        view.setText(text);
    }

    @ReactProp(name = "keyboardType")
    public void setKeyboardType(EditText view, String type) {
        switch (type) {
            case "numeric":
                view.setInputType(InputType.TYPE_CLASS_NUMBER);
                break;
            case "email-address":
                view.setInputType(InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS);
                break;
            case "password":
                view.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD);
                break;
            default:
                view.setInputType(InputType.TYPE_CLASS_TEXT);
        }
    }
}

• File App.tsx:

import React, { useState } from 'react';
import { View, StyleSheet, requireNativeComponent } from 'react-native';

const CustomTextInput = requireNativeComponent('CustomTextInput');

const App = () => {
  const [text, setText] = useState("");

  return (
    <View style={styles.container}>
      <CustomTextInput
        style={styles.input}
        placeholder="Type something..."
        text={text}
        keyboardType="numeric"
        onChangeText={(newText) => setText(newText)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    width: 250,
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 8,
  },
});

export default App;

Steps to reproduce

1. Install the application with yarn android
2. Enter text into the EditText

React Native Version

0.71.3

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
    OS: macOS 15.1.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 268.98 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    Yarn: 3.6.4 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.16.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 24.1, iOS 18.1, macOS 15.1, tvOS 18.1, visionOS 2.1, watchOS 11.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2024.1 AI-241.18034.62.2412.12266719
    Xcode: 16.1/16B40 - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.10 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.3 => 0.71.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Stacktrace or Logs

No crash

Reproducer

N/A

Screenshots and Videos

Uploading EditText.mp4…

[react-native-bot]

Caution

Too old version: It looks like your issue or the example you provided uses a Too Old Version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

Caution

Too old version: It looks like your issue or the example you provided uses a Too Old Version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[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.