如何在文本输入的占位符中给出多个 colors 反应原生

Question

see image

In react native text input placeholder, is there any way to give multiple colors to place holder text. email[black color] asterisk [red color]

I have tried placeholdertextcolor property of text input. But it will allow only one color for whole placeholder text.

The image in the link is my required textinput UI.

Answer 1

You can make your own placeholder component wrapped inside the TextInput component. It will look something similar to this

       <TextInput
        value={value}
        isFocused={isFocused}
        onFocus={() =>
          this.setState({ isFocused: true }, () => onFocus && onFocus())
        }
        onBlur={() => this.setState({ isFocused: false })}
      >
        {!isFocused && !value && (
          <Text>
            Placeholder Text<Text style={{ color: 'red' }}>*</Text>
          </Text>
        )}
      </TextInput>

Make sure to keep track of the focused state of your input component so that you can display placeholder or no.

Answer 2

As mentioned in the previous comment you can add your custom placeholder, you can also pass it to the state and clear it when press on the text input using onResponderStart,here is full example:

const example = () => {
  const [placeHolderText, setPlaceHolderText] = React.useState('PlaceHolder');
  const [placeHolderOtherText, setPlaceHolderOtherText] = React.useState('*');

  return (
    <View style={{flex: 1, alignContent: 'center', justifyContent: 'center'}}>
      <TextInput
        //remove placeholder on touching
        onResponderStart={() => {
          setPlaceHolderOtherText('');
          setPlaceHolderText('');
        }}>
        <Text>
          {placeHolderText}
          <Text style={{color: 'red'}}>{placeHolderOtherText}</Text>
        </Text>
      </TextInput>
    </View>
  );
};