CODEWITHSUNDEEP
javascriptuser-interfacecolorsreact-native
SleekPanther
SleekPanther

Reputation: 375

React Native TextInput different background colors for different letters/characters?

I know I can set the background for a TextInput, but I want to change the background color of parts of the TextInput to highlight certain letters.

I don't know if this is possible at all (React Native newbie here)

I'm making a field where the user has to type text that matches exactly. I wanted to have the letters they got right highlighted in green and then highlight anything wrong in red by changing the background color.

If TextInput doesn't allow multiple background colors, I guess I could try nested Text components like in this post. I'm thinking of having a TextInput for input, but then updating some other part of the UI on each key press making each new character a new Text component which can have it's backgroundColor set red/green. Any Thoughts?

Upvotes: 2

Views: 1463

Answers (1)

Idan
Idan

Reputation: 4023

You can do it in this way:

CText = (props) => <Text style={{backgroungColor: props.backgroungColor}}>{props.children}</Text>

inside render add:

const CText = this.CText

and return

<Text>I am <CText backgroungColor={'red'}>Blue color</CText> and <CText backgroungColor={'blue'}>Blue color</CText></Text>

Upvotes: 1

Related Questions