react-native -v: 0.61.5
Why does Text content occupy all the parent element space?
Here is my demo. iOS devices is different from that on the Web.
https://snack.expo.io/@hejingdong/centered-image-text-container
Here is iOS screenshot. enter image description here
Here is Web screenshot. enter image description here
Here is my design.
Please help!
The content of the text occupies all the parent content because you define flex: 1, and the parent has no size, so it is growing with his children, you can use maxWidth in the text container, so the images will not be pushed out of a View. Mobile has different behaviors, isnt only IOS.
Your text has no width specified so it was taking the full width of your parent container. Add width to your text
<Text style={[styles.container, {width : '80%'}]} numberOfLines={1}>asdasfsdfpasoidufpiasupdfoiaupsdiufaa</Text>
Or you can either increase your numberOfLines if the text is too large.