Help with maintenance would be appreciated!

If interested please send me an email: utkarshsingh001997@gmail.com

Contents

• The package
• Installation
• Usage
• Examples
• How do I know it works for all devices ?
• License
• Pull Requests

react-native-core-responsive-screen

react-native-core-responsive-screen React Native Core Responsive Screen is a groundbreaking library that revolutionizes app development for iOS and Android. This library ensures a fully customizable UI in all orientation types, helping developers create seamless and responsive UI/UX across all devices and orientations.

As the universal and advanced solution for responsive design, it offers everything needed to enhance user experiences. Unlike previous practices where apps like Amazon, Zomato, and Blinkit restricted and locked orientations before release, this library allows developers to easily implement orientation functionality without compromising design integrity.

Embrace the future of app development with React Native Core Responsive Screen, the ultimate tool for creating versatile and adaptive applications.

It also provides an optional third method for screen orientation detection and automatic rerendering according to new dimensions.

Give it a try and make your life simpler!

Installation

npm install react-native-core-responsive-screen --save

Usage

Usage Instructions Setup Orientation and Dynamic Width/Height in App.js:

First, call useOrientation in App.js to get the device's orientation at the entry level. Use Redux or props to pass this orientation information to other screens and enclose your app using width: useDynamicWidth(100) and height: useDynamicHeight(100) as given below.

1import { View, SafeAreaView } from "react-native";
2import React, { useEffect, useState } from "react";
3import {
4  useDynamicWidth,
5  useOrientationChange,
6} from "react-native-core-responsive-screen";
7import Login from "./Login";
8
9const App = () => {
10  const orientation = useOrientationChange();
11  const [landscape, setLandscape] = useState(false);
12  useEffect(() => {
13    if (orientation === "landscape") {
14      setLandscape(true);
15    } else {
16      setLandscape(false);
17    }
18  }, [orientation]);
19
20  return (
21    <SafeAreaView style={{ flex: 1, alignItems: "center" }}>
22      <View style={{ alignItems: "center", width: useDynamicWidth(100) }}>
23        <Login landscape={landscape} />
24      </View>
25    </SafeAreaView>
26  );
27};
28
29export default App;

Customizing Screens Based on Orientation:

Inside each screen component where you want to customize the responsiveness according to 'Landscape' and 'Portrait', use moderateScale to adjust component sizes, margins, paddings, font sizes, etc. take the orientation prop or take it from redux and use as given below for the Login Page as shown in the example.

