fix: paddingTop problem for multiline TextInput (#41772)

Summary:
Fixed: https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/41772

Reviewed By: NickGerleman

Differential Revision: D51894473

Pulled By: yungsters

fbshipit-source-id: f11466100111cd8dd5f36bdbd4eb99f6a1633d66
This commit is contained in:
Yugo Ogura
2023-12-12 02:13:43 -08:00
committed by Facebook GitHub Bot
parent 952b32b06d
commit da3ba74240
@@ -1455,8 +1455,7 @@ 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 =
@@ -1464,7 +1463,12 @@ function InternalTextInput(props: Props): React.Node {
? 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) &&
@@ -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}
/>
);
@@ -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.