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

Question

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.

https://facebook.github.io/react-native/docs/style.html Look for styling tips in docs. — Sangsom, Jul 16 '18 at 09:08

score 23 · Answer 1 · answered May 09 '19 at 03:25

23

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

answered May 09 '19 at 03:25

Raphael Estrada

1

Worked like a charm. Not having AlignSelf was the issue – Sander Koldenhof Nov 05 '19 at 14:22
3

Worked for me, also you can add a parent view that you can set properties like: alignSelf: 'flex-start', borderRadius: 10, overflow: 'hidden', backgroundColor: 'red', – cherucole Apr 25 '20 at 14:31

Sandy..... · Answer 2 · 2018-07-17T06:47:14.200

3

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>

edited Jul 17 '18 at 06:47

answered Jul 16 '18 at 09:39

Sandy.....

ketan – ketan kulkarni Jul 16 '18 at 10:13
@ketan kulkarni, not getting what you mean to say here. – Sandy..... Jul 16 '18 at 10:16
@ Sandip Lipane I have tried many combinations like applied background colour to text, view but still, it is taking the full width I am trying to design a button using TouchableOpacity and Text and i want background color applied to the text only – ketan kulkarni Jul 16 '18 at 10:55
@ketan kulkarni, Please visit this link https://facebook.github.io/react-native/docs/text.html and try modifying existing examples with backgroundColor style. I have verified and it is working. Can you please verify it once? – Sandy..... Jul 16 '18 at 11:01
it is working if i write background color – ketan kulkarni Jul 17 '18 at 06:31
Yes, you have to add nested text. – Sandy..... Jul 17 '18 at 06:32
this works for me color – ketan kulkarni Jul 17 '18 at 06:36

Ravi · Answer 3 · 2018-07-16T09:24:33.950

1

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

edited Jul 16 '18 at 09:24

answered Jul 16 '18 at 09:09

Ravi

i have tried following 1) n 2) n but output is same – ketan kulkarni Jul 16 '18 at 10:03

score 0 · Answer 4 · edited Jul 16 '18 at 12:56

0

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

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

edited Jul 16 '18 at 12:56

Arun

answered Jul 16 '18 at 10:23

dvvtms

score 0 · Answer 5 · answered Jul 16 '18 at 13:10

0

try this one:

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

answered Jul 16 '18 at 13:10

Hiren Vaghela

score 0 · Answer 6 · answered Jul 17 '18 at 06:57

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

6 Answers6