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

Commit 7a91c20

Browse files
committed
updated readme
1 parent 6c9c11b commit 7a91c20

File tree

2 files changed

+17
-8
lines changed

2 files changed

+17
-8
lines changed

README.md

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -129,12 +129,12 @@ const App = () => {
129129
};
130130
```
131131

132-
### React to dimension changes with `useDimensionsChange`
132+
### Reacting to dimension changes with `useDimensionsChange`
133133

134-
`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.
134+
`useDimensionsChange` basically calls a function whenever the dimensions update with new window & screen dimensions as arguments. This is a good place to include your layout animations if your UI layout reacts to dimension updates and you want to make the transitions smooth.
135135

136136
```jsx
137-
import React from "react";
137+
import React, { useCallback } from "react";
138138
import { View, LayoutAnimation } from "react-native";
139139
import {
140140
useResponsiveHeight,
@@ -146,14 +146,21 @@ const App = () => {
146146
const height = useResponsiveHeight(25);
147147
const width = useResponsiveWidth(25);
148148

149-
useDimensionsChange(() => {
150-
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
151-
});
149+
useDimensionsChange(
150+
useCallback(({ window, screen }) => {
151+
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
152+
}, [])
153+
);
152154

153155
return <View style={{ height, width }} />;
154156
};
155157
```
156158

159+
## Examples
160+
161+
- [Using Responsive Height & Width (snack)][responsive-example]
162+
- [Using the Responsive Hooks (react-native-web)][responsive-hooks-example]
163+
157164
[build]: https://github.com/DaniAkash/react-native-responsive-dimensions/actions
158165
[build-badge]: https://github.com/daniakash/react-native-responsive-dimensions/workflows/build/badge.svg
159166
[coverage-badge]: https://api.codeclimate.com/v1/badges/f7954c1e1686cabeeb97/test_coverage
@@ -172,3 +179,5 @@ const App = () => {
172179
[github-watch]: https://github.com/DaniAkash/react-native-responsive-dimensions/watchers
173180
[github-star-badge]: https://img.shields.io/github/stars/DaniAkash/react-native-responsive-dimensions.svg?style=social
174181
[github-star]: https://github.com/DaniAkash/react-native-responsive-dimensions/stargazers
182+
[responsive-example]: https://snack.expo.io/@daniakash/responsive-dimensions
183+
[responsive-hooks-example]: https://codesandbox.io/s/react-native-responsive-dimensions-hooks-2cqm8

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "react-native-responsive-dimensions",
3-
"version": "3.0.0",
3+
"version": "3.1.0-beta-2",
44
"description": "Resposive fontSize, height and width for your react-native components.",
5-
"main": "src/index.js",
5+
"main": "lib/index.js",
66
"scripts": {
77
"build": "tsc -p .",
88
"start": "tsc -w",

0 commit comments

Comments
 (0)