Adjust InputAccessoryView width to match device width within Safe Are…

…a 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: #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: #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
facebook · Jun 11, 2024 · 8597727 · 8597727
1 parent d72ac96
commit 8597727
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 7 deletions.
diff --git 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/...ve/Libraries/Components/TextInput/__tests__/__snapshots__/InputAccessoryView-test.js.snap b/...ve/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
@@ -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/...ative/React/Fabric/Mounting/ComponentViews/InputAccessory/RCTInputAccessoryContentView.mm b/...ative/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;