React native how to wrap content view

Question

I'm pretty new with RN, is there anyway to wrap the content of the view, similar to Android. In Android I can adjust, Height: 'wrap-content', but somehow in RN, I can't do any wrap content.

It's either I set the height of the view, or just flex, but still not wrap the view.

Answer 1

You can set the parent to wrap child component like this.

alignSelf: 'baseline'

<View style={{ alignSelf:'baseline'}}>
  <Text>Child Content</Text>
</View>

Wrap child content horizontally.

Answer 2

In the case of flexDirection: "row", you should use flexWrap: "wrap" to wrap the items inside.

Answer 3

Views wrap their content by default if 'flex' attribute is not set.

If you need the view to fill parent width or height set 'alignSelf' attribute to "stretch".

Answer 4

If the content is vertical it should wrap by default; If the content is horizontal, things get tricky... What worked for me was putting the view container inside another view:

<View style={{alignItems: "center"}}>
    <View style={{flexDirection: "row"}}>
        <Image/><Text/>
    </View>
</View>