Menu
As far as I know, react-native stylesheet doesn't supports min-width/max-width property.
I have a view and text inside. The view in auto width doesn't resize by inherit text element.
How to fix that issue and make view width automatically set using text width?
My code is:
<View style={{backgroundColor: '#000000'}}> <Text style={{color: '#ffffff'}}>Sample text here</Text> </View> In common HTML/CSS I would realize so:
<div style="background-color: #000; display: inline;">Sample text here</div> Notice: flex: 1 on parent view is not helpful for me. Text appears as
"Sam" "ple" "Tex" "t" 
413
You can get the application window's width and height using the following code: const windowWidth = Dimensions. get('window').
In regular CSS you can give an element the property max-width: max-content , which makes the element (at most) as wide as the text inside of it. There's no direct equivalent in React Native, but instead you can use flexbox to emulate this behavior to make a Text element only as wide as the text inside.
flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
"alignSelf" does the same as 'display: inline-block' would in common HTML/CSS and it works very well for me.
<View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}> <Text style={{color: '#ffffff'}}> Sample text here </Text> </View> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With