1

I'm struggling trying to set the correct styles to avoid some issues with views overflow.

enter image description here

So, for the image above I need that the the yellow box shrinks as the orange box grows(as the text grows), but limiting the yellow box to a minWidth=100 and the orange box to be wrapped by the red box; the yellow box behave correctly...but the orange box overflows the red box when the text is big....I'm clueless about what to do to limit the orange box to stay inside the red box.

This is an example of the orange box overflowing the red box:

enter image description here

Ideally, if the text inside the orange box is too big for the container size, it should be clamped and not making the orange box to overflow the red box.

This is a link so you can see and play with the code that generates this views: https://snack.expo.io/SJD1bbhQX

Thanks, Jose.

Jose Ortegano
  • 41
  • 1
  • 2
  • What do you mean by "it should be clamped"? Do you mean you want it to wrap? It seems like the problem is a result of `numberOfLines={1}` – iridescent Jul 18 '18 at 01:34

1 Answers1

0

If you want to not making the orange box to overflow the red box try to use:

style={{
          borderWidth: 1,
          borderStyle: 'solid',
          padding: 5,
          margin: 5,
          backgroundColor: 'red',
          width:0.9*width,
        }}

in your second View, width in this style equles Dimension.get('window').width

Ganesh Kathiresan
  • 2,068
  • 2
  • 22
  • 33
Mojtaba Moshfeghi far
  • 571
  • 1
  • 5
  • 20