Emulating pointerEvents="none" behavior with gestures (event fall through)

[cboar]

Consider the following scene:

    <View style={styles.flex}>
      <ScrollView>{ content }</ScrollView>
      <View pointerEvents="box-none" style={styles.overlay}>
        <GestureDetector gesture={gesture}>
          <Animated.View style={[styles.box, stylez]}>{ children }</Animated.View>
        </GestureDetector>
      </View>
    </View>

• A ScrollView in the background
• A transparent absolutely-positioned overlay on top
• A colored, floating box inside the overlay

I am setting up gesture handlers in such a way as to achieve the following requirements:

1. The box can be dragged around freely.
2. The box can be 'locked' via props:
   a. Drag events are no longer handled, and should "fall through" to the ScrollView for scrolling. (it's okay if this only applies to new gestures)
3. The box contains touchable content, which should respond to taps at all times, even when the box is locked.

I am struggling to achieve the points 2a and 3 at the same time. Setting pointerEvents="none" on the box causes the events to fall through onto the ScrollView. However, it also prevents the content inside the box from receiving tap gestures. And while simply disabling the gesture stops the pan events, they do not fall through onto the ScrollView.

Is there some approach where I can allow certain gestures (pan) to fall through to outside components, while still capturing some other types of gestures (tap)?

[andreialecu]

We're also interested in this over at the https://github.com/PedroBern/react-native-collapsible-tab-view/ library. See the GIFs in the Readme for an overview.

To clarify, we're overlaying a View on top of a scrollview to provide as the header. When the scrollview scrolls, we move the header up.

However, some users would like to be able to scroll from the header, or have a horizontal scrollview inside the header. There is a hacky PR here that attempts to fix this: PedroBern/react-native-collapsible-tab-view#254 by basically sending simulated scroll events to the underlying scrollview but it's not ideal and doesn't handle all cases. (cc @tiagocorreiaalmeida)

Any ideas if this is possible to do with rngh? (sorry for the ping, but perhaps you can share some insight @j-piasecki)

[j-piasecki]

Is this close to the behavior you want to achieve?

pointerevents.mp4

Here's the code for it:

Pointer events example

import React, { useState } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import {
  GestureDetector,
  Gesture,
  ScrollView,
  TouchableOpacity,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

function Spacer(props: { color: string }) {
  return (
    <View
      style={{
        backgroundColor: props.color,
        width: 200,
        height: 200,
        margin: 15,
      }}
    />
  );
}

export default function Test() {
  const [dragEnabled, setDragEnabled] = useState(true);

  const x = useSharedValue(0);
  const y = useSharedValue(0);

  const gesture = Gesture.Pan()
    .onChange((e) => {
      x.value += e.changeX;
      y.value += e.changeY;
    })
    .enabled(dragEnabled);

  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: x.value }, { translateY: y.value }],
  }));

  return (
    <View style={{ flex: 1 }}>
      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{ alignItems: 'center' }}>
        <Spacer color="green" />
        <Spacer color="yellow" />
        <Button
          title={dragEnabled ? 'Disable drag' : 'Enable drag'}
          onPress={() => {
            setDragEnabled(!dragEnabled);
          }}
        />
        <Spacer color="green" />
        <Spacer color="yellow" />
      </ScrollView>

      <View
        style={{ ...StyleSheet.absoluteFillObject }}
        pointerEvents={'box-none'}>
        <GestureDetector gesture={gesture}>
          <Animated.View
            pointerEvents={dragEnabled ? 'auto' : 'box-none'}
            style={[
              {
                backgroundColor: 'red',
                width: 200,
                height: 100,
                justifyContent: 'center',
                alignItems: 'center',
              },
              style,
            ]}>
            <TouchableOpacity>
              <View
                style={{ backgroundColor: 'blue', width: 100, height: 50 }}
              />
            </TouchableOpacity>
          </Animated.View>
        </GestureDetector>
      </View>
    </View>
  );
}

As for your question @andreialecu, If the header is above the scroll view, then setting pointer-events="none" to it should pass events down to the scroll view, but I see it's mentioned in readme so I'm not sure if I understand correctly.
As for the two ScrollViews, I'm not sure if there is a non-hacky solution. You could take a look at the bottom sheet example (old API, new API) to see if hacks used there are useful but those examples have some issues, especially on Android.

[cboar]

Hi, thank you for taking a look at this -- that is already a lot closer than I got!

There is still one issue I have with that implementation: When the box is locked, and I start to drag from the button, I would expect that gesture to transfer over to the ScrollView as well (when the tap gesture fails to recognize).

I managed to implement this with the following gesture and animated props, which works for Android, but unfortunately not iOS.

  const buttonFallthrough = useSharedValue(false);
  const buttonProps = useAnimatedProps(() => ({
    pointerEvents: buttonFallthrough.value ? "none" : "auto",
  }));
  const tap = Gesture.Tap()
    .onStart(() => {
      console.log('Tap');
    })
    .onTouchesDown(() => {
      buttonFallthrough.value = true;
    })
    .onFinalize(() => {
      buttonFallthrough.value = false;
    });

Related discussion: #1953

[andreialecu]

@j-piasecki There's a video here that shows what behavior some users are looking for:

PedroBern/react-native-collapsible-tab-view#254

But the implementation is very hacky. I was wondering if there are any better options possible, perhaps with RNGH.

[j-piasecki]

@cboar To be honest, I'm not sure why it works on Android as pointerEvents should be considered only when the finger first touches the screen.
I don't think there is a non-hacky solution in both of your cases. To get this to work, the ScrollView would need to be active from the start and wait for another gesture to fail. I think touch events are the way to go there, although you would need to write a lot of touch-handling logic, and you also need to be able to calculate the position of touchable components on screen.

Here's an example

import React, { useState } from 'react';
import { StyleSheet, View, Button, ScrollView } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

function Spacer(props: { color: string }) {
  return (
    <View
      style={{
        backgroundColor: props.color,
        width: 200,
        height: 200,
        margin: 15,
      }}
    />
  );
}

export default function Test() {
  const [dragEnabled, setDragEnabled] = useState(true);

  const x = useSharedValue(0);
  const y = useSharedValue(0);
  const tapValid = useSharedValue(false);

  const tapCallback = () => {
    'worklet';
    console.log('tap');
  };

  const scrollGesture = Gesture.Native();

  const fakeTapGesture = Gesture.Manual()
    .onTouchesDown((e, state) => {
      if (
        e.changedTouches[0].x > x.value + 50 &&
        e.changedTouches[0].x < x.value + 150 &&
        e.changedTouches[0].y > y.value + 25 &&
        e.changedTouches[0].y < y.value + 75
      ) {
        tapValid.value = true;
      } else {
        state.fail();
      }
    })
    .onTouchesMove((_e, state) => {
      tapValid.value = false;
      state.fail();
    })
    .onTouchesUp(() => {
      if (tapValid.value) {
        tapCallback();
        tapValid.value = false;
      }
    });

  const gesture = Gesture.Pan()
    .onChange((e) => {
      x.value += e.changeX;
      y.value += e.changeY;
    })
    .enabled(dragEnabled);

  const realTap = Gesture.Tap().onStart(tapCallback);

  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: x.value }, { translateY: y.value }],
  }));

  return (
    <View style={{ flex: 1 }}>
      <GestureDetector
        gesture={Gesture.Exclusive(fakeTapGesture, scrollGesture)}>
        <ScrollView
          style={{ flex: 1 }}
          contentContainerStyle={{ alignItems: 'center' }}>
          <Spacer color="green" />
          <Spacer color="yellow" />
          <Button
            title={dragEnabled ? 'Disable drag' : 'Enable drag'}
            onPress={() => {
              setDragEnabled(!dragEnabled);
            }}
          />
          <Spacer color="green" />
          <Spacer color="yellow" />
        </ScrollView>
      </GestureDetector>

      <View
        style={{ ...StyleSheet.absoluteFillObject }}
        pointerEvents={'box-none'}>
        <GestureDetector gesture={gesture}>
          <Animated.View
            pointerEvents={dragEnabled ? 'auto' : 'none'}
            style={[
              {
                backgroundColor: 'red',
                width: 200,
                height: 100,
                justifyContent: 'center',
                alignItems: 'center',
              },
              style,
            ]}>
            <GestureDetector gesture={realTap}>
              <View
                style={{ backgroundColor: 'blue', width: 100, height: 50 }}
              />
            </GestureDetector>
          </Animated.View>
        </GestureDetector>
      </View>
    </View>
  );
}

It basically adds a manual gesture to the ScrollView and makes it exclusive with scrolling, so the scrolling won't begin until the manual gesture fails. When the dragging is enabled it doesn't change anything because if the touches are on the draggable component it captures events (because of pointerEvents='auto'), and if the touches are on ScrollView is fails immediately.
When dragging is disabled, all events fall through the component that's supposed to be partially touchable, so the manual gesture can determine if the scroll should begin, or not.

I'm not sure if this is helpful in your case @andreialecu, as it relies on the manual gesture attached to the ScrollView and calculating the position of touchable items 'by hand', but unfortunately it's all I've got 😞.

[andreialecu]

I wonder: Can you think of anything that might be added to RNGH, on the native side of things, that could enable this? Some sort of new API? Perhaps a way to toggle pointerEvents via a worklet in response to gesture event failures.

[j-piasecki]

It may be hard, as on both platforms, but especially on iOS, there's no way to make a handler start tracking the pointer after it's been placed on the screen, so toggling pointerEvents while gesture is working wouldn't have an impact.

It could be done if both gestures were tracking the finger from the start and one would simply wait for the other to fail before activating, but this comes with another set of problems:

• the view would need to capture and pass through the events at the same time, while it's doable on Android, I'm not sure how to approach this with current logic on iOS
• that would require a lot of changes to the code responsible for determining which views can be a touch targets for a given event, so even if it were a new API, it would probably be a breaking change

I'll talk about it with the rest of the team, but I'm not sure if it's feasible at the moment.