Adjust InputAccessoryView width to match device width within Safe Area constraints (#43303)

Summary:
This PR updates the `InputAccessoryView` component to improve its width handling during device orientation changes for both Fabric and the old renderer. With this update, the component will always occupy the full width of the screen and adjust its size when the device orientation changes.

It also updates the component to stick to the safe area in React Native instead of iOS native. This tweak opens up possibilities for better customizations down the line.

Resolves: https://github.com/facebook/react-native/issues/27887

## Changelog:

[IOS] [FIXED] - Fix `InputAccessoryView` width on device orientation change

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

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

Test Plan:
https://github.com/facebook/react-native/assets/5813840/cd3cc7bf-21c2-42a7-9f59-53bb613b9ef1

Difference between horizontal list with horizontal safe area inset in the component or on the content
| component constraint | content inset |
| ------ | ------ |
|   <video src="https://github.com/facebook/react-native/assets/5813840/173c26c8-5420-4ea2-beaa-6151c13c2119">  |<video src="https://github.com/facebook/react-native/assets/5813840/217a06eb-8634-4a26-9b70-392f7cf16112">   |

Reviewed By: cortinico

Differential Revision: D58188210

Pulled By: cipolleschi

fbshipit-source-id: 196343494cf545a22f3bc011f79b5fd592a5deb3

packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js

@@ -8,11 +8,13 @@
  * @format
  */
 
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import StyleSheet, {
   type ColorValue,
   type ViewStyleProp,
 } from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
+import useWindowDimensions from '../../Utilities/useWindowDimensions';
 import RCTInputAccessoryViewNativeComponent from './RCTInputAccessoryViewNativeComponent';
 import * as React from 'react';
 
@@ -86,6 +88,8 @@ type Props = $ReadOnly<{|
 |}>;
 
 const InputAccessoryView: React.AbstractComponent<Props> = (props: Props) => {
+  const {width} = useWindowDimensions();
+
   if (Platform.OS === 'ios') {
     if (React.Children.count(props.children) === 0) {
       return null;
@@ -96,7 +100,9 @@ const InputAccessoryView: React.AbstractComponent<Props> = (props: Props) => {
         style={[props.style, styles.container]}
         nativeID={props.nativeID}
         backgroundColor={props.backgroundColor}>
-        {props.children}
+        <SafeAreaView style={[styles.safeAreaView, {width}]}>
+          {props.children}
+        </SafeAreaView>
       </RCTInputAccessoryViewNativeComponent>
     );
   } else {
@@ -109,6 +115,9 @@ const styles = StyleSheet.create({
   container: {
     position: 'absolute',
   },
+  safeAreaView: {
+    flex: 1,
+  },
 });
 
 export default InputAccessoryView;

packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/InputAccessoryView-test.js.snap

@@ -12,7 +12,20 @@ exports[`<InputAccessoryView /> should render as <RCTInputAccessoryView> when mo
     ]
   }
 >
-  <View />
+  <RCTSafeAreaView
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        Object {
+          "width": 750,
+        },
+      ]
+    }
+  >
+    <View />
+  </RCTSafeAreaView>
 </RCTInputAccessoryView>
 `;
 
@@ -28,7 +41,20 @@ exports[`<InputAccessoryView /> should render as <RCTInputAccessoryView> when no
     ]
   }
 >
-  <View />
+  <RCTSafeAreaView
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        Object {
+          "width": 750,
+        },
+      ]
+    }
+  >
+    <View />
+  </RCTSafeAreaView>
 </RCTInputAccessoryView>
 `;
 

packages/react-native/Libraries/Text/TextInput/RCTInputAccessoryViewContent.mm

@@ -31,8 +31,8 @@
 
     [_safeAreaContainer.bottomAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.bottomAnchor].active = YES;
     [_safeAreaContainer.topAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.topAnchor].active = YES;
-    [_safeAreaContainer.leadingAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.leadingAnchor].active = YES;
-    [_safeAreaContainer.trailingAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.trailingAnchor].active = YES;
+    [_safeAreaContainer.leadingAnchor constraintEqualToAnchor:self.leadingAnchor].active = YES;
+    [_safeAreaContainer.trailingAnchor constraintEqualToAnchor:self.trailingAnchor].active = YES;
   }
   return self;
 }

packages/react-native/React/Fabric/Mounting/ComponentViews/InputAccessory/RCTInputAccessoryContentView.mm

@@ -27,8 +27,8 @@
     [NSLayoutConstraint activateConstraints:@[
       [_safeAreaContainer.bottomAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.bottomAnchor],
       [_safeAreaContainer.topAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.topAnchor],
-      [_safeAreaContainer.leadingAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.leadingAnchor],
-      [_safeAreaContainer.trailingAnchor constraintEqualToAnchor:self.safeAreaLayoutGuide.trailingAnchor]
+      [_safeAreaContainer.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
+      [_safeAreaContainer.trailingAnchor constraintEqualToAnchor:self.trailingAnchor]
     ]];
   }
   return self;