react-native: multi color text view

Question

I want to render a single line of text with some words highlighted in a different color.

I would ideally do it with a span tag with react.

Wondering how would i do the same with react-native?

Answer 1

You can achieve this by using nested Text components

<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 to the documentation explaining it better

Answer 2

Simply nest <Text> elements

<Text>
    I am some text with 
    <Text style={{fontWeight: 'bold'}}>bold</Text> 
    stuff
<Text>

Answer 3

You can do it better, my way:

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

inside render add:

const CText = this.CText

and return

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