How React Native handle different screen sizes?

by

React Native provides many ways to handle screen sizes. Some of them are given below:

1. Flexbox: It is used to provide a consistent layout on different screen sizes. It has three main properties:

  • flexDirection
  • justifyContent
  • alignItems

2. Pixel Ratio: It is used to get access to the device pixel density by using the PixelRatio class. We will get a higher resolution image if we are on a high pixel density device.

3. Dimensions: It is used to handle different screen sizes and style the page precisely. It needs to write the code only once for working on any device.

4. AspectRatio: It is used to set the height or vice versa. The aspectRatio is present only in React-Native, not a CSS standard.

5. ScrollView: It is a scrolling container which contains multiple components and view. The scrollable items can be scroll both vertically and horizontally