Outlined textinput - different colors for placeholder and border

[realioseb]

Ask your Question

How do I set different colors for placeholder and border when there is no value and input is not focused?

[jayu]

Placeholder and border colors are taken from theme. There are no props to change them. You can try by changing placeholder color in theme, this color affects placeholder color and outline color when input is not focused
Check implementation of outlined text input

/* ... */
    const { colors, fonts } = theme;
    const fontFamily = fonts.regular;
    const hasActiveOutline = parentState.focused || error;
    const { backgroundColor = colors.background } =
      StyleSheet.flatten(style) || {};

    let inputTextColor,
      activeColor,
      outlineColor,
      placeholderColor,
      containerStyle;

    if (disabled) {
      inputTextColor = activeColor = color(colors.text)
        .alpha(0.54)
        .rgb()
        .string();
      placeholderColor = outlineColor = colors.disabled;
    } else {
      inputTextColor = colors.text;
      activeColor = error ? colors.error : colors.primary;
      placeholderColor = outlineColor = colors.placeholder;
    }
/* ... */
       <View
          pointerEvents="none"
          style={[
            styles.outline,
            {
              borderRadius: theme.roundness,
              borderWidth: hasActiveOutline ? 2 : 1,
              borderColor: hasActiveOutline ? activeColor : outlineColor,
            },
          ]}
        />
/* ... */

[realioseb]

Thank you for replay @jaysbytes

I see and I understand it would make more complicated to use this package

[hari3110]

@jayu how can i change inActive borderColor?

[Mhmetengineer]

Did u find the answer to the question? @hari3110