From 8597727c28d9cb77012f3f4ebb032c335246d589 Mon Sep 17 00:00:00 2001
From: Mauricio Meirelles <mauricio.meirelles@shopify.com>
Date: Tue, 11 Jun 2024 09:21:29 -0700
Subject: [PATCH] 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
---
 .../TextInput/InputAccessoryView.js           | 11 ++++++-
 .../InputAccessoryView-test.js.snap           | 30 +++++++++++++++++--
 .../TextInput/RCTInputAccessoryViewContent.mm |  4 +--
 .../RCTInputAccessoryContentView.mm           |  4 +--
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js b/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js
index 43294aab0e4690..89b438e54944ef 100644
--- a/packages/react-native/Libraries/Components/TextInput/InputAccessoryView.js
+++ b/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;
diff --git a/packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/InputAccessoryView-test.js.snap b/packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/InputAccessoryView-test.js.snap
index d9e53dc1a5bba6..8ed62dfea9d2ec 100644
--- a/packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/InputAccessoryView-test.js.snap
+++ b/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>
 `;
 
diff --git a/packages/react-native/Libraries/Text/TextInput/RCTInputAccessoryViewContent.mm b/packages/react-native/Libraries/Text/TextInput/RCTInputAccessoryViewContent.mm
index 7fd8808c14fc4d..1c0a5612a58c59 100644
--- a/packages/react-native/Libraries/Text/TextInput/RCTInputAccessoryViewContent.mm
+++ b/packages/react-native/Libraries/Text/TextInput/RCTInputAccessoryViewContent.mm
@@ -31,8 +31,8 @@ - (instancetype)init
 
     [_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;
 }
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/InputAccessory/RCTInputAccessoryContentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/InputAccessory/RCTInputAccessoryContentView.mm
index 09de0401910031..20ac7e3ca7a7f4 100644
--- a/packages/react-native/React/Fabric/Mounting/ComponentViews/InputAccessory/RCTInputAccessoryContentView.mm
+++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/InputAccessory/RCTInputAccessoryContentView.mm
@@ -27,8 +27,8 @@ - (instancetype)init
     [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;