1import {
2  View,
3  Text,
4  TextInput,
5  StyleSheet,
6  TouchableOpacity,
7} from "react-native";
8import React, { useState } from "react";
9
10import { moderateScale } from "react-native-core-responsive-screen";
11const Login = ({ landscape }) => {
12  const [email, setEmail] = useState("");
13  const handleOnChange = (text) => {
14    setEmail(text);
15  };
16  return (
17    <View>
18      <View style={{ alignItems: "center", flex: 1 }}>
19        <View style={landscape ? styles.lheader : styles.header}>
20          <Text style={landscape ? styles.lHeaderText : styles.headerText}>
21            {landscape ? "Landscape" : "Portrait"}
22          </Text>
23        </View>
24
25        <View style={landscape ? styles.lLoginC : styles.loginC}>
26          <Text style={landscape ? styles.LloginText : styles.loginText}>
27            Login
28          </Text>
29        </View>
30        <View style={landscape ? styles.lLabelEmail : styles.labelEmail}>
31          <Text
32            style={landscape ? styles.lLableTextEmail : styles.lableTextEmail}
33          >
34            Email
35          </Text>
36        </View>
37        <View style={landscape ? styles.lEmailC : styles.emailC}>
38          <TextInput
39            onChange={handleOnChange}
40            value={email}
41            style={landscape ? styles.lTextEmail : styles.textEmail}
42          />
43        </View>
44        <View style={landscape ? styles.lLabelPassword : styles.labelPassword}>
45          <Text
46            style={
47              landscape ? styles.lLableTextPassword : styles.lableTextPassword
48            }
49          >
50            Password
51          </Text>
52        </View>
53        <View
54          style={
55            landscape
56              ? [styles.lEmailC, { marginTop: moderateScale(5) }]
57              : [styles.emailC, { marginTop: moderateScale(5) }]
58          }
59        >
60          <TextInput
61            onChange={handleOnChange}
62            value={email}
63            style={landscape ? styles.lTextEmail : styles.textEmail}
64          />
65        </View>
66        <TouchableOpacity style={landscape ? styles.lButtonC : styles.buttonC}>
67          <Text style={landscape ? styles.lButtonText : styles.buttonText}>
68            Login
69          </Text>
70        </TouchableOpacity>
71      </View>
72    </View>
73  );
74};
75
76export default Login;
77
78const styles = StyleSheet.create({
79  header: {
80    alignItems: "center",
81  },
82  lheader: { alignItems: "center" },
83  headerText: { fontSize: moderateScale(20), color: "red" },
84  lHeaderText: { fontSize: moderateScale(28), color: "green" },
85  LloginText: { fontSize: moderateScale(22), color: "black" },
86  loginText: { fontSize: moderateScale(34), color: "black" },
87  loginC: { marginTop: moderateScale(40), alignItems: "center" },
88  lLoginC: { marginTop: moderateScale(30), alignItems: "center" },
89  lLabelEmail: {
90    width: moderateScale(500),
91    paddingHorizontal: moderateScale(10),
92    alignItems: "flex-start",
93  },
94  labelEmail: {
95    width: moderateScale(350),
96    paddingHorizontal: moderateScale(10),
97    alignItems: "flex-start",
98  },
99  lLabelPassword: {
100    marginTop: moderateScale(30),
101    width: moderateScale(500),
102    paddingHorizontal: moderateScale(10),
103    alignItems: "flex-start",
104  },
105  labelPassword: {
106    marginTop: moderateScale(30),
107    width: moderateScale(350),
108    paddingHorizontal: moderateScale(10),
109    alignItems: "flex-start",
110  },
111  lLableTextEmail: {
112    fontSize: moderateScale(9),
113  },
114  lableTextEmail: {
115    fontSize: moderateScale(10),
116  },
117  lLableTextPassword: { fontSize: moderateScale(9) },
118  lableTextPassword: { fontSize: moderateScale(10) },
119  lEmailC: {
120    marginTop: moderateScale(5),
121    height: moderateScale(40),
122    borderWidth: 1,
123    borderColor: "black",
124    alignItems: "center",
125    width: moderateScale(500),
126    justifyContent: "center",
127    borderRadius: 8,
128  },
129  emailC: {
130    borderRadius: 8,
131    marginTop: moderateScale(5),
132    alignItems: "center",
133    justifyContent: "center",
134    height: moderateScale(40),
135    borderWidth: 1,
136    borderColor: "black",
137    width: moderateScale(350),
138  },
139  lTextEmail: {
140    fontSize: moderateScale(14),
141
142    width: moderateScale(450),
143  },
144
145  textEmail: {
146    fontSize: moderateScale(14),
147
148    width: moderateScale(335),
149  },
150  lButtonC: {
151    alignItems: "center",
152    justifyContent: "center",
153    width: moderateScale(500),
154    height: moderateScale(40),
155    borderWidth: 1,
156    borderColor: "black",
157    borderRadius: 8,
158    marginTop: moderateScale(60),
159    backgroundColor: "black",
160  },
161  buttonC: {
162    marginTop: moderateScale(50),
163    alignItems: "center",
164    justifyContent: "center",
165    width: moderateScale(350),
166    height: moderateScale(40),
167    borderWidth: 1,
168    borderColor: "black",
169    borderRadius: 8,
170    backgroundColor: "black",
171  },
172  lButtonText: {
173    fontSize: moderateScale(18),
174    color: "white",
175  },
176  buttonText: {
177    fontSize: moderateScale(16),
178
179    color: "white",
180  },
181});

Examples

You can find a working example of this over the related example repository

Smartphones

Tablets

License

ISC

Pull

Pull requests are welcome! Please make the PR to development branch though and not master. Thanks.