react-native-design-responsive

A simple React Native library to help with responsive design using functions like vw (viewport width), vh (viewport height), and normalize for scaling text and other elements across different screen sizes.

Installation

Install the library using npm or yarn:

1npm install react-native-design-responsive
2

or

1yarn add react-native-design-responsive

Usage

Once installed, you can import the functions vw, vh, and normalize from the package and use them in your components to make your UI responsive.

1import React from "react";
2import { Text, View, StyleSheet } from "react-native";
3import { vw, vh, normalize } from "react-native-design-responsive";
4
5const ExampleComponent = () => {
6  return (
7    <View style={styles.container}>
8      <Text style={styles.title}>Responsive Design Example</Text>
9      <View style={styles.box} />
10    </View>
11  );
12};
13
14const styles = StyleSheet.create({
15  container: {
16    flex: 1,
17    justifyContent: "center",
18    alignItems: "center",
19    padding: vw(5),
20  },
21  title: {
22    fontSize: normalize(20),
23    marginBottom: vh(2),
24  },
25  box: {
26    width: vw(50),
27    height: vh(30),
28    backgroundColor: "skyblue",
29  },
30});
31
32export default ExampleComponent;

1Functions
2vw(width: number): number
3Returns the calculated width as a percentage of the device's screen width, similar to the CSS vw unit.
4
5vh(height: number): number
6Returns the calculated height as a percentage of the device's screen height, similar to the CSS vh unit.
7
8normalize(size: number): number
9Normalizes the provided size based on the device's screen size, scaling the size proportionally for both mobile and tablet devices.
10
11getStatusBarHeight(): number
12getStatusBarHeight returns calulated status bar height for every device
13