reactjsreact-native

react-native: multi color text view


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?


Solution

  • 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