📱 react-native-responsive-sizes

⚙️ Installation

• You may use either npm or yarn to install this package.

1npm install react-native-responsive-sizes

1yarn add react-native-responsive-sizes

⚙️ Usage

1import React from "react";
2import { width, height, size, fontSize } from "react-native-responsive-sizes";
3import { View, Text } from "react-native";
4
5export const SampleComponent = () => {
6  return (
7    <View
8      style={{
9        width: width(90), // 90% of the screen's width
10        height: size(600), // originally 600
11        marginTop: size(10), // originally 10
12        backgroundColor: "blue",
13        alignSelf: "center",
14      }}
15    >
16      {[
17        "First",
18        "Second",
19        "Third",
20        "Fourth",
21        "Fifth",
22        "Sixth",
23        "Seventh",
24        "Eigth",
25        "Ninth",
26        "Tenth",
27      ].map((text, index) => (
28        <View
29          key={`${text} ${index}`}
30          style={{
31            backgroundColor: "red",
32            justifyContent: "center",
33            marginTop: size(10), // originally 10
34            height: size(40), // originally 40
35            marginHorizontal: size(10), // originally 10
36          }}
37        >
38          <Text
39            style={{
40              fontSize: fontSize(14),
41              textAlign: "center",
42            }}
43          >
44            {text}
45          </Text>
46        </View>
47      ))}
48    </View>
49  );
50};

⚙️ Description

Simple & lightweight react-native package to help you make your mobile app look terrific on every screen size. You may use the following functions to make your app more responsive.

Function Name	Input	Output	Example
MOST POPULAR: responsive.size()	number of pixels	number of pixels proportional to screen's height/width	If you use responsive.size(10) then you will receive 10 pixels on iPhone 14 Pro, but slightly different number of pixels for other screen sizes, such as 8 pixels on a smaller iPhone SE or 12 pixels on a larger iPhone 12 Max
responsive.width()	number from 0-100, which corresponds to the percentage of the screen's width	number of pixels equal to the percentage of the screen's width	If you use responsive.width(50) then you will receive a number of pixels equal to 50% of the screen's width
responsive.height()	number from 0-100, which corresponds to the percentage of the screen's height	number of pixels equal to the percentage of the screen's height	If you use responsive.height(50) then you will receive a number of pixels equal to 50% of the screen's height
responsive.fontSize()	font size number	font size that's more proportional to the size of the screen	If you pass it responsive.fontSize(32) then you will receive a 32-point font-size on an iPhone 14 Pro, but slightly smaller font-sizes on smaller devices

⚙️ Before & After Video Demonstration

• Video can be found below, but if you cannot see it, then please follow this link.
• In the video below, you can see how the app looks before and after using react-native-responsive-sizes
• In the BEFORE code, you can see that the styles use constant values, such as: height of 600, marginTop of 10, marginHorizontal of 10, etc.
• But in the AFTER code, you can see some very simple changes were made: responsive.size(600), responsive.size(10), responsive.size(10), etc.
• With those changes, the app looks much proportional on screens of different aspect ratios.

https://github.com/react-native-responsive-sizes/assets/assets/54771184/6978ed10-d535-48d5-9dcb-56fcd6f6546c