React Native - image pushes text out screen - fixed with 3rd view?

Question

I am using React Native Version 0.44.0 and expo app to render some images and text on the screen in a ListView.

My issue is with styling.

A. Originally I had only a View (View1) and an image and a text component side by side within View1. I set up the flexDirection="row" and justifyContent="center" and that centered the image and the text within the screen.

B. I needed to insert another text component with a different style under the first text, but the flexDirection="row" would simply not allow it to go under it.

I inserted View2 and that did allow the texts to be vertically positioned but the higher text got cut off at the right edge of the screen( i believe its because the image is set with a fixed height and width).

I couldn't get the text back in the center until I added View3 and gave it a fixed width.

So View1 has flex=1 , View2 has flex=1, and View3 has width="someValue"

My concern: right now its rendering on the device perfectly. But is this acceptable practice? will it be distorted on other devices or will it render the fixed width dynamically based on the screen resolution since its density-independent pixel unit?

Answer 1

will it render the fixed width dynamically based on the screen resolution since its density-independent pixel unit?

Nope. It will not be adjusted as per different screen sizes. The width will change from screen to screen. Using flex-box is the best way to get the things done , but sometimes you need the help of screen width and screen height. For that you can use the Dimensions from the react-native. Here is a guide to use it. And there are also some libraries available to make the app responsive like react-native-responsive and react-native-extended-stylesheet.

In your particular case, you could divide the row view(view1) with 2 inner views having the desired flex. And first inner view may hold the image view, if you find difficulty with the image height and width with its parents height and width, you may also need to refer the image resizemod. Second inner view holds your text. Also remember to add some padding to view1 so that the inner views will always be in the view port and Nevers goes out of the viewport.