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

react-native react-native-flexbox
ketan kulkarni picture ketan kulkarni · Jul 16, 2018 · Viewed 16.5k times · Source

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.

Answer

Raphael Estrada picture Raphael Estrada · May 9, 2019

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

Related questions

Make an item stick to the bottom using flex in react-native

Suppose this is the layout: <View style={styles.container}> <View style={styles.titleWrapper}> ... ... </View> <View style={styles.inputWrapper}> ... ... </View> <View style={styles.footer}> <TouchableOpacity> <View …

Read More
React-Native: Margin with percentage value

I'm trying to use percentage value for margin style attribute on my React Native project but it seems to reduce the height of one of my View component. If I replace percentage value by an absolute value, there is no …

Read More
React-native: how to wrap FlatList items

I have a list of Terms that are returned by a query. Each is a single word. Currently my FlatList renders each word into a button on the same row (horizontal={true}) I would like the buttons to wrap like …

Read More