From db066acfe3994787d706ad082ce718a91b8249f5 Mon Sep 17 00:00:00 2001
From: Fabrizio Cucci <fabriziocucci@meta.com>
Date: Tue, 6 Feb 2024 03:09:54 -0800
Subject: [PATCH] Convert InputAccessoryView to function component (#42883)

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

As per title.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D53355697

fbshipit-source-id: cb145c31764ae8b57489b1a1183918924e6cb49b
---
 .../TextInput/InputAccessoryView.js           | 34 +++++++++----------
 .../__snapshots__/public-api-test.js.snap     | 12 +++++++
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js b/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js
index 958a02da3ba..3bbd3ba5b5a 100644
--- a/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js
+++ b/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js
@@ -85,27 +85,25 @@ type Props = $ReadOnly<{|
   backgroundColor?: ?ColorValue,
 |}>;
 
-class InputAccessoryView extends React.Component<Props> {
-  render(): React.Node {
-    if (Platform.OS === 'ios') {
-      if (React.Children.count(this.props.children) === 0) {
-        return null;
-      }
-
-      return (
-        <RCTInputAccessoryViewNativeComponent
-          style={[this.props.style, styles.container]}
-          nativeID={this.props.nativeID}
-          backgroundColor={this.props.backgroundColor}>
-          {this.props.children}
-        </RCTInputAccessoryViewNativeComponent>
-      );
-    } else {
-      console.warn('<InputAccessoryView> is only supported on iOS.');
+const InputAccessoryView: React.AbstractComponent<Props> = (props: Props) => {
+  if (Platform.OS === 'ios') {
+    if (React.Children.count(props.children) === 0) {
       return null;
     }
+
+    return (
+      <RCTInputAccessoryViewNativeComponent
+        style={[props.style, styles.container]}
+        nativeID={props.nativeID}
+        backgroundColor={props.backgroundColor}>
+        {props.children}
+      </RCTInputAccessoryViewNativeComponent>
+    );
+  } else {
+    console.warn('<InputAccessoryView> is only supported on iOS.');
+    return null;
   }
-}
+};
 
 const styles = StyleSheet.create({
   container: {
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
index cc737eb3f46..bc166b11ec1 100644
--- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -2405,6 +2405,18 @@ declare export default HostComponent<NativeProps>;
 "
 `;
 
+exports[`public API should not change unintentionally Libraries/Components/TextInput/InputAccessoryView.js 1`] = `
+"type Props = $ReadOnly<{|
+  +children: React.Node,
+  nativeID?: ?string,
+  style?: ?ViewStyleProp,
+  backgroundColor?: ?ColorValue,
+|}>;
+declare const InputAccessoryView: React.AbstractComponent<Props>;
+declare module.exports: InputAccessoryView;
+"
+`;
+
 exports[`public API should not change unintentionally Libraries/Components/TextInput/RCTInputAccessoryViewNativeComponent.js 1`] = `
 "export * from \\"../../../src/private/specs/components/RCTInputAccessoryViewNativeComponent\\";
 declare export default typeof RCTInputAccessoryViewNativeComponent;