Partially fix trending/drawer gesture conflict

[gaearon]

Not sure this is a full solution because it still triggers for me sometimes. But this seems to improve the situation on iOS. I'm not sure it has any effect on Android.

Review without whitespace

Before

before.mov

After

after.mov

Test Plan

See videos above. On Android this fix doesn't seem to make it better or worse but on iOS, anecdotally, it does seem to help quite a bit. At least on the simulator.

I've also prepared a minimal repro case:

import {ScrollView, Text, View} from 'react-native'
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler'
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated'

export default function App() {
  const val = useSharedValue(0)

  const native = Gesture.Native()
  const pan = Gesture.Pan()
    .requireExternalGestureToFail(native)
    .onBegin(() => {
      'worklet'
      console.log('begin')
      val.set(0)
    })
    .onUpdate(e => {
      'worklet'
      console.log('update')
      val.set(e.translationX)
    })
    .onEnd(() => {
      'worklet'
      console.log('end')
      val.set(0)
    })
    .onFinalize(() => {
      'worklet'
      console.log('finalize')
      val.set(0)
    })
    .failOffsetX(-1)
    .activeOffsetX(5)

  const style = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: val.value,
        },
      ],
    }
  })
  return (
    <GestureHandlerRootView>
      <GestureDetector gesture={pan}>
        <View style={{flex: 1, backgroundColor: 'blue'}}>
          <Animated.View style={style}>
            <InnerScrollView native={native} />
          </Animated.View>
        </View>
      </GestureDetector>
    </GestureHandlerRootView>
  )
}

function InnerScrollView({native}) {
  return (
    <View
      style={{
        paddingTop: 200,
        alignItems: 'center',
      }}>
      <GestureDetector gesture={native}>
        <ScrollView
          horizontal
          pagingEnabled
          style={{
            width: 300,
            backgroundColor: 'yellow',
            height: 200,
          }}>
          <Text
            style={{
              width: 1000,
            }}>
            1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
            27 28 29 30 31 32 33 34 35 36 37 38 39 40
          </Text>
        </ScrollView>
      </GestureDetector>
    </View>
  )
}

You can see that requireExternalGestureToFail really does make a difference here (both on iOS and on Android):

min.mov

This gives me confidence that even if this isn't the entire fix, it's at least a step in the right direction.

This should have no effect on web.

[github-actions]

Old size	New size	Diff
6.86 MB	6.86 MB	143 B (0.00%)

---

[gaearon]

Changed this to RN one but wrapped in GestureDetector. I don't think anything got worse but worth a double check.

[gaearon]

It's annoying we have to hoist it way up here. I think we could've used blocksExternalGesture instead of requireExternalGestureToFail (and thus reverse the relationship) but blocksExternalGesture seems broken, alas: software-mansion/react-native-gesture-handler#3321