Responsive Layout in React Native iOS

Question

I am about to deploy my first React Native application to the iOS app store. I am having a problem however when it comes to layout. I am utilizing the flexbox system and currently designing for iPhone 6. I have done all the mockups and Sketch and have everything how I would like it to look.

I have run into a problem however whenever I try to run the application in iPhone 4. The design that I have implemented for the iPhone 6 does not fit with the constraints that iPhone 4 possesses.

I can try to redesign things for iPhone 4, but then things become too small / ugly on the iPhone 6. I really need things to look great on all of the screen resolutions (i.e., iPhone 4 - iPhone 7 plus).

I have seen on the web many different solutions: apply a constant to each stylesheet value, dependent up the aspect ratio of the device; check the device and render different components based off the device your are on; and make better use of flexbox in order to make the layout responsive.

The first solution doesn't seem like it will give an accurate representation on each screen size, the second solution seems to create too much excess code just for styling, and the third solution seems to not account for static sizes and font sizes.

I normally would begin to follow the third solution, but there are some things that can simply not be a percentage of the container (e.g., button height, font size, some margin and padding, etc.)

Therefore, I am asking the question: What is the best way to approach this problem in React Native? I really need a thorough de-facto answer that can explain the best way to go through the development process as well (e.g., should I design for the smallest screen size and then fit it to bigger sizes? should I design for all resolutions? etc.).

A big thanks in advance for those of you who have felt my pain and have discovered a great solution, please let me know what that solution is.

Answer 1

Ok, so I think i understand how to go about doing this now. It looks like the key for designing for multiple screen sizes in iOS is not to necessarily make things bigger on bigger phones and smaller on smaller phones, but to design for what works on the smallest screen size, and let the items look small on the bigger devices.

It seems that the idea behind this type of responsive design is that individuals with bigger phones desire to see MORE CONTENT, not blown up content. Therefore, if it works on small phones, it can also work on big phones.

Take buttons for instance: If a button at 40pt looks good on an iPhone 4s, it will also work well on an iPhone 7 plus. The benefit is that the user of the iPhone 7 plus is able to see more content, rather than just a bigger button.

This design also makes it to where multiple screen sizes are not necessary for styling.

There is still a role in determining the dimensions of the device you are on, but this is more to determine whether you are able to display more content (e.g., in the case of iPhone 5 vs iPhone 6, whether or not to display an additional tab button), as well as the layout (e.g., where should I place the menu).

You can see this type of design on most of the very popular web application native apps.

Images and videos are one of the only exceptions. It seems that it is helpful at times to automatically grow the images whenever the device and the design call for it. Fortunately, this is very simple by using a flexbox and responsive technologies as are included with react-native.

I hope this helps others and saves them some time. Note: this does not provide for the problem of landscape vs portrait. Under that situation, it is probably best to use some sort of varying styles.