Multiline TextInput backgroundColor does not fully cover surface

[donutdonate]

Current behaviour

Multiline TextInput background color does not cover all the surface on iOS if background color have opacity.

Expected behaviour

Multiline TextInput background color should cover all the surface on iOS.

How to reproduce?

https://snack.expo.dev/@konstantin_bonn/textinput

Preview

What have you tried so far?

Try to apply contentStyle with the same color, but it just got worse. Works fine if comment background in this workaround for iOS

{!isAndroid && multiline && !!label && !disabled && (
          // 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
            testID="patch-container"
            pointerEvents="none"
            style={[
              StyleSheet.absoluteFill,
              dense ? styles.densePatchContainer : styles.patchContainer,
              {
                // backgroundColor:
                //   viewStyle.backgroundColor || containerStyle.backgroundColor,
                left: paddingLeft,
                right: paddingRight,
              },
            ]}
          />
        )}

Your Environment

software	version
ios	17.2
react-native	"0.73.6"
react-native-paper	"^5.12.3"
node	v20.5.0
yarn	1.22.19

[iM-GeeKy]

@lukewalczak I'm facing the same with the latest version of paper using mulitline. Here is the patch mentioned above by @donutdonate that seems to resolve the issue, in case anyone needs it.

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 8a0dcb1..583c656 100644
--- a/node_modules/react-native-paper/src/components/TextInput/TextInputFlat.tsx
+++ b/node_modules/react-native-paper/src/components/TextInput/TextInputFlat.tsx
@@ -363,8 +363,8 @@ const TextInputFlat = ({
               StyleSheet.absoluteFill,
               dense ? styles.densePatchContainer : styles.patchContainer,
               {
-                backgroundColor:
-                  viewStyle.backgroundColor || containerStyle.backgroundColor,
+                // backgroundColor:
+                //   viewStyle.backgroundColor || containerStyle.backgroundColor,
                 left: paddingLeft,
                 right: paddingRight,
               },

[iM-GeeKy]

@lukewalczak The above patch seems to work on simulator, but appears to not work when deployed to a standalone build. I suppose I could revert back to a version where this wasn't an issue (for me that is 5.12.3, but it would be nice to find a resolution for this as it is the only defect preventing me from releasing the next version of my app.

[ericpoulinnz]

#4482 looks to be caused by the same block of code mentioned in this issue.

[Michota]

Still happening. Bump!