Skip to content

Commit

Permalink
fix: paddingTop problem for multiline TextInput (facebook#41772)
Browse files Browse the repository at this point in the history
Summary:
Fixed: facebook#41773

## Changelog:

[GENERAL] [FIXED] - not applying `multilineInput` when props's style has paddingTop related style

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

Pick one each for the category and type tags:

[GENERAL] [FIXED] - Message

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

Pull Request resolved: facebook#41772

Reviewed By: NickGerleman

Differential Revision: D51894473

Pulled By: yungsters

fbshipit-source-id: f11466100111cd8dd5f36bdbd4eb99f6a1633d66
  • Loading branch information
Spice-Z authored and Othinn committed Jan 9, 2024
1 parent f57f24f commit e88c9a4
Showing 1 changed file with 12 additions and 5 deletions.
17 changes: 12 additions & 5 deletions packages/react-native/Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -1455,16 +1455,20 @@ function InternalTextInput(props: Props): React.Node {
};
}

// $FlowFixMe[underconstrained-implicit-instantiation]
let style = flattenStyle(props.style);
const style = flattenStyle<TextStyleProp>(props.style);

if (Platform.OS === 'ios') {
const RCTTextInputView =
props.multiline === true
? RCTMultilineTextInputView
: RCTSinglelineTextInputView;

style = props.multiline === true ? [styles.multilineInput, style] : style;
const useMultilineDefaultStyle =
props.multiline === true &&
(style == null ||
(style.padding == null &&
style.paddingVertical == null &&
style.paddingTop == null));

const useOnChangeSync =
(props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
Expand Down Expand Up @@ -1494,7 +1498,10 @@ function InternalTextInput(props: Props): React.Node {
onSelectionChange={_onSelectionChange}
onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
selection={selection}
style={style}
style={StyleSheet.compose(
useMultilineDefaultStyle ? styles.multilineDefault : null,
style,
)}
text={text}
/>
);
Expand Down Expand Up @@ -1771,7 +1778,7 @@ export type TextInputComponentStatics = $ReadOnly<{|
|}>;

const styles = StyleSheet.create({
multilineInput: {
multilineDefault: {
// This default top inset makes RCTMultilineTextInputView seem as close as possible
// to single-line RCTSinglelineTextInputView defaults, using the system defaults
// of font size 17 and a height of 31 points.
Expand Down

0 comments on commit e88c9a4

Please sign in to comment.