Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support some type of addEventListener on native Canvas #3173

Closed
TiagoCavalcante opened this issue Feb 17, 2024 · 1 comment · Fixed by #3252
Closed

Support some type of addEventListener on native Canvas #3173

TiagoCavalcante opened this issue Feb 17, 2024 · 1 comment · Fixed by #3252
Labels
react-native to do with react-native

Comments

@TiagoCavalcante
Copy link

Hi, I'm the developer of r3f-native-orbitcontrols.

I'm facing some issues with the Gesture Responder System — that doesn't propagate touches on older devices to prevent "bubbling", but does on newer devices —, that made me believe that an addEventListener-like feature in native would be a great addition to R3F.

In the web version of R3F, this can be achieved with the following code:

const domElement = useThree((state) => state.gl.domElement)
useEffect(() => {
  domElement.addEventListener("onTouchStart", () => { ... })
  // Other touch events
}, [domElement])

This can, of course, be achieved currently in native in other ways, but none of them are optimal. The ones I know are:

  1. Use the Gesture Responder System from a View - the problem with this is that its behavior is different across devices, and has no "easy fix" (in my case, it is a trade-off between missing some presses in the OrbitControls in newer devices or blocking touch events for all elements in the canvas in older devices).
  2. Use the Canvas touch events - this has the problem that a custom system of event listeners would need to be implemented to have multiple handlers for some events (which is useful if you want to use touch events in elements of the canvas along with an OrbitControls).
  3. Use the touch events of an element in the Canvas - this has the problem that a transparent element needs to be in front of everything that is being rendered (which I believe can hurt performance, but I didn't benchmark it), and is just too hacky.

I believe this can be fixed by implementing an event listener system for the touch events, injecting some code in the onContextCreate here, or creating a "null" element which listens to all touch events (I think this can be done by modifying this code).

@CodyJasonBennett
Copy link
Member

Trying my hand at this in #3252. A good target would be to support OrbitControls and pmndrs/use-gesture.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
react-native to do with react-native
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants