From da3ba742404cc71c46cf32d15c92bbd3dd62e89b Mon Sep 17 00:00:00 2001
From: Yugo Ogura <15419227+Spice-Z@users.noreply.github.com>
Date: Tue, 12 Dec 2023 02:13:43 -0800
Subject: [PATCH] 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
---
 .../Libraries/Components/TextInput/TextInput.js | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js
index 57eebf7c751..f9474401dbc 100644
--- a/packages/react-native/Libraries/Components/TextInput/TextInput.js
+++ b/packages/react-native/Libraries/Components/TextInput/TextInput.js
@@ -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.