software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
6.12k stars 979 forks source link

[Expo] ```simultaneousHandlers``` is broken -> PanGestureHandler inside a Scrollview is blocking a scroll #2170

Closed homosape closed 2 years ago

homosape commented 2 years ago

Description

When PanGestureHandler is used inside a ScrollView it usually blocked the scroll unsell you provided simultaneousHandlers property which was pointing to the ref of the ScrollView itself.

Now this functionality seems to be broken. This is a snippet from a repository.

export default function App() {
  const scrollView = useRef();

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ScrollView ref={scrollView} contentContainerStyle={styles.content}>
        {rooms.map((i) => {
          return (
            <Room
              key={i.id}
              title={i.title}
              simultaneousHandlers={scrollView}
            />
          );
        })}
      </ScrollView>
    </GestureHandlerRootView>
  );
}

const Room = ({ title, simultaneousHandlers }) => {
  const positionX = useSharedValue(0);

  const roomRStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: positionX.value }],
    };
  });

  const onPan = useAnimatedGestureHandler({
    onActive(e) {
      positionX.value = e.translationX;
    },
    onEnd() {
      positionX.value = withTiming(0);
    },
  });

  return (
    <PanGestureHandler
      simultaneousHandlers={simultaneousHandlers}
      onGestureEvent={onPan}
    >
      <Animated.View style={[styles.room, roomRStyle]}>
        <Text style={styles.title}>{title}</Text>
      </Animated.View>
    </PanGestureHandler>
  );
};

Steps to reproduce

  1. npx create-expo-app app-name
  2. expo install react-native-reanimated, react-native-gesture-handler
  3. Import ScrollView from react-native-gesture-handler and put a dummy list

Snack or a link to a repository

https://github.com/homosape/rn-test

Gesture Handler version

2.5.0

React Native version

0.69.4

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

No response

Architecture

No response

Build type

No response

Device

iOS simulator

Device model

iPhone 13 Pro

Acknowledgements

Yes

j-piasecki commented 2 years ago

Hi! This seems to be duplicate of https://github.com/software-mansion/react-native-gesture-handler/issues/2169, so I'll close this one to keep the discussion in one place.

ucheNkadiCode commented 2 years ago

I do not believe this issue is fixed, the closest I can get to a working solution is setting

the ActiveOffsetX property of my inner PanGesture handler to [-7, 7] but this doesn't work perfectly