Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Android] Fix
Hover
blocking scrolling with mouse wheel (#3067)
## 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