fix useWindowDimensions hook #26008
fix useWindowDimensions hook #26008
Conversation
facebook-github-bot
added
CLA Signed
| const dims = Dimensions.get('window'); // always read the latest value | ||
| const forceUpdate = React.useState(false)[1].bind(null, v => !v); | ||
| const initialDims = React.useState(dims)[0]; | ||
| const [dims, setDims] = React.useState(Dimensions.get('window')); // set initial value |
| // `addEventListener` in this handler... | ||
| forceUpdate(); | ||
| function handleChange({window}) { | ||
| setDims(window) |
| // `addEventListener` in this handler... | ||
| forceUpdate(); | ||
| function handleChange({window}) { | ||
| setDims(window) |
|
@brunolemos please review |
|
Yes it looks more similar to what I would write myself. But the hook was written by @sahrens so I’ll let this to him. |
There was a problem hiding this comment.
Tested on a react-native project and a react-native-web codesandbox, worked well.
https://codesandbox.io/embed/issue-react-native-for-web-t6qyd
|
I don't think that objects will be the same, even if dimensions are same.
|
|
Ah yes, the issue is that when we added the Your implementation here is the simple obvious one, but risks missing an event and never rendering with the correct dims. I'm pretty sure if we just pass an updater function when calling forceUpdate rather than binding it on every render, everything should work. |
There was a problem hiding this comment.
@sahrens has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
|
I'm going to import this but with some changes to handle lost updates. |
|
I'm not getting your concerns about missing events, thus re-renders. This
hook sets initial value and handles events as they occur, and components
will re-render itself if value changes.
|
|
This pull request was successfully merged by @dulmandakh in 3b3c95b. When will my fix make it into a release? | Upcoming Releases |
|
@grabbou Can you confirm that mate? :) Thanks |
|
I also ran into this. Would be great if it would be included in the next react-native release. |
|
@jfrolich This change is indeed included in the 0.62 stable branch, so it should be included :) |
Summary
I found useWindowDimensions hook, and thought that it would solve many issues for me, but implementation looked interesting. So I created a new project, copy pasted the code and console.log dimentions returned from the hook, then rotated iOS simulator and it's printing dimentions non-stop.
Below is my fix for useWindowDimensions, and it works for me.
Changelog
[GENERAL] [CHANGED] - fix useWindowDimensions hook
Test Plan
Copy paste the code to RN project and console.log the return value, and rotate screen it'll log new dimensions.