Skip to content

Commit

Permalink
[Android] Fix Hover blocking scrolling with mouse wheel (#3067)
Browse files Browse the repository at this point in the history
## Description

This PR fixes issue in which `Hover` gesture blocks mouse wheel scroll.
At first I thought that we should mark `Hover` as simultaneous with
`ScrollView` (or to be more precise, `NativeViewGestureHandler` that
wraps `ScrollView`), but it turned out that it was not the case. Instead
of working simultaneous with `ScrollView`, we have to set this relation
with `RootViewGestureHandler`.

Fixes #3064 

## Test plan

<details>
<summary>Tested on code from issue</summary>

```tsx
import {
  Text,
  SafeAreaView,
  StyleSheet,
  StatusBar,
  Pressable,
} from 'react-native';
import {
  GestureHandlerRootView,
  ScrollView,
  Gesture,
  GestureDetector,
} from 'react-native-gesture-handler';
import { useSharedValue } from 'react-native-reanimated';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaView style={styles.container}>
        <StatusBar />
        <ScrollView>
          <Text style={{ height: 50, backgroundColor: 'red' }}>item</Text>
          <Text style={{ height: 50, backgroundColor: 'red' }}>item</Text>
          <Text style={{ height: 50, backgroundColor: 'red' }}>item</Text>
          <Text style={{ height: 50, backgroundColor: 'red' }}>item</Text>
          <Text style={{ height: 50, backgroundColor: 'red' }}>item</Text>
          <Text style={{ height: 50, backgroundColor: 'red' }}>item</Text>
          <Text style={{ height: 50, backgroundColor: 'red' }}>item</Text>
          <Text style={{ height: 50, backgroundColor: 'red' }}>item</Text>
          <Text style={{ height: 50, backgroundColor: 'red' }}>item</Text>
          <Text style={{ height: 50, backgroundColor: 'red' }}>item</Text>

          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
          <Button title="Button1" />
        </ScrollView>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

const Button = (props) => {
  const hovered = useSharedValue(false);
  const hover = Gesture.Hover()
    .onStart((e) => {
      console.log('hover start');
    })
    .onEnd((e) => {
      hovered.value = false;
      console.log('hover end');
    });

  return (
    <GestureDetector gesture={hover}>
      <Pressable {...props}>
        <Text>{props.title}</Text>
      </Pressable>
    </GestureDetector>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

```

</details>
  • Loading branch information
m-bert authored Aug 26, 2024
1 parent 52c00e4 commit 5b28dcb
Showing 1 changed file with 5 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import android.os.Looper
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
import com.swmansion.gesturehandler.react.RNGestureHandlerRootHelper
import com.swmansion.gesturehandler.react.RNViewConfigurationHelper

class HoverGestureHandler : GestureHandler<HoverGestureHandler>() {
Expand Down Expand Up @@ -70,6 +71,10 @@ class HoverGestureHandler : GestureHandler<HoverGestureHandler>() {
return true
}

if (handler is RNGestureHandlerRootHelper.RootViewGestureHandler) {
return true
}

return super.shouldRecognizeSimultaneously(handler)
}

Expand Down

0 comments on commit 5b28dcb

Please sign in to comment.