CODEWITHSUNDEEP
react-nativereact-native-flexbox
ketan kulkarni
ketan kulkarni

Reputation: 375

how to set background color to the text only in react native

in html I can achieve this by 

<span style="background-color:red">ketan</span>

but in react native how to implement this so that color will be applied to the text only.

Upvotes: 10

Views: 28681

Answers (6)

Raphael Estrada
Raphael Estrada

Reputation: 1149

If you want the background color to only encompass the text, you can use this:

<Text style={{backgroundColor: 'blue', alignSelf: 'flex-start'}}>
    Ketan
</Text>

And just change alignSelf as needed, you need to set this property if you dont want the text to take the whole width of the container

Upvotes: 24

Isaac
Isaac

Reputation: 12874

import { Text } from 'react-native';

<Text style={{backgroundColor: 'green'}}>
  Ketan
</Text>

In order to put text in ReactNative, you need Text component. And you can apply backgroundColor onto style property.

Here's a snack as a demo to show usage and as playground for you to play around

Upvotes: 0

Sandy.....
Sandy.....

Reputation: 2870

In react native you can directly use "Text" component and apply "backgroundColor" style to it as follows:

<Text> 
    <Text style={{ backgroundColor: "red", color: "white" }}>color
    </Text>
</Text>

Upvotes: 3

Hiren Vaghela
Hiren Vaghela

Reputation: 932

try this one:

<Text style={{backgroundColor:'red', color:'white'}}>{'Message'}</Text>

Upvotes: 0

dvvtms
dvvtms

Reputation: 627

you can't on IOS. set backgroundColor for extra View

<View style={{backgroundColor: 'red',flex:1}}><Text >ketan
    </Text></View>

Upvotes: 0

Ravi
Ravi

Reputation: 35539

In react native you have Text component to display text.

To set color of Text, you can use color property of it

<Text style={{color:'#ff0000'}}>Your Text</Text>

And for background color of that text, you can use View and than set backgroundColor of that View

Upvotes: 1

Related Questions