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.
Copy file name to clipboardExpand all lines: README.md
+20-8Lines changed: 20 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -2,9 +2,10 @@
2
2
3
3
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.
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 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.
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.
height:responsiveHeight(50), // 50% of screen height
26
31
width:responsiveWidth(50), // 50% of screen width
27
-
alignItems:'center',
32
+
alignItems:"center"
28
33
},
29
34
sampleText: {
30
-
fontSize:responsiveFontSize(2),// 2% of total screen size
35
+
fontSize:responsiveFontSize(2) // 2% of total screen size
31
36
}
32
37
});
33
38
```
34
39
35
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.
36
41
37
-
License
38
-
----
42
+
## Major Update - Responsive Hooks are here!!
43
+
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.
45
+
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.
47
+
48
+
An example project has been included in RNResponsiveDimensionsExample directory which will explain how to use the new custom hooks and how they will differ from the usual responsive functions.
0 commit comments