Nested pan-gestures get started at the same time after adding activateAfterLongPress()

[marqroldan]

My goal: To allow scrolling by default and only "disable scrolling" when a "draggable" is active
My knowledge is poor and honestly I'm having a hard time trying to understand things

The code below (with the commented parts) work the opposite; scroll view is "disabled" and draggables are getting dragged

However, when I add activateAfterLongPress(250), when I try to drag the inner box, the parent box also gets "started" (isActive.value = true; gets invoked)

Screen.Recording.2025-12-04.at.12.21.59.PM.mov

I haven't tried checking the built-in components yet.. will do so in a bit

I'm currently testing on simulator iPad Pro (M4) iOS 17.5

"react-native": "0.81.4",
"react-native-gesture-handler": "~2.28.0",

import {createContext, createRef, useContext, useRef} from 'react';
import {View, ScrollView} from 'react-native';
import {Gesture, GestureDetector} from 'react-native-gesture-handler';
import {GestureRef} from 'react-native-gesture-handler/src/handlers/gestures/gesture';
import Animated, {
  useAnimatedRef,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const COLORS = ['red', 'green', 'blue', 'purple', 'orange', 'cyan'];
const GestureRefContext = createContext();

function PanningBox({scrollGesture, children}) {
  const animatedRef = useAnimatedRef();
  const translateY = useSharedValue(0);
  const isActive = useSharedValue(false);

  const gestureRefFromContext = useContext(GestureRefContext);
  const gestureRef = useRef(undefined) as unknown as GestureRef;
  const finalGestureRef = gestureRefFromContext ?? gestureRef;

  const pan = Gesture.Pan()
    //.activateAfterLongPress(250)
    //.blocksExternalGesture([finalGestureRef])
    .onStart((e) => {
      isActive.value = true;
      translateY.value = 0;
      console.log('im starting.."');
    })
    .onUpdate((e) => {
      translateY.value = e.translationY;
    })
    .onEnd(() => {
      isActive.value = false;
      translateY.value = 0;
    });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      zIndex: isActive.value ? 100 : 1,
      backgroundColor: isActive.value ? 'red' : 'rgba(0,0,0,0.25)',
      transform: [{translateY: translateY.value}],
    };
  }, []);

  return (
    <GestureDetector gesture={pan}>
      <GestureRefContext value={gestureRef}>
        <Animated.View
          ref={animatedRef}
          style={[
            animatedStyle,
            {
              width: '100%',
              minHeight: 100,
              padding: 30,
              borderWidth: 1,
            },
          ]}>
          {children}
        </Animated.View>
      </GestureRefContext>
    </GestureDetector>
  );
}

export default function App() {
  const native = Gesture.Native();

  return (
    <GestureDetector gesture={native}>
      <ScrollView style={{flex: 1}}>
        <ScrollableContent scrollGesture={native} />
      </ScrollView>
    </GestureDetector>
  );
}

function ScrollableContent({scrollGesture}) {
  return (
    <View>
      {COLORS.map((color) => (
        <PanningBox key={color} color={color} scrollGesture={scrollGesture}>
          <PanningBox key={color} color={color} scrollGesture={scrollGesture} />
        </PanningBox>
      ))}
    </View>
  );
}

function Rectangle({color, scrollGesture}) {
  const pan = Gesture.Pan().blocksExternalGesture(scrollGesture);

  return (
    <View
      key={color}
      style={{width: '100%', height: 250, backgroundColor: color}}>
      <GestureDetector gesture={pan}>
        <View style={{width: '100%', height: 50, backgroundColor: 'black'}} />
      </GestureDetector>
    </View>
  );
}

Maybe related:

• waitFor not working for nested TapGestureHandlers #1303
• Nested touchables don't work correctly on Android #784

[marqroldan]

Okay, activateAfterLongPress might not be the correct approach
Because of this it sets the gesture to an active state, when, without it, the gestures just start with Begin state (and its future is unknown)

[marqroldan]

Happy to say this kinda works, (there are still times where parent is selected instead of child)

import {createContext, useContext} from 'react';
import {View, ScrollView} from 'react-native';
import {Gesture, GestureDetector} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedRef,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const COLORS = ['red', 'green', 'blue', 'purple', 'orange', 'cyan'];
const HigherGesture = createContext();

function PanningBox({children, title}) {
  const animatedRef = useAnimatedRef();
  const translateY = useSharedValue(0);
  const isActive = useSharedValue(false);
  const isValid = useSharedValue(false);

  const _higherGesture = useContext(HigherGesture);

  const pan = Gesture.Pan()
    .manualActivation(true)
    .onTouchesMove((event, state) => {
      if (!isValid.value) {
        state.fail();
        return;
      }
      console.log('onTouchesMove', title);
      state.activate();
    })
    .onTouchesUp((event, state) => {
      console.log('onTouchesMove', title);
      state.end();
    })
    .onBegin(() => {
      console.log('onBeing', title);
    })
    .onStart((e) => {
      console.log('onStart', title);
      isActive.value = true;
      translateY.value = 0;
      //console.log('im starting.."');
    })
    .onUpdate((e) => {
      console.log('onUpdate', title);
      translateY.value = e.translationY;
    })
    .onEnd(() => {
      console.log('onEnd', title);
      isActive.value = false;
      translateY.value = 0;
      isValid.value = false;
    })
    .onFinalize(() => {
      console.log('onFinalize', title);
      isValid.value = false;
    });

  const longPressGesture = Gesture.LongPress()
    .maxDistance(100)
    .onStart(() => {
      console.log('Long press started', title);
      isValid.value = true;
    })
    .onEnd(() => {
      console.log('Long press ended', title);
    });

  if (_higherGesture != null) {
    longPressGesture.blocksExternalGesture(_higherGesture);
    pan.blocksExternalGesture(_higherGesture);
  }

  const animatedStyle = useAnimatedStyle(() => {
    return {
      zIndex: isActive.value ? 100 : 1,
      backgroundColor:
        isValid.value || isActive.value ? 'red' : 'rgba(0,0,0,0.25)',
      transform: [{translateY: translateY.value}],
    };
  }, []);

  const _gesture = Gesture.Simultaneous(pan, longPressGesture);

  return (
    <GestureDetector gesture={_gesture}>
      <HigherGesture value={_gesture}>
        <Animated.View
          ref={animatedRef}
          style={[
            animatedStyle,
            {
              width: '100%',
              minHeight: 100,
              padding: 30,
              borderWidth: 1,
            },
          ]}>
          {children}
        </Animated.View>
      </HigherGesture>
    </GestureDetector>
  );
}

export default function App() {
  return (
    <ScrollView style={{flex: 1}}>
      <ScrollableContent />
    </ScrollView>
  );
}

function ScrollableContent() {
  return (
    <View>
      {COLORS.map((color) => (
        <PanningBox key={color} color={color} title={`parent_${color}`}>
          <PanningBox key={color} color={color} title={`nested_${color}`} />
        </PanningBox>
      ))}
    </View>
  );
}

[marqroldan]

I still don't know what's causing the nested log to emit later than the parent

[marqroldan]

ok maybe the logging is irrelevant

-> I should just be blocking the longPressGesture instead of the Simultaneous gesture