React-native view auto width by text inside

Question

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 t

Answer 1

    <View style={styles.imageCancel}>
         <TouchableOpacity onPress={() => { this.setModalVisible(!this.state.visible) }}>
                 <Text style={styles.textCancel} >Close</Text>
          </TouchableOpacity>
    </View>
const styles = StyleSheet.create({
 imageCancel: {
         height: 'auto',
         width: 'auto',
         justifyContent:'center',
         backgroundColor: '#000000',
         alignItems: 'flex-end',
    },
     textCancel: {
        paddingTop:25,
        paddingRight:25,
        fontSize : 18,
        color : "#ffffff",
        height: 50,
        },
 }};

Answer 2

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

Answer 3

Try this way for your requirement:

Here my height is Constant and i am enlarging the width by the length of text.

  <View style={{flexDirection: 'row'}}>
    <View style={{
        height: 30, width: 'auto', justifyContent:'center', 
        alignItems: 'center'}}>

        <Text style={{color:'white'}}>Now View will enlarge byitself</Text>

    </View>
  </View>

For Both Height and Width Try Changing the height inside the View style to 'auto' full code bellow:

  <View style={{flexDirection: 'row'}}>
    <View style={{
        height: 'auto', width: 'auto', justifyContent:'center', 
        alignItems: 'center'}}>

        <Text style={{color:'white'}}>Now View will enlarge byitself</Text>

    </View>
  </View>

Also try Giving padding to the View for arrange the text properly.

Answer 4

It works with Nicholas answer unless you want to center the view somewhere. In that case, you could add a wrapper view around the view to obtain the width of its content and set alignItems: 'center'. Like this:

    <View style={{ flex: 1, alignItems: 'center' }}>
        <View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
            <Text>{'Your text is here'}</Text>
        </View>
    </View>

The background color is added to show the size of the inner view

Answer 5

Or simply:

  <Text style={{color: '#ffffff', alignSelf: 'center'}}>Sample text here</Text>

Answer 6

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>