How to handle different screen sizes in the response native?

Question

I am developing a reaction based application. I created a user interface that works great on iPhone 6, but doesn't work fine on iPhone 5 or lower. How can I fix this?

Answer 1

Have you developed an application using a fixed width and height? You should definitely use the flexbox features and try to avoid setting fixed sizes as much as possible. the flex property can be used to determine how much space a <View /> should use freeing up for others, and other properties on this page can be used to flexibly expose elements that should produce the desired results on different screen sizes.

Sometimes you may need <ScrollView /> .

If you need fixed sizes, you can use Dimensions.get('window') .

Answer 2

You need to calculate the sizes dynamically, relying on the 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 width height: height * 0.2 // 20% of screen height } }) 

If you use TabbarIOS , remember that Dimensions.get('window') gives you the whole height of the screen, this means that you will need to take into account that the tab has a fixed height of 56, For example, when using TabbarIOS :

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

Then use WIDTH and HEIGHT as above.