Commit b696961
authored
fix: overlapping buttons cause buttons to stop being responsive (#3371)
## Description
Partially resolves problem in #3370
This PR fixes an issue where a behind button could stay stuck in the
"pressed" state if another overlapping button took the responder. By
adding a check in onTouchEvent, we ensure that only one button can stay
pressed at a time. If another button is already the responder, the
behind button cancels itself and won't remain highlighted.
It will not solve the issue if both button are not exclusive. For this
edge case better solution is needed.
## With this fix:
https://github.com/user-attachments/assets/b88ff1d1-cf1c-4a62-9967-7dd25e2f3dc0
## Without this fix:
https://github.com/user-attachments/assets/b69771d2-655c-4fa6-b5b2-9edd37d32e9c
## Test plan
https://snack.expo.dev/@oblador/gesture-handler-overlap-reproduction
<details>
<summary>Collapsed test code</summary>
```tsx
import { Text, View, StyleSheet, ScrollView } from 'react-native';
import {
BaseButton,
GestureHandlerRootView,
} from 'react-native-gesture-handler';
export default function App() {
return (
<GestureHandlerRootView>
<View style={styles.container}>
<BaseButton
style={styles.button}
shouldCancelWhenOutside={true}
onHandlerStateChange={(event) => console.log(event.nativeEvent)}>
<Text>Behind</Text>
</BaseButton>
<BaseButton
style={[styles.button, styles.onTop]}
shouldCancelWhenOutside={true}
onHandlerStateChange={(event) => console.log(event.nativeEvent)}>
<Text>On top</Text>
</BaseButton>
</View>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ecf0f1',
justifyContent: 'center',
},
button: {
padding: 30,
borderWidth: 1,
backgroundColor: '#ffffff99',
},
onTop: {
position: 'relative',
top: -40,
left: 100,
right: 20,
},
});
```
</details>1 parent 3ce634d commit b696961
File tree
1 file changed
+9
-0
lines changed- android/src/main/java/com/swmansion/gesturehandler/react
1 file changed
+9
-0
lines changedLines changed: 9 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
296 | 296 | | |
297 | 297 | | |
298 | 298 | | |
| 299 | + | |
| 300 | + | |
| 301 | + | |
| 302 | + | |
| 303 | + | |
| 304 | + | |
| 305 | + | |
| 306 | + | |
| 307 | + | |
299 | 308 | | |
300 | 309 | | |
301 | 310 | | |
| |||
0 commit comments