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 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.