microsoft / microsoft/react-native-windows

PanResponder / Responder don't appear to work on New Architecture

Open
#14,119 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Fabric Area: PanResponder bug New Architecture Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Problem Description

Hey folks! Have been playing around with 0.76.0 and loving it so far. One thing that doesn't seem to work, which I haven't found an existing GitHub issue for is PanResponder. I'm trying out the basic example from https://reactnative.dev/docs/panresponder and it doesn't move.

If I tweak the responder a bit to:

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        console.log('onPanResponderGrant');
      },
      onPanResponderMove: (event, gesture) => {
        console.log(gesture);
      },
      onPanResponderRelease: () => {
        console.log('onPanResponderRelease');
        pan.extractOffset();
      },
    }),
  ).current;

It'll log the onPanResponderGrant (unless the view has a as a child) and onPanResponderRelease, but it never triggers onPanResponderMove

The same can be said for Gesture Responder and onResponderMove (which seems like it should work).

onPointerMove does work, so we can probably use that in the interim :)

Steps To Reproduce

Fresh install of new architecture -> copy and paste example from https://reactnative.dev/docs/panresponder

Expected Results

No response

CLI version

15.0.0

Environment
Windows 11 10.0.22631
React Native 0.76.1
RNW 0.76.0
Community Modules

No response

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the PanResponder documentation example and the React Native Windows responder event handling, comparing onPointerMove with onPanResponderMove under the New Architecture. Reproduce on Windows 11 with React Native 0.76.1 and RNW 0.76.0, including a Pressable child; done means PanResponder and Gesture Responder move callbacks fire as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.