[patch-package fix] #2979 label covers text on iOS multiline TextInput

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-paper@4.11.1 for the project I’m working on.

There was a PR that tried to fix the iOS multiline label covering the underlying text, unfortunately this added a bigger issue of the label covering the underlying text even if no label was present. On top of this, it used a backgroundColor that was not controllable from the component (hardcoded in react-native-paper) - which meant if someone specified their own backgroundColor the label would have a different backgroundColor.

This simple patch-package checks if a label is present, and if so renders the label container, and also matches the backgroundColor with the backgroundColor set in style prop of TextInput.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-paper/src/components/TextInput/TextInputFlat.tsx b/node_modules/react-native-paper/src/components/TextInput/TextInputFlat.tsx
index d5c9bee..8700a07 100644
--- a/node_modules/react-native-paper/src/components/TextInput/TextInputFlat.tsx
+++ b/node_modules/react-native-paper/src/components/TextInput/TextInputFlat.tsx
@@ -331,7 +331,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps> {
             },
           ]}
         >
-          {!isAndroid && multiline && (
+          {!isAndroid && multiline && label && (
             // Workaround for: https://github.com/callstack/react-native-paper/issues/2799
             // Patch for a multiline TextInput with fixed height, which allow to avoid covering input label with its value.
             <View
@@ -341,7 +341,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps> {
                 StyleSheet.absoluteFill,
                 dense ? styles.densePatchContainer : styles.patchContainer,
                 {
-                  backgroundColor: containerStyle.backgroundColor,
+                  backgroundColor: viewStyle.backgroundColor,
                   left: paddingLeft,
                   right: paddingRight,
                 },

This issue body was partially generated by patch-package.

[NotoriousGBG]

@lukewalczak I just upgraded to 4.11.2 but the issue persists.

[Svarto]

@Insider32 @jensonjohn001 alright, I am on it!