Skip to content
This repository was archived by the owner on Dec 29, 2022. It is now read-only.

Commit 081a698

Browse files
committed
update readme
1 parent 8c5eb94 commit 081a698

File tree

3 files changed

+20
-8
lines changed

3 files changed

+20
-8
lines changed

README.md

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22

33
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.
44

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.
66

77
Installation
8+
89
```sh
910
#npm
1011
npm install --save react-native-responsive-dimensions
@@ -16,25 +17,36 @@ yarn add react-native-responsive-dimensions
1617
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.
1718

1819
```js
19-
import { StyleSheet } from 'react-native';
20-
import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';
20+
import { StyleSheet } from "react-native";
21+
import {
22+
responsiveHeight,
23+
responsiveWidth,
24+
responsiveFontSize
25+
} from "react-native-responsive-dimensions";
2126

2227
const styles = StyleSheet.create({
2328
container: {
24-
justifyContent: 'center',
29+
justifyContent: "center",
2530
height: responsiveHeight(50), // 50% of screen height
2631
width: responsiveWidth(50), // 50% of screen width
27-
alignItems: 'center',
32+
alignItems: "center"
2833
},
2934
sampleText: {
30-
fontSize: responsiveFontSize(2), // 2% of total screen size
35+
fontSize: responsiveFontSize(2) // 2% of total screen size
3136
}
3237
});
3338
```
3439

3540
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.
3641

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.
49+
50+
## License
3951

4052
MIT
Loading
Loading

0 commit comments

Comments
 (0)