How to make parent’s width wrap its content in React Native?

I am new to React Native so this might be a silly question.

What I am trying to get is something like this :
enter image description here

Where I have a parent view with 2 children, Image and Text, aligned vertically to the left. What I want is the parent view to cover only the width of its children. But instead what I get is this :

enter image description here

The parent view stretches to the complete width of the mobile screen.

Here is my code :

render () (<View style={{backgroundColor: '#333333'}}>
  <Image source={btnImageSource} />
  <Text>Some label</Text>
</View>);

Something similar to Android’s ‘wrap-content’ width value.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You will be able to do this using flex. I found this guide to be very helpful when working with flex.

A good starting point would be to create a parent View that is flexDirection: row, justifyContent: flex-start

render () (
    <View style={{justifyContent: 'flex-start', flexDirection: 'row'}}>
        <View style={{backgroundColor: '#333333'}}>
            <Image source={btnImageSource} />
            <Text>Some label</Text>
        </View>
    </View>
);


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x