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.

Pedo

facebook.github.io/react-native/docs/style.html Look for styling tips in docs. – Octopus

Answer 1

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

Zima

Worked like a charm. Not having AlignSelf was the issue – Melodie

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', – Spadiceous

Answer 2

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>

Nebo

<Text style={{backgroundColor: 'red'}}>ketan </Text> – Pedo

@ketan kulkarni, not getting what you mean to say here. – Nebo

@ 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 – Pedo

@ketan kulkarni, Please visit this link 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? – Nebo

it is working if i write <Text> background <Text style={{ backgroundColor: "red", color: "white" }}>color</Text> </Text> – Pedo

Yes, you have to add nested text. – Nebo

this works for me <Text> <Text style={{ backgroundColor: "red", color: "white" }}>color</Text> </Text> – Pedo

Answer 3

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

Firecracker

i have tried following 1) <View style={{ backgroundColor: "red" }} > <Text>n</Text> </View> 2) <View> <Text style={{ backgroundColor: "red" }} > n </Text> </View> but output is same – Pedo

Answer 4

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

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

Capricorn

try with flex:1 or flex:0 – Capricorn

this works for me <Text> <Text style={{ backgroundColor: "red", color: "white" }}>color</Text> </Text> – Pedo

Answer 5

try this one:

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

Glockenspiel

Answer 6

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

Tice