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

[Svarto]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] 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.

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[lukewalczak]

Hey @Svarto, I will apply & run your patch to check if everything is correct. If it will be ok, are you willing to open the PR?

[Svarto]

Hey @Svarto, I will apply & run your patch to check if everything is correct. If it will be ok, are you willing to open the PR?

Sure, let me know how the tests go!

[lukewalczak]

Hello @Svarto, please open the PR with your approach with one additional change:

backgroundColor: viewStyle.backgroundColor || containerStyle.backgroundColor

[jensonjohn001]

Facing same issue.. Please open the PR @Svarto

[Insider32]

Waiting for that PR too

[Svarto]

@Insider32 @jensonjohn001 alright, I am on it!

[VictorioMolina]

Any updated on this? I am using dense={true}, mode="flat", and multiline={true}, and without using any label, its container covers my text.

"react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
"react-native-paper": "^4.11.1",

[lukewalczak]

Any updated on this? I am using dense={true}, mode="flat", and multiline={true}, and without using any label, its container covers my text.

The PR is ready, waiting for fixing lint. In the meantime you can use the patch which @Svarto provided.

[lukewalczak]

Patch is released in 4.11.2

[NotoriousGBG]

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

[lukewalczak]

@NotoriousGBG could you please send a snack?