Skip to content

(React Native): Gestures doesn't work correctly and cause crashesΒ #3585

@FranckG28

Description

@FranckG28
  • three version: 0.180.0
  • @react-three/fiber version: 9.3.0
  • @react-three/drei version: 10.7.6
  • node version: v20.19.4
  • npm (or yarn) version: pnpm 8.15.6
  • expo 54
  • react-native 0.81.4
  • react 19.4

Problem description:

Events doesn't work correctly on react-native anymore.

In this issue, I use OrbitControls as an example, but the same happens for anything that use gestures.

OrbitControls don't pan the camera correctly on React-native. More importantly, it stays stuck in dolly mode and eventually crash.

Try it :

git clone https://github.com/FranckG28/r3f-native-gltf-test.git
git switch orbitcontrols
pnpm i && pnpm start

Repro steps :

  1. Using OrbitControls component from @react-three/drei/native
  2. Mess around with the controls : Try to Pan the camera by moving two fingers.
  3. It never really Pan like you would like to. Try this demo on a mobile browser to see how it should work
  4. Continue until it gets stuck in dolly mode, even if you release your fingers.
  • Then, using one finger will move the camera abruptly, and moving it will use a sort of dolly control.
  • The app will eventually crash with an error :
Image

Relevant code:

Image

The error happens because the getSecondPointerPosition() fn in OrbitControls.js (three-stdlib) can't find the second finger. (since there is none). But this is only a consequence of the controls being stuck in dolly mode even when the two fingers were released before.

I think this might be related to the way fiber handle events on native platform. The fact that this same code but in a browser works correctly on a mobile device confirms that point.

Since events are handled in this lib, I've opened the issue here.

Suggested solution:

Fiber uses React Native PanResponder to handle gestures on mobile devices. I'm not familiar with this API, not sur if it has changes recently.
Maybe something has changed in recent react-native or expo updates, or with new-arch ?
Maybe using react-native-gesture-handler could work better ?

Not sure of what could be the solution yet

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions