React-native-web: add useWindowDimensions

[opeologist]

Is your feature request related to a problem? Please describe.
react-native 0.61 added this hook, and would simplify fluid elements on web when the viewport's dimensions adjust, instead of using onLayout, etc

Describe a solution you'd like
it looks like it could JustWorkTM, since the dependent modules are already ported (eg, dimensions, etc), but i just want to make sure from the horse's mouth that it's usable today.

Describe alternatives you've considered
onLayout is the only alternative right now for adjusting elements that leverage the Dimensions api, which is static.

Additional context
here's the link to the implemented hook source: https://github.com/facebook/react-native/blob/master/Libraries/Utilities/useWindowDimensions.js

[necolas]

onLayout is the better API. Dimensions is only for the viewport and is a poor tool for flexible component layouts. I don't know why we added useWindowDimensions to the RN core, but I guess I'll have to add it here eventually

[opeologist]

hm, ok cool, thanks for the clarification! is there any information around why onLayout is the preferred API? it seems like a potential perf issue if all components had their own listener that had to do a recalc when the layout changed instead of pointing to a single viewport listener... i guess i misunderstood that new hook that was introduced, it seemed to me like a RN version of css' viewport units or something shrug

[danny-williams-rival]

@tehOPEologist useWindowDimensions and onLayout serve different needs. The former only gives you information about the entire viewport, whereas the latter gives you information about the View it's on. The latter allows for the much-discussed-never-implemented element queries. Because of that, you're correct that having a lot of elements doing their own layout calculation is a possible performance issue; but that would be entirely dependent on how it's used and not really addressable as an API.

[opeologist]

yeah, i figured as much. i think implementing useWindowDimensions would solve my need for being able to calc based off viewport, which is why i've requested it be added to RNW

[necolas]

You can already use Dimensions to do that, or build the hook yourself in user-space as it has no dependencies on RN core

[opeologist]

ok, i just know for compatibility with the react-native API, someone's gonna try to use it and it will probably error cryptically. i know you have an unimplemented that you export for other parts of the API that aren't ported, would probably be needed if you're not going to reference the core one or port it if needed shrug

[necolas]

I was answering: "...would solve my need for being able to calc based off viewport...". You can already do that today and have been able to for some time. All RN added is a hook API

[MoOx]

@necolas I would like to handle this as a PR but I was wondering if there is any way to explicitly directly "copy" or "sync" a thing with RN core if that's doable (and according to the simple code of this hook, it should cause any trouble).
Alternatively I can just copy it from RN & add it as a PR.
What is the best approch to contribute to RN for this kind of stuff?

[MoOx]

I saw the "src/vendor/react-native" & the SHA but it doesn't looks like the rn repo or Libraries folder.

[necolas]

Thanks. You have to copy it manually

[necolas]

df1b62cd454565cc3d07662f84848b483c6f8744