Response-native: multi-color text view

Question

I want to make one line of text with several words highlighted in a different color.

I would ideally do this with a span tag with a reaction.

I wonder how I will do the same with react-native?

Answer 1

You can achieve this using the nested components of Text.

<Text style={{color: 'blue'}}> I am blue <Text style={{color: 'red'}}> i am red </Text> and i am blue again </Text> 

Here's a link in the documentation explaining this better

Answer 2

You can do it better, my way:

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

inside the render add:

 const CText = this.CText 

and come back

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