CODEWITHSUNDEEP
typescriptreact-nativetextviewoverflowexpo
Dracula
Dracula

Reputation: 3090

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

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.

Upvotes: 6

Views: 1993

Answers (2)

Piyush Abhishek Singh
Piyush Abhishek Singh

Reputation: 295

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.

Upvotes: 8

Hamza Waleed
Hamza Waleed

Reputation: 1462

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

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

Upvotes: 0

Related Questions