React-native view auto width by text inside

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"

Solution 1:

"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>

Solution 2:

Two Solutions

Text component fits the text content

https://facebook.github.io/react-native/docs/text.html#containers

You can wrap <Text> components into another <Text> component.

By doing this everything inside is no longer using the flexbox layout but using text layout.

<Text>
   <Text>{'Your text here'}</Text>
</Text>

View container adapt to nested Text component's content

In that case you need to use the props alignSelf in order to see the container shrink to the size of its content.

<View>
  <View style={{ alignSelf: 'center', padding: 12}} >
     <Text>{'Your text here'}</Text>
  </View>
</View>