39

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.

Brian Tompsett - 汤莱恩
  • 5,438
  • 68
  • 55
  • 126
Mina Makhtar
  • 487
  • 1
  • 6
  • 13

4 Answers4

97

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.

Edison D'souza
  • 4,365
  • 4
  • 24
  • 39
  • Being a bit lazy, but could someone explain why this works? – P Fuster Aug 27 '18 at 17:29
  • 6
    View is by default a block element. Aligning self to baseline makes the component act as an inline element. Thus taking up only the space required by the child components. – Edison D'souza Aug 28 '18 at 06:33
21

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

M.javid
  • 5,881
  • 3
  • 38
  • 54
Ankit Topno
  • 345
  • 2
  • 3
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>
sorinLates
  • 245
  • 4
  • 14
-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".

anagaf
  • 2,015
  • 1
  • 18
  • 14
  • When flex is not set, the view does not wrap all of its children, it shrinks and children become overlapped so that the entire layout is not visible. – Brandon Sep 22 '17 at 22:27