React-native view auto width by text inside

javascript reactjs react-native
xercool picture xercool · Jul 6, 2016 · Viewed 136.2k times · Source

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"

Answer

Nicholas Marcaccini Augusto picture Nicholas Marcaccini Augusto · Jul 26, 2017

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

Related questions

How to clear react-native cache?

In react-native development, there are multiple caches used when the app is built: React-native packager cache Emulator cache Java side cache (.gradle) folder (only in android) npm cache (if relevant?) Am I missing something also? Because I'm trying to clear …

Read More
ReactJS: Maximum update depth exceeded error

I am trying to toggle the state of a component in ReactJS but I get an error stating: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of …

Read More
What is the difference between React Native and React?

I have started to learn React out of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using Google. React and React Native seems to have the same format. …

Read More