react-use-measure icon indicating copy to clipboard operation
react-use-measure copied to clipboard

React Native Support

Open JackCA opened this issue 5 years ago • 22 comments

Has there been any consideration for supporting react native?

JackCA avatar Dec 15 '19 03:12 JackCA

yes, the build system is already primed for multiple targets. but needs a pr to add src/native. i have no experience with RN but probably would be easy to do, i guess it also doesn't need all the hacks we have to put up with in the dom. you interested in filling in?

drcmda avatar Dec 15 '19 07:12 drcmda

Issue Status: 1. Open 2. Started 3. Submitted 4. Done


This issue now has a funding of 0.725 ETH (89.98 USD @ $124.11/ETH) attached to it as part of the JackCA fund.

gitcoinbot avatar Dec 18 '19 04:12 gitcoinbot

@drcmda I don't have personal time for it right now but I'm experimenting with above bounty :peace_symbol:

JackCA avatar Dec 18 '19 04:12 JackCA

hi @drcmda @JackCA I have this working in react native but it only returns the width, height, x, y bounds because they are the only ones officially supported by react-native

So is this ok? I can make a note of it in the documentation just to make it clear.

mul1sh avatar Dec 24 '19 15:12 mul1sh

@mul1sh nice. I think you should probably follow the directory structure from react-three-fiber but maybe @drcmda has feedback about that.

The goal is to match the API of the web version so there's probably more to be done to match it there.

JackCA avatar Dec 25 '19 06:12 JackCA

I'm also not sure the async change is going to work in practice

JackCA avatar Dec 25 '19 06:12 JackCA

@JackCA in order to follow the directory structure of react-three-fiber, I would have to add another dependency to this project i.e. react-reconciler is this ok?

mul1sh avatar Dec 30 '19 09:12 mul1sh

@mul1sh are you sure? By that I just meant moving to src/native in this repo (since there is already src/web.

JackCA avatar Dec 30 '19 19:12 JackCA

@JackCA Yes we need to add react-reconciler otherwise how will react know to switch to the react native implementation when running in react native? If anything thats how its been done in react-three-fiber so switching the directories is not enough 🙂

mul1sh avatar Jan 02 '20 14:01 mul1sh

Any thoughts @JackCA want to wrap this up by latest tomorrow

mul1sh avatar Jan 05 '20 16:01 mul1sh

It's possible that using that as an example was misguided on my part, because that structure may only be that way because it uses react-reconciler (which is supposed to be for custom renderers and that's definitely not what this library is).

@drcmda can you speak to how @mul1sh should organize this? (and any other comments on code)

JackCA avatar Jan 06 '20 01:01 JackCA

@mul1sh @JackCA hey everyone, i wasn't online over the holidays, sorry for the delay. the async bit is a bit weird. hooks can't be awaited, that would only go for suspense. it should wait for the promise in there (.then(r => ....)) and then fill the data in.

also, using the navigator ... i think it would be best to fork index.ts, rename it native.ts, remove the web bits and just add the RN stuff in there. in package.json we can link this file using the "react-native" field. this is how we're doing it with react-spring: https://github.com/react-spring/react-spring/blob/master/package.json#L7 we don't need react-reconciler for this.

drcmda avatar Jan 06 '20 11:01 drcmda

@JackCA sorry but after many testing out many fixes, I don't think there is a way to get the left, right, top and bottom co-ords of a view in react native. The only way this seems possible is if the view is wrapped by a DOM Node and then using getBoundingClientRect() to get the co-ords something already supported by this lib.

So should I just submit it the way it is, where you will be able to get the x,y, width, pageX & pageY bounds of a view in react native as supported by the official api?

mul1sh avatar Jan 13 '20 13:01 mul1sh

hey @mul1sh -- I'm a little confused because you mention DOM nodes which is on the browser side of things.

What is holding us back from using measure and/or measureInWindow in this implementation exactly?

JackCA avatar Jan 14 '20 07:01 JackCA

@JackCA nothing is stopping me from using 'measure' or 'measureInWindow', its just that they won't return the left, right, top and bottom co-ords for react-native views like the current api does for html dom nodes via 'getBoundingClientRect()'

Sorry for the confusion this is what I meant, so should I just submit it like this or what else do you propose be done?

mul1sh avatar Jan 14 '20 07:01 mul1sh

@mul1sh as I'm looking at this, I'm not completely sure what different between x and left -- in most of the demos the values are the same. Could you clarify?

JackCA avatar Jan 15 '20 03:01 JackCA

Any feedback on the tests? Thanks

mul1sh avatar Jan 18 '20 16:01 mul1sh

I think tests would be a good idea as there are currently tests for the web version

JackCA avatar Jan 18 '20 21:01 JackCA

Finally done after a long time, preparing a PR to submit now

mul1sh avatar Mar 03 '20 16:03 mul1sh

Hey! Did that PR end up getting merged?

ianmartorell avatar Apr 10 '20 12:04 ianmartorell

Issue Status: 1. Open 2. Started 3. Submitted 4. Done


Workers have applied to start work.

These users each claimed they can complete the work by 3 weeks, 5 days ago. Please review their action plans below:

1) mczenith has applied to start work (Funders only: approve worker | reject worker).

1.) Understand the problem 2.) Plan the execution 3.) Code 4.)Test 5.) Deploy

Learn more on the Gitcoin Issue Details page.

gitcoinbot avatar Apr 14 '20 02:04 gitcoinbot

Is the PR up somewhere?

chriscoderdr avatar Jul 26 '20 10:07 chriscoderdr