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.

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
– Matt Aft, Commented Jul 24, 2017 at 21:40

David Schumann · Accepted Answer · 2018-06-19 08:15:52Z

16

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.

edited Jun 19, 2018 at 8:15

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Jul 25, 2017 at 15:11

Chris

1,4382 gold badges18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bot19 Over a year ago

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

David Schumann · Accepted Answer · 2018-06-19 08:15:40Z

-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, 2018 at 8:15

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Jul 25, 2017 at 5:07

Swapnil Panchal

4073 gold badges7 silver badges21 bronze badges

2 Comments

Chris Over a year ago

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 Over a year ago

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

Collectives™ on Stack Overflow

React Native <Text> overflows <View> when in a flex

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related