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) => { + 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) => { style={[props.style, styles.container]} nativeID={props.nativeID} backgroundColor={props.backgroundColor}> - {props.children} + + {props.children} + ); } 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[` should render as when mo ] } > - + + + `; @@ -28,7 +41,20 @@ exports[` should render as when no ] } > - + + + `; 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;