React Native <Text> overflows <View> 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.

Conure

Can you include some code? – Georama

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 – Lissettelissi

@Conure Please add the code so we can help :) – Burl

Thanks for looking, I've added the code. – Conure

Answer 1

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.

Conure

I also ran into the same issue, confirmed this also works for me. Thanks a lot! – Finally

Answer 2

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>

Symptomatic

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? – Conure

I tried doing the 0.7 and 0.3 flex sizes, it has the same result (see the code above) – Conure