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.

Edison D'souza · Accepted Answer · 2018-10-18T15:49:31.270

107

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.

edited Oct 18 '18 at 15:49

answered Feb 08 '18 at 16:42

Edison D'souza

4,551
5
28
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
`alignSelf:'center'` worked also – omega_mi Aug 05 '22 at 09:17

score 24 · Answer 2 · edited Oct 16 '18 at 12:45

24

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

edited Oct 16 '18 at 12:45

M.javid

6,387
3
41
56

answered Oct 16 '18 at 11:12

Ankit Topno

375
2
3

score 7 · Answer 3 · answered Jun 07 '22 at 06:18

Solution 1:

You can use alignSelf: 'baseline' tp set the parent to wrap child component like this

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

Solution 2:

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

<View style={{ flexDirection: 'row', flexWrap: 'wrap'}}>
  <Text>Child</Text>
</View>

score 4 · Answer 4 · answered Jan 09 '18 at 09:23

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>

score -3 · Answer 5 · answered Mar 24 '17 at 10:32

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

answered Mar 24 '17 at 10:32

anagaf

2,120
1
18
15

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

React native how to wrap content view

5 Answers5

Solution 1:

Solution 2:

Linked