React Native Support

[JackCA]

Has there been any consideration for supporting react native?

[drcmda]

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?

[gitcoinbot]

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.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $67,945.65 more funded OSS Work available on the Gitcoin Issue Explorer

[JackCA]

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

[mul1sh]

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.

[JackCA]

@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]

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

[mul1sh]

@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?

[JackCA]

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

[mul1sh]

@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]

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

[JackCA]

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)

[drcmda]

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

[mul1sh]

@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?

[JackCA]

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?

[mul1sh]

@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?

[JackCA]

@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?

[mul1sh]

Any feedback on the tests? Thanks

[JackCA]

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

[mul1sh]

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

[ianmartorell]

Hey! Did that PR end up getting merged?

[gitcoinbot]

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.

[chriscoderdr]

Is the PR up somewhere?