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 a

Answer 1

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>

Answer 2

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 3

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

Answer 4

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