CODEWITHSUNDEEP
react-nativeviewstyles
beyzanur yanar
beyzanur yanar

Reputation: 83

React Native | Default Set Width Style

I noticed that while adding 'View' with React native, it behaves as if "width: '100%'" was assigned even though I did not enter any style. Same situation exists for any component. It covers the whole area horizontally. What is the cause and solution?

    return (
        <View style={{flex:1}}>
            {/* paints the line he is in full red but should only paint as much as the line of the text */}
            <View style={{backgroundColor:'red'}}> 
                <Text>Example</Text>
            </View >
        </View>
    );

Upvotes: 1

Views: 391

Answers (1)

First Arachne
First Arachne

Reputation: 829

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

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

Upvotes: 1

Related Questions