Android ReactEditTextImproved implementation (#13)

* adding ReactEditTextImproved native API

* patch renderer to add RCTTextInputImproved

* basic TextInput example

* patch rn api to point to custom ReactTextInputImprovedManager

* adding TextInputViewManager with RN API

* complete implementation of TextInput patch

Author: fabOnReact

android/build.gradle

@@ -39,6 +39,7 @@ def supportsNamespace() {
 android {
   if (supportsNamespace()) {
     namespace "com.text"
+    namespace "com.textinput"
 
     sourceSets {
       main {

android/src/main/java/com/text/TextViewPackage.java

@@ -5,6 +5,7 @@
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.uimanager.ViewManager;
+import com.textinput.ReactTextInputImprovedManager;
 
 import java.util.ArrayList;
 import java.util.Collections;
@@ -15,6 +16,7 @@ public class TextViewPackage implements ReactPackage {
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
     List<ViewManager> viewManagers = new ArrayList<>();
     viewManagers.add(new ReactTextViewImprovedManager());
+    viewManagers.add(new ReactTextInputImprovedManager());
     return viewManagers;
   }
 

android/src/main/java/com/textinput/ReactEditTextImproved.java

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.textinput;
+
+import android.util.Log;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.views.text.ReactTextUpdate;
+import com.facebook.react.views.textinput.ReactEditText;
+
+public class ReactEditTextImproved extends ReactEditText {
+
+  public ReactEditTextImproved(ReactContext context) {
+    super(context);
+  }
+
+  public void maybeSetText(ReactTextUpdate reactTextUpdate) {
+    super.maybeSetText(reactTextUpdate);
+    Log.w("TESTING", "ReactEditTextImproved => maybeSetText");
+  }
+}

android/src/main/java/com/textinput/ReactTextInputImprovedManager.java

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.textinput;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.views.text.ReactTextViewManagerCallback;
+import com.facebook.react.views.textinput.ReactEditText;
+import com.facebook.react.views.textinput.ReactTextInputManager;
+
+@ReactModule(name = ReactTextInputImprovedManager.NAME)
+public class ReactTextInputImprovedManager extends ReactTextInputManager {
+  public static final String NAME = "RCTTextInputImproved";
+  protected @Nullable ReactTextViewManagerCallback mReactTextViewManagerCallback;
+
+  @Override
+  public String getName() {
+    return NAME;
+  }
+
+  /*
+  public ReactTextInputImprovedManager() {
+    this(null);
+  }
+
+
+  public ReactTextInputImprovedManager(
+      @Nullable ReactTextViewManagerCallback reactTextViewManagerCallback) {
+    super(reactTextViewManagerCallback);
+  }
+  */
+
+  @Override
+  public ReactEditText createViewInstance(ThemedReactContext context) {
+    return new ReactEditTextImproved(context);
+  }
+}

example/src/App.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { ScrollView, View, StyleSheet, Text, TextInput } from 'react-native';
 import { TextScreen } from './TextScreen';
+import { TextInputScreen } from './TextInputScreen';
 
 export default function App() {
   const email =
@@ -10,7 +11,8 @@ export default function App() {
 }
 
 function CurrentScreen() {
-  return <TextScreen />;
+  // return <TextScreen />;
+  return <TextInputScreen />;
 }
 
 const styles = StyleSheet.create({});

example/src/TextInputScreen.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { View, TextInput, StyleSheet } from 'react-native';
+
+export function TextInputScreen() {
+  const [text, setText] = React.useState('');
+  return (
+    <View style={styles.container}>
+      <TextInput
+        onChangeText={(text) => {
+          console.log('onChangeText text is: ', text);
+          setText(text);
+        }}
+        style={styles.input}
+      >
+        {text}
+      </TextInput>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 100,
+  },
+  input: {
+    borderWidth: 1,
+    height: 100,
+    width: 400,
+  },
+});