📱 react-native-responsive-sizes

⚙️ Installation

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

npm install react-native-responsive-sizes

yarn add react-native-responsive-sizes

⚙️ Usage

import React from "react";
import { width, height, size, fontSize } from "react-native-responsive-sizes";
import { View, Text } from "react-native";

export const SampleComponent = () => {
  return (
    <View
      style={{
        width: width(90), // 90% of the screen's width
        height: size(600), // originally 600
        marginTop: size(10), // originally 10
        backgroundColor: "blue",
        alignSelf: "center",
      }}
    >
      {[
        "First",
        "Second",
        "Third",
        "Fourth",
        "Fifth",
        "Sixth",
        "Seventh",
        "Eigth",
        "Ninth",
        "Tenth",
      ].map((text, index) => (
        <View
          key={`${text} ${index}`}
          style={{
            backgroundColor: "red",
            justifyContent: "center",
            marginTop: size(10), // originally 10
            height: size(40), // originally 40
            marginHorizontal: size(10), // originally 10
          }}
        >
          <Text
            style={{
              fontSize: fontSize(14),
              textAlign: "center",
            }}
          >
            {text}
          </Text>
        </View>
      ))}
    </View>
  );
};

⚙️ 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