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
5.85k stars 954 forks source link

Fix `manualActivation` on web #2869

Closed m-bert closed 3 weeks ago

m-bert commented 3 weeks ago

Description

This PR adds support for manualActivation on web. Right now logic responsible for manual activation with state manager is not implemented on web - state manager is able to interact with handlers, but activate method doesn't check for manualActivation property.

Fixes #2868.

Test plan

Tested on example from #2868

Test code ```jsx import React from 'react'; import { StyleSheet, 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 left = useSharedValue(0); const savedLeft = useSharedValue(0); const panGesture = Gesture.Pan() .manualActivation(true) .onTouchesDown((e, stateManager) => { if (savedLeft.value >= 100) { stateManager.fail(); } else { stateManager.activate(); } }) .onUpdate(({ translationX }) => { left.value = savedLeft.value + translationX; }) .onEnd(() => { savedLeft.value = left.value; }); const animatedStyle = useAnimatedStyle(() => { return { transform: [{ translateX: left.value }], }; }); return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white', }, square: { height: 100, width: 100, backgroundColor: 'red', }, }); ```