From 80482d6be3dcaccbf8e47422df1b62f710341baf Mon Sep 17 00:00:00 2001
From: Sam Zhou <samzhou19815@meta.com>
Date: Thu, 15 May 2025 13:48:05 -0700
Subject: [PATCH] Make use of ref-as-prop support in TextInput (#51367)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51367

Make use of the React 19 feature so that we can remove the remaining `forwardRef` in react native.

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D74810113

fbshipit-source-id: cb841ab71ef582f10f478f2094837cf52d9cdf68
---
 .../Components/TextInput/TextInput.js         | 47 ++++++++++---------
 .../TextInput/__tests__/TextInput-test.js     |  5 --
 .../__snapshots__/TextInput-test.js.snap      |  4 --
 3 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js
index 48a65d962a2..94fd01ff3b6 100644
--- a/packages/react-native/Libraries/Components/TextInput/TextInput.js
+++ b/packages/react-native/Libraries/Components/TextInput/TextInput.js
@@ -871,27 +871,28 @@ const autoCompleteWebToTextContentTypeMap = {
   username: 'username',
 };
 
-const ExportedForwardRef: component(
+const TextInput: component(
   ref?: React.RefSetter<TextInputInstance>,
   ...props: React.ElementConfig<typeof InternalTextInput>
-) = React.forwardRef(function TextInput(
-  {
-    allowFontScaling = true,
-    rejectResponderTermination = true,
-    underlineColorAndroid = 'transparent',
-    autoComplete,
-    textContentType,
-    readOnly,
-    editable,
-    enterKeyHint,
-    returnKeyType,
-    inputMode,
-    showSoftInputOnFocus,
-    keyboardType,
-    ...restProps
-  },
-  forwardedRef: React.RefSetter<TextInputInstance>,
-) {
+) = function TextInput({
+  ref: forwardedRef,
+  allowFontScaling = true,
+  rejectResponderTermination = true,
+  underlineColorAndroid = 'transparent',
+  autoComplete,
+  textContentType,
+  readOnly,
+  editable,
+  enterKeyHint,
+  returnKeyType,
+  inputMode,
+  showSoftInputOnFocus,
+  keyboardType,
+  ...restProps
+}: {
+  ref?: React.RefSetter<TextInputInstance>,
+  ...React.ElementConfig<typeof InternalTextInput>,
+}) {
   return (
     <InternalTextInput
       allowFontScaling={allowFontScaling}
@@ -930,12 +931,12 @@ const ExportedForwardRef: component(
       forwardedRef={forwardedRef}
     />
   );
-});
+};
 
-ExportedForwardRef.displayName = 'TextInput';
+TextInput.displayName = 'TextInput';
 
 // $FlowFixMe[prop-missing]
-ExportedForwardRef.State = {
+TextInput.State = {
   currentlyFocusedInput: TextInputState.currentlyFocusedInput,
 
   currentlyFocusedField: TextInputState.currentlyFocusedField,
@@ -964,4 +965,4 @@ const verticalAlignToTextAlignVerticalMap = {
 };
 
 // $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
-export default ExportedForwardRef as any as TextInputType;
+export default TextInput as any as TextInputType;
diff --git a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js b/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js
index 86a0d33cecc..6ecf33c65b1 100644
--- a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js
+++ b/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js
@@ -243,7 +243,6 @@ jest.unmock('../TextInput');
         accessible={true}
         allowFontScaling={true}
         focusable={true}
-        forwardedRef={null}
         mostRecentEventCount={0}
         onBlur={[Function]}
         onChange={[Function]}
@@ -287,7 +286,6 @@ jest.unmock('../TextInput');
         accessible={true}
         allowFontScaling={true}
         focusable={true}
-        forwardedRef={null}
         mostRecentEventCount={0}
         onBlur={[Function]}
         onChange={[Function]}
@@ -330,7 +328,6 @@ jest.unmock('../TextInput');
         accessible={true}
         allowFontScaling={true}
         focusable={true}
-        forwardedRef={null}
         mostRecentEventCount={0}
         nativeID="id"
         onBlur={[Function]}
@@ -461,7 +458,6 @@ jest.unmock('../TextInput');
         aria-valuenow={3}
         aria-valuetext="3"
         focusable={true}
-        forwardedRef={null}
         mostRecentEventCount={0}
         onBlur={[Function]}
         onChange={[Function]}
@@ -502,7 +498,6 @@ jest.unmock('../TextInput');
         accessible={true}
         allowFontScaling={true}
         focusable={true}
-        forwardedRef={null}
         mostRecentEventCount={0}
         onBlur={[Function]}
         onChange={[Function]}
diff --git a/packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap b/packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
index db2987ee799..8eed524569e 100644
--- a/packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
+++ b/packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
@@ -5,7 +5,6 @@ exports[`TextInput tests (useTextChildren = false) should render as expected: sh
   accessible={true}
   allowFontScaling={true}
   focusable={true}
-  forwardedRef={null}
   mostRecentEventCount={0}
   onBlur={[Function]}
   onChange={[Function]}
@@ -32,7 +31,6 @@ exports[`TextInput tests (useTextChildren = false) should render as expected: sh
   accessible={true}
   allowFontScaling={true}
   focusable={true}
-  forwardedRef={null}
   mostRecentEventCount={0}
   onBlur={[Function]}
   onChange={[Function]}
@@ -59,7 +57,6 @@ exports[`TextInput tests (useTextChildren = true) should render as expected: sho
   accessible={true}
   allowFontScaling={true}
   focusable={true}
-  forwardedRef={null}
   mostRecentEventCount={0}
   onBlur={[Function]}
   onChange={[Function]}
@@ -86,7 +83,6 @@ exports[`TextInput tests (useTextChildren = true) should render as expected: sho
   accessible={true}
   allowFontScaling={true}
   focusable={true}
-  forwardedRef={null}
   mostRecentEventCount={0}
   onBlur={[Function]}
   onChange={[Function]}