From 797705c00d84036dfcf7323f0b02cda01e1fc82a Mon Sep 17 00:00:00 2001
From: Sam Zhou <samzhou19815@meta.com>
Date: Thu, 15 May 2025 09:55:32 -0700
Subject: [PATCH] Make use of ref-as-prop support in examples (#51358)

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

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: D74812747

fbshipit-source-id: 7ded547ff62ca59d28abfc46a2f57466e2486acd
---
 .../examples/FlatList/BaseFlatListExample.js  | 69 +++++++++----------
 .../SectionList/SectionListBaseExample.js     | 11 ++-
 .../js/examples/TextInput/ExampleTextInput.js | 12 +++-
 3 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js
index a325b8a1f82..3d46dd5dc97 100644
--- a/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js
+++ b/packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js
@@ -70,42 +70,39 @@ type Props = $ReadOnly<{
 const BaseFlatListExample: component(
   ref: React.RefSetter<FlatList<string>>,
   ...props: Props
-) = React.forwardRef(
-  // $FlowFixMe[incompatible-call]
-  (props: Props, ref) => {
-    return (
-      <View style={styles.container}>
-        {props.testOutput != null ? (
-          <View testID="test_container" style={styles.testContainer}>
-            <Text style={styles.output} numberOfLines={1} testID="output">
-              {props.testOutput}
-            </Text>
-            {props.onTest != null ? (
-              <Button
-                testID="start_test"
-                onPress={props.onTest}
-                title={props.testLabel ?? 'Test'}
-              />
-            ) : null}
-          </View>
-        ) : null}
-        {props.children}
-        <FlatList
-          {...props.exampleProps}
-          // $FlowFixMe[incompatible-type]
-          ref={ref}
-          testID="flat_list"
-          // $FlowFixMe[incompatible-type]
-          data={DATA}
-          keyExtractor={(item, index) => item + index}
-          style={styles.list}
-          // $FlowFixMe[incompatible-type-arg]
-          renderItem={Item}
-        />
-      </View>
-    );
-  },
-);
+) = ({ref, ...props}: {ref: React.RefSetter<FlatList<string>>, ...Props}) => {
+  return (
+    <View style={styles.container}>
+      {props.testOutput != null ? (
+        <View testID="test_container" style={styles.testContainer}>
+          <Text style={styles.output} numberOfLines={1} testID="output">
+            {props.testOutput}
+          </Text>
+          {props.onTest != null ? (
+            <Button
+              testID="start_test"
+              onPress={props.onTest}
+              title={props.testLabel ?? 'Test'}
+            />
+          ) : null}
+        </View>
+      ) : null}
+      {props.children}
+      <FlatList
+        {...props.exampleProps}
+        // $FlowFixMe[incompatible-type]
+        ref={ref}
+        testID="flat_list"
+        // $FlowFixMe[incompatible-type]
+        data={DATA}
+        keyExtractor={(item, index) => item + index}
+        style={styles.list}
+        // $FlowFixMe[incompatible-type-arg]
+        renderItem={Item}
+      />
+    </View>
+  );
+};
 
 export default BaseFlatListExample;
 
diff --git a/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js b/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js
index de078de0061..23c11894e81 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js
@@ -77,7 +77,14 @@ const SectionListBaseExample: component(
   // $FlowIgnore[unclear-type]
   ref: React.RefSetter<SectionList<any>>,
   ...props: Props
-) = React.forwardRef((props: Props, ref): React.Node => {
+) = ({
+  ref,
+  ...props
+}: {
+  // $FlowIgnore[unclear-type]
+  ref: React.RefSetter<SectionList<any>>,
+  ...Props,
+}): React.Node => {
   return (
     <View style={styles.container}>
       {props.testOutput != null ? (
@@ -112,7 +119,7 @@ const SectionListBaseExample: component(
       />
     </View>
   );
-});
+};
 
 const styles = StyleSheet.create({
   item: {
diff --git a/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js b/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js
index 993e9e69d69..ad42951ef1d 100644
--- a/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js
+++ b/packages/rn-tester/js/examples/TextInput/ExampleTextInput.js
@@ -10,13 +10,19 @@
  */
 
 import {RNTesterThemeContext} from '../../components/RNTesterTheme';
-import React, {forwardRef, useContext} from 'react';
+import React, {useContext} from 'react';
 import {StyleSheet, TextInput} from 'react-native';
 
 const ExampleTextInput: component(
   ref: React.RefSetter<null | React.ElementRef<typeof TextInput>>,
   ...props: React.ElementConfig<typeof TextInput>
-) = forwardRef((props, ref) => {
+) = ({
+  ref,
+  ...props
+}: {
+  ref?: React.RefSetter<null | React.ElementRef<typeof TextInput>>,
+  ...React.ElementConfig<typeof TextInput>,
+}) => {
   const theme = useContext(RNTesterThemeContext);
 
   return (
@@ -34,7 +40,7 @@ const ExampleTextInput: component(
       ]}
     />
   );
-});
+};
 
 const styles = StyleSheet.create({
   input: {