How to add multicolor placeholder text in React Native TextInput?

Question

I want to add a red star at the end of my TextInput placeholder in React Native.

Does this answer your question? [Multicolored placeholder text](https://stackoverflow.com/questions/20667108/multicolored-placeholder-text) — Hamms, Mar 04 '21 at 19:43
check this https://stackoverflow.com/questions/71121181/how-to-add-red-asterisk-in-react-native-textinput-placeholder/71616686?answertab=createdasc#:~:text=There%20is%20no%20direct%20method%20to%20do%20this.What%20I%20did%20is%20add%20text%20with%20asterix%20in%20front%20of%20the%20TextInput%20and%20show%20hide%20conditionally%20when%20there%20is%20value%20in%20TextInput%20or%20not%2C — Krishan Madushanka, Mar 25 '22 at 12:09

score 0 · Answer 1 · answered Mar 04 '21 at 20:09

0

You can use an :after selector and add content: "*" to it then you can give any color you want.

Something like this

p::after {
  content: "*";
  color: red;
}

answered Mar 04 '21 at 20:09

Evren

4,147
1
9
16

This answer appears to by HTML -- the OP is asking about React Native. Is there a way to apply this answer to React Native? – jnpdx Mar 04 '21 at 20:16

score 0 · Answer 2 · answered Mar 04 '21 at 20:30

Unless there's a more elegant solution, I'd fake it with a background view for the TextInput that displays styled Text elements:

export default function App() {
  const [text, setText] = React.useState(null)
  const [isFocused, setFocused] = React.useState(false)

  return (
    <View style={styles.container}>
    <View style={{position: 'absolute'}}>
    <View style={{zIndex: -1, position: 'absolute'}}>
        {(text || isFocused) ? null : <View style={{flexDirection: 'row'}}><Text>Title</Text><Text style={{color: 'red'}}>*</Text></View>}
    </View>
      <TextInput value={text} onChangeText={t => setText(t)} style={{borderWidth: 1}} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}/>
      </View>
    </View>
  );
}

How to add multicolor placeholder text in React Native TextInput?

2 Answers2