how to handle different screen sizes in react native?

Question

I am developing an application on react-native. I have made a UI which works fine on iPhone 6 but not working fine on iPhone 5 or lower versions. How should I fix this ?

Answer 1

You need to think about proportion when building your UI.

1, Use percentage(%) for width and aspectRatio for height, or vice versa.

container: {
    width: "100%",
    aspectRatio: 10 / 3, //height will be "30%" of your width
}

2, Use flex for the jobs percentage can't do. For example, if you have arbitrary size of items in a list and you want them to share equal sizes. Assign each of them with flex: 1

3, Use rem from EStyleSheet instead of pixels. rem is a scale fator. For example, if your rem is 2 and your “11rem” will become “11*2” = “22”. If we make rem proportion to the screen sizes, your UI will scale with any screen sizes.

//we define rem equals to the entireScreenWidth / 380
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});

//how to use rem
container: {
    width: "100%",
    aspectRatio: 10 / 3, //height will be "30%"
    padding: "8rem", //it'll scale depend on the screen sizes.
}

4, Use scrollView for contents that could potentially scale out of the boxes. For example, a TextView

5, Every time you think about using pixels, consider use rem in method 3.

For a detailed explanation, you can read the article here. 7 Tips to Develop React Native UIs For All Screen Sizes