fix: workaround for fixing textinput styling

Author: BogiKay

src/components/TextInput/TextInput.tsx

@@ -241,9 +241,8 @@ const TextInput = forwardRef<TextInputHandles, Props>(
       new Animated.Value(errorProp ? 1 : 0)
     );
     const [focused, setFocused] = React.useState<boolean>(false);
-    const [placeholder, setPlaceholder] = React.useState<string | undefined>(
-      ' '
-    );
+    const [displayPlaceholder, setDisplayPlaceholder] =
+      React.useState<boolean>(false);
     const [uncontrolledValue, setUncontrolledValue] = React.useState<
       string | undefined
     >(validInputValue);
@@ -328,24 +327,16 @@ const TextInput = forwardRef<TextInputHandles, Props>(
         // If the user wants to use the contextMenu, when changing the placeholder, the contextMenu is closed
         // This is a workaround to mitigate this behavior in scenarios where the placeholder is not specified.
         if (rest.placeholder) {
-          // Set the placeholder in a delay to offset the label animation
+          // Display placeholder in a delay to offset the label animation
           // If we show it immediately, they'll overlap and look ugly
           timer.current = setTimeout(
-            () => setPlaceholder(rest.placeholder),
+            () => setDisplayPlaceholder(true),
             50
           ) as unknown as NodeJS.Timeout;
         }
       } else {
         // hidePlaceholder
-
-        // Issue: https://github.com/callstack/react-native-paper/issues/3138
-        // Description:   Changing the placeholder text value dynamically,
-        //                within multiline input on iOS, doesn't work properly –
-        //                the placeholder is not displayed initially.
-        // Root cause:    Placeholder initial value, which has length 0.
-        // More context:  The issue was also reproduced in react-native, using its own TextInput.
-        // Workaround:    Set an empty space character in the default value.
-        setPlaceholder(' ');
+        setDisplayPlaceholder(false);
       }
 
       return () => {
@@ -500,7 +491,7 @@ const TextInput = forwardRef<TextInputHandles, Props>(
             labeled,
             error,
             focused,
-            placeholder,
+            displayPlaceholder,
             value,
             labelTextLayout,
             labelLayout,
@@ -542,7 +533,7 @@ const TextInput = forwardRef<TextInputHandles, Props>(
           labeled,
           error,
           focused,
-          placeholder,
+          displayPlaceholder,
           value,
           labelTextLayout,
           labelLayout,

src/components/TextInput/TextInputFlat.tsx

@@ -229,6 +229,13 @@ const TextInputFlat = ({
     ? parentState.labeled
     : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
 
+  // We don't want to show placeholder if label is displayed, because they overlap.
+  // Before it was done by setting placeholder's value to " ", but inputs have the same props
+  // what causes broken styles due to: https://github.com/facebook/react-native/issues/48249
+  const placeholderTextColorBasedOnState = parentState.displayPlaceholder
+    ? placeholderTextColor ?? placeholderColor
+    : 'transparent';
+
   const minHeight =
     height ||
     (dense ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) : MIN_HEIGHT);
@@ -388,12 +395,12 @@ const TextInputFlat = ({
           ...rest,
           ref: innerRef,
           onChangeText,
-          placeholder: label ? parentState.placeholder : rest.placeholder,
+          placeholder: rest.placeholder,
           editable: !disabled && editable,
           selectionColor,
           cursorColor:
             typeof cursorColor === 'undefined' ? activeColor : cursorColor,
-          placeholderTextColor: placeholderTextColor ?? placeholderColor,
+          placeholderTextColor: placeholderTextColorBasedOnState,
           onFocus,
           onBlur,
           underlineColorAndroid: 'transparent',

src/components/TextInput/TextInputOutlined.tsx

@@ -206,6 +206,10 @@ const TextInputOutlined = ({
     paddingHorizontal: INPUT_PADDING_HORIZONTAL,
   };
 
+  const placeholderTextColorBasedOnState = parentState.displayPlaceholder
+    ? placeholderTextColor ?? placeholderColor
+    : 'transparent';
+
   const labelBackgroundColor: ColorValue =
     backgroundColor === 'transparent'
       ? theme.colors.background
@@ -379,12 +383,12 @@ const TextInputOutlined = ({
           ref: innerRef,
           onLayout: onLayoutChange,
           onChangeText,
-          placeholder: label ? parentState.placeholder : rest.placeholder,
+          placeholder: rest.placeholder,
           editable: !disabled && editable,
           selectionColor,
           cursorColor:
             typeof cursorColor === 'undefined' ? activeColor : cursorColor,
-          placeholderTextColor: placeholderTextColor || placeholderColor,
+          placeholderTextColor: placeholderTextColorBasedOnState,
           onFocus,
           onBlur,
           underlineColorAndroid: 'transparent',

src/components/TextInput/types.tsx

@@ -72,7 +72,7 @@ export type State = {
   labeled: Animated.Value;
   error: Animated.Value;
   focused: boolean;
-  placeholder?: string;
+  displayPlaceholder: boolean;
   value?: string;
   labelTextLayout: { width: number };
   labelLayout: { measured: boolean; width: number; height: number };

src/components/__tests__/TextInput.test.tsx

@@ -245,12 +245,14 @@ it('renders label with correct color when inactive', () => {
   });
 });
 
-it('renders input placeholder initially with an empty space character', () => {
+it('renders input placeholder initially with transparent placeholderTextColor', () => {
   const { getByTestId } = render(
     <TextInput multiline label="Multiline input" testID={'text-input'} />
   );
 
-  expect(getByTestId('text-input').props.placeholder).toBe(' ');
+  expect(getByTestId('text-input').props.placeholderTextColor).toBe(
+    'transparent'
+  );
 });
 
 it('correctly applies padding offset to input label on Android when RTL', () => {

src/components/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -182,8 +182,8 @@ exports[`call onPress when affix adornment pressed 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=" "
-      placeholderTextColor="rgba(73, 69, 79, 1)"
+      placeholder="Enter your phone number"
+      placeholderTextColor="transparent"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -494,8 +494,8 @@ exports[`correctly applies a component as the text label 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=" "
-      placeholderTextColor="rgba(73, 69, 79, 1)"
+      placeholder="Type something"
+      placeholderTextColor="transparent"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -718,8 +718,8 @@ exports[`correctly applies cursorColor prop 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=" "
-      placeholderTextColor="rgba(73, 69, 79, 1)"
+      placeholder="Type something"
+      placeholderTextColor="transparent"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -942,8 +942,8 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=" "
-      placeholderTextColor="rgba(73, 69, 79, 1)"
+      placeholder="Type something"
+      placeholderTextColor="transparent"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -1198,8 +1198,8 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
       onChangeText={[Function]}
       onFocus={[Function]}
       onLayout={[Function]}
-      placeholder=" "
-      placeholderTextColor="rgba(73, 69, 79, 1)"
+      placeholder="Type Something"
+      placeholderTextColor="transparent"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -1423,8 +1423,8 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=" "
-      placeholderTextColor="rgba(73, 69, 79, 1)"
+      placeholder="Type something"
+      placeholderTextColor="transparent"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -1649,8 +1649,8 @@ exports[`correctly applies textAlign center 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=" "
-      placeholderTextColor="rgba(73, 69, 79, 1)"
+      placeholder="Type something"
+      placeholderTextColor="transparent"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -1873,8 +1873,8 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=" "
-      placeholderTextColor="rgba(73, 69, 79, 1)"
+      placeholder="Type something"
+      placeholderTextColor="transparent"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [
@@ -2299,8 +2299,8 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      placeholder=" "
-      placeholderTextColor="rgba(73, 69, 79, 1)"
+      placeholder="Type something"
+      placeholderTextColor="transparent"
       selectionColor="rgba(103, 80, 164, 1)"
       style={
         [