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 ?

Solution 1

Have you designed the app using fixed widths and heights? You should definitely use the capabilities of flexbox and try to avoid settings fixed sizes as much as possible. The flex property can be used to define how much space a <View /> should use releative to others, and the other properties on that page can be used to lay out elements in a flexible way that should give the desired results on a range of different screen sizes.

Sometimes, you may also need a <ScrollView />.

When you do need fixed sizes, you could use Dimensions.get('window').

Solution 2

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

Solution 3

You need to calculate sizes dynamically, relying on screen size.

import { Dimensions, StyleSheet } from 'react-native'

[...]

const { width, height } = Dimensions.get('window')

[...]

const styles = StyleSheet.create({
    container: {
        flex: 1.
        flexDirection: 'column',
    },
    myView: {
        width: width * 0.8, // 80% of screen's width
        height: height * 0.2 // 20% of screen's height
    }
})

If you are using TabbarIOS, remember that Dimensions.get('window') gives you the whole screen's height, this means that you'll have to take in account that the tabbar has fixed-height of 56. So for example, when using TabbarIOS:

const WIDTH = Dimensions.get('window').width,
      HEIGHT = Dimensions.get('window').height - 56

Then use WIDTH and HEIGHT as above.

Comments

[Ismail Iqbal]

This does not work for multiple devices (it is actual not precise )

[Philberg]

Where have you seen this not work? It seems to be working well for me (at least on android)

[Evan Erickson]

Aspect Ratio messed everything up on my app. I don't know why. Any ideas?

[user13707546]

On android @Philberg. Different appearance on my emulator and different appearances on real devices.