npm or yarn to install this package.npm install react-native-responsive-sizes
yarn add react-native-responsive-sizes
import React from "react";
import { useResponsiveSizes } from "react-native-responsive-sizes";
import { View, Text } from "react-native";
export const SampleComponent = () => {
// Instantiate the hook
const responsive = useResponsiveSizes();
return (
<View
style={{
width: responsive.width(90), // 90% of the screen's width
height: responsive.size(600), // originally 600
marginTop: responsive.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: responsive.size(10), // originally 10
height: responsive.size(40), // originally 40
marginHorizontal: responsive.size(10), // originally 10
}}
>
<Text
style={{
fontSize: responsive.fontSize(14),
textAlign: "center",
}}
>
{text}
</Text>
</View>
))}
</View>
);
};
| 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 |
react-native-responsive-sizes