search

rive-app / rive-react

React runtime for Rive
https://rive-app.github.io/rive-react
MIT License
755 stars 27 forks source link

Mobile scroll and event listener #236

Open bodnarescu-riccardo opened 4 months ago

bodnarescu-riccardo commented 4 months ago

This is the same problem as https://github.com/rive-app/rive-react/issues/229

When you make a Rive component that is interactive it disables the ability to scroll This is definitely because of a touch event listener combined with a preventDefault that stops it from scrolling

Ideal solution would be: Instead of preventDefault when you touch the screen, maybe you can check if it is necesarry. When touching an area in the canvas that has no triggers, just don't disable scroll. And for the cases where this would be ideal, just add a stopScrollOnTouch: as prop

For now, I just disabled the event listeners and added my own events until this problem is fixed

bodnarescu-riccardo commented 4 months ago

Steps to solve the bug cause canvas_advanced_single.mjs is not public and i really hope it gets solved:

  1. There is StateMachineInstance class in canvas_advanced_single.mjs. You need to either change pointerDown() to return an object or create a functions that confirms touching something intractable. (check_interactive()for example)
  2. On line 149 where it checks if "mousedown"/"touchstart", add the new function and if it is interactive, set event.preventDefault()
  3. Remove event.preventDefault() from registerTouchInteractions.ts line 32

Done!