React Native overflows when in a flex

Question

So for the above image, I am attempting to get the "green" box to wrap around the dynamic text. Notice how the blue and yellow text boxes are in a flex: 'row' configuration, and the blue box of text is at a flex: 2 and the yellow is flex: 1.

Things work fine until the text is too big for the parent container.

I'd like for the green container to grow as needed to fit the flexed inner children. Is this possible with react native?

Here's an image of what it looks like in a web sense:

I've tried setting the green box to have a flex: 1 but then it's way too big as it fills the entire screen. Setting height is possible, but I don't know the size of the biggest inner component (at least without some hackery). I've even tried minHeight.

Has anyone attempted something like this? Do I need to get the height of the inner elements dynamically myself?

UPDATE - Here's the bit of code:

  <View style={{ flex: 1, flexDirection: 'column', marginTop: 70, backgroundColor: '#f9e2ff' }}>
    <View
      style={{
        minHeight: 40,
        borderWidth: 1,
        borderStyle: 'solid',
        padding: 5,
        margin: 5,
        backgroundColor: '#58c09e'
      }}
    >
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <View style={{ flex: 2, backgroundColor: '#eeff96' }}>
          <Text>
            Hello this is a long bit of text that will fill up the entire column to see how the text will wrap
          </Text>
        </View>
        <View style={{ flex: 1, backgroundColor: '#eeffff' }}>
          <Text>Hello again?</Text>
        </View>
      </View>
    </View>
  </View>

Thanks for looking.

if you set height then that height will not change, you would either have to use a flex ratio or set a min height/max height and do the same for the text so they scale together and the text won't outgrow the view — Matt Aft, Jul 24 '17 at 21:40

score 15 · Accepted Answer · edited Jun 19 '18 at 08:15

Ok after looking around a bit more and reading: flex vs flexGrow vs flexShrink vs flexBasis in React Native? I was able to figure out the problem.

What I needed was flex: 0 on the row:

  <View style={{ flex: 1, flexDirection: 'column', marginTop: 70, backgroundColor: '#f9e2ff' }}>
    <View
      style={{
        minHeight: 40,
        borderWidth: 1,
        borderStyle: 'solid',
        padding: 5,
        margin: 5,
        backgroundColor: '#58c09e'
      }}
    >
      <View style={{ flex: 0, flexDirection: 'row' }}>
        <View style={{ flex: 2, backgroundColor: '#eeff96' }}>
          <Text>
            Hello this is a long bit of text that will fill up the entire column to see how the text will wrap
          </Text>
        </View>
        <View style={{ flex: 1, backgroundColor: '#eeffff' }}>
          <Text>Hello again?</Text>
        </View>
      </View>
      <View>
        <Text>Here's another test</Text>
      </View>
    </View>
  </View>

This produces what I would expect:

So I guess the flexbox doesn't "work[s] the same way in React Native as it does in CSS on the web" like they state in their documentation.

I also ran into the same issue, confirmed this also works for me. Thanks a lot! — bot19, Oct 22 '19 at 07:28

score -1 · Answer 2 · edited Jun 19 '18 at 08:15

-1

Try This Coode -->

<View style={{flex:1,flexDirection:'row',borderWidth:1,padding:5}}>
  <View style={{flex:0.7}}>
      <Text>
            Hello This is long bit of text that will fill up the entire 
            column to see how the text will wrap
      </Text>
  </View>

  <View style={{flex:0.3}}>
      <Text>Hello Again</Text>
  </View>

</View>

edited Jun 19 '18 at 08:15

David Schumann

13,380
9
75
96

answered Jul 25 '17 at 05:07

Swapnil Panchal

387
2
5
21

Are you saying the inner "flex" should add up to the parent flex? Instead of the weighted `flex: 2` and `flex: 1` that I have for each element in the row? – Chris Jul 25 '17 at 13:57
I tried doing the `0.7` and `0.3` flex sizes, it has the same result (see the code above) – Chris Jul 25 '17 at 14:42

React Native overflows when in a flex

2 Answers2

Linked