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 remote debugger detection in bridgeless mode #2864

Closed piaskowyk closed 4 weeks ago

piaskowyk commented 4 weeks ago

Description

This pull request fixes the issue with checking if the remote debugger is enabled for applications in bridgeless mode. Without this additional check, it incorrectly indicates that the remote debugger is enabled even on native devices. As a result, the gesture handler doesn't register event handlers in Reanimated, causing all callback events to be executed on the JS thread instead of the UI thread.

Same code we have had in Reanimated already: https://github.com/software-mansion/react-native-reanimated/blob/3.9.0-rc.0/src/reanimated2/PlatformChecker.ts#L17

before after

Test plan

code ```js import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated'; import { Gesture, GestureDetector, GestureHandlerRootView, GestureStateManager, GestureTouchEvent, GestureUpdateEvent, PanGestureChangeEventPayload, } from 'react-native-gesture-handler'; import React from 'react'; import { StyleSheet } from 'react-native'; function Ball() { const isPressed = useSharedValue(false); const offset = useSharedValue({ x: 0, y: 0 }); const animatedStyles = useAnimatedStyle(() => { return { transform: [ { translateX: offset.value.x }, { translateY: offset.value.y }, { scale: withSpring(isPressed.value ? 1.2 : 1) }, ], backgroundColor: isPressed.value ? 'blue' : 'navy', }; }); const gesture = Gesture.Pan() .onBegin(() => { 'worklet'; console.log('onBegin', _WORKLET, Date.now()); isPressed.value = true; }) .onChange((e: GestureUpdateEvent) => { 'worklet'; console.log('onBegin', _WORKLET, Date.now()); offset.value = { x: e.changeX + offset.value.x, y: e.changeY + offset.value.y, }; }) .onFinalize(() => { 'worklet'; console.log('onBegin', _WORKLET, Date.now()); isPressed.value = false; }); return ( ); } export default function GestureHandlerExample() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, ball: { width: 100, height: 100, borderRadius: 100, backgroundColor: 'blue', alignSelf: 'center', }, }); ```