React Native: Styles Normalization || Responsive Design 📲

When we are developing a React Native Application, in some cases we expect the application to work on both mobiles and tablets (iPad, Android Tablets).

One of the challenges with this kind of requirement is the visually different styles such as font sizes not adjusting according to the screen size.

iOS and Android devices have different pixel ratios. If you are defining the font sizes in pixels, the size may vary from device to device. As a result, we have to explain every font, width, and height according to the device's pixel density and dimensions.

The Solution:

This kind of issue with React Native Applications can be dealt with by normalizing the styles with respect to a fixed screen size scale.

Example: Based on iPhone 11 scale

screenWidth = 414 screenHeight = 896

NOTE: Any device can be considered for this fixed scale inputs. Best to choose the device for which the UX is designed.

Use these fixed scales to calculate the baseWidth and baseHeight.

STEP 1:

First, we would need to extract the screen height and width using Dimensions from the react-native package.