You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 29, 2022. It is now read-only.
Responsive height, width and responsive fontSize for react native components that automatically adjust themselves based on the screen size of the device. The dimensions can be used for any components like View, Image, Text etc.
3
+
# 📐📱 React Native Responsive Dimensions 🌐📏
4
4
5
-
##### Responsive Font Size uses only the width of the device and auto adjusts to the screen. It will not depend on Height due to different aspect ratio across many devices.
5
+
Responsive height, width and responsive fontSize for your react native components!
6
6
7
-
Installation
7
+
The dimensions auto adjust based on the window size (view port) or the screen size of the device ✨
8
+
9
+
Support for responsive dimension hooks to help auto-adjust dimensions for devices whose display or screen sizes may change such as foldable phones or browser windows!
The below snippet will create styles with a container of dynamic height, width and a sample text with dynamic font-size relative to the screen size of the device the app is run.
47
+
## Usage
48
+
49
+
While working with mobile devices, there are two kinds of dimensions you will have to focus on
50
+
51
+
- Window Dimensions ﹣ which is the size of the window / view port on which your app is being displayed
52
+
- Screen Dimensions ﹣ this is the total screen dimensions of your device (your app may occupy the entire screen or only a portion of the screen)
53
+
54
+
### Working with Window Dimensions
18
55
19
56
```js
20
57
import { StyleSheet } from"react-native";
@@ -27,32 +64,111 @@ import {
27
64
conststyles=StyleSheet.create({
28
65
container: {
29
66
justifyContent:"center",
30
-
height:responsiveHeight(50), // 50% of screen height
31
-
width:responsiveWidth(50), // 50% of screen width
67
+
height:responsiveHeight(50), // 50% of window height
68
+
width:responsiveWidth(50), // 50% of window width
32
69
alignItems:"center"
33
70
},
34
71
sampleText: {
35
-
fontSize:responsiveFontSize(2) // 2% of total screen size
72
+
fontSize:responsiveFontSize(2) // 2% of total window size
36
73
}
37
74
});
38
75
```
39
76
40
-
This will create a container(view/image) with height that is exactly 50% of the device's screen-height and width exactly 50% of the device's screen-height and a font with fontSize that occupies exactly 2% of the screen size.
77
+
### Working with Screen Dimensions
41
78
42
-
## Major Update - Responsive Hooks are here!!
79
+
```js
80
+
import { StyleSheet } from"react-native";
81
+
import {
82
+
responsiveScreenHeight,
83
+
responsiveScreenWidth,
84
+
responsiveScreenFontSize
85
+
} from"react-native-responsive-dimensions";
43
86
44
-
One of the most important feedback received from the community is that handling responsive height and width when the device orientation changes is a huge pain point. Also, we have a new lineup of foldable devices whose dimensions are going to by dynamic.
87
+
conststyles=StyleSheet.create({
88
+
container: {
89
+
justifyContent:"center",
90
+
height:responsiveScreenHeight(50), // 50% of Screen height
91
+
width:responsiveScreenWidth(50), // 50% of Screen width
92
+
alignItems:"center"
93
+
},
94
+
sampleText: {
95
+
fontSize:responsiveScreenFontSize(2) // 2% of total screen size
96
+
}
97
+
});
98
+
```
99
+
100
+
## Responsive hooks
101
+
102
+
The above responsive dimension methods do not auto update once the value is set. They are suitable for using within `StyleSheet.create` method as the values don't change once set. However, you might want your views to respond to dimension changes such as screen rotation, device folding (in foldable devices) & browser window resizing (react-native-web).
103
+
104
+
The values set by these hooks auto respond to changes. The following hooks are available for use ﹣
105
+
106
+
-`useResponsiveHeight`
107
+
-`useResponsiveWidth`
108
+
-`useResponsiveFontSize`
109
+
-`useResponsiveScreenHeight`
110
+
-`useResponsiveScreenWidth`
111
+
-`useResponsiveScreenFontSize`
112
+
-`useDimensionsChange`
113
+
114
+
### Sample Usage
45
115
46
-
To address this, taking advantage of the new React Hooks API, responsive dimensions now include three custom hooks `useResponsiveHeight`, `useResponsiveWidth`, `useResponsiveFontSize` which will automatically re-calculate the responsive height, width and font size every time the device orientation or the display size changes.
116
+
```jsx
117
+
importReactfrom"react";
118
+
import { View } from"react-native";
119
+
import {
120
+
useResponsiveHeight,
121
+
useResponsiveWidth
122
+
} from"react-native-responsive-dimensions";
123
+
124
+
constApp= () => {
125
+
constheight=useResponsiveHeight(25);
126
+
constwidth=useResponsiveWidth(25);
127
+
128
+
return<View style={{ height, width }} />;
129
+
};
130
+
```
47
131
48
-
An example project has been included in [RNResponsiveDimensionsExample](https://github.com/DaniAkash/react-native-responsive-dimensions/tree/master/RNResponsiveDimensionsExample) directory which will explain how to use the new custom hooks and how they will differ from the usual responsive functions.
132
+
### React to dimension changes with `useDimensionsChange`
49
133
50
-
In portrait mode, both of them will produce the same result:
`useDimensionsChange` basically calls a function whenever the dimensions update. This is a good place to include your layoutanimations if your UI react to dimension updates and you want to make the transitions smooth.
52
135
53
-
However, in landscape mode, only the views using responsive hooks will be updated as per the new height & width:
0 commit comments