React Native Text is not getting bounded by limits of container View

user_7946143 0
Viewed 941

I am creating a react native expo app. In it, I want to create a 2 column layout. Content's title on the left and data on the right. 

<View>
  <Text>Some title</Text>
  <Text>Some pretty long content</Text>
<View>

So it should be displayed like:

*--------------------------*
| Some Title   Some pretty |
|              long content|
*--------------------------*

But right now what happens is: 

*--------------------------*
| Some Title   Some pretty long
|              content     |
*--------------------------*

So text doesn't seem to take the width according to its parent's width.

This is how it looks:

Screen shot of how text is overflowing

The view hierarchy is this:

<View> -- 100% width 

  <View> -- Margin of 10 & padding of 5 & curved border

    <View> -- Flex row & a 1px border to show its expected width

       <Text>Title</Text>
       <Text>Content</Text> -- Overflowing text 

       <Text>Title</Text>
       <Text>Content</Text> -- Overflowing text 

       .
       .
       .

       <Text>Title</Text>
       <Text>Content</Text> -- Overflowing text 

    </View>

  </View>

</View>

I can add the CSS and TSX code if you want, but I have summarised the important bits above.

expo react-native typescript overflow textview
2 Answers

Flex wrap: wrap Flex:1 Set this to your text style sheets if View style is having flex direction as row.

Alternatively try width as 100% for both parent View and texts.

user_116659080

Please try adding width="100%" to your Text component.

P.S: I should have asked this in comment but a new StackOverFlow user here.

user_116350430
Related