Skip to content

Commit

Permalink
Fix remote debugger detection in bridgeless mode (#2864)
Browse files Browse the repository at this point in the history
## 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 |
| --- | --- |
| <video
src="https://github.com/software-mansion/react-native-gesture-handler/assets/36106620/5eaba7e5-f09a-4075-837c-778f0d9a9d23"
/> | <video
src="https://github.com/software-mansion/react-native-gesture-handler/assets/36106620/27bca0ef-d15c-4292-b877-c8d157e5bd20"
/> |

## Test plan

<details>
<summary>code</summary>

```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<PanGestureChangeEventPayload>) => {
      '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 (
    <GestureDetector gesture={gesture}>
      <Animated.View style={[styles.ball, animatedStyles]} />
    </GestureDetector>
  );
}

export default function GestureHandlerExample() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <Ball />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  ball: {
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: 'blue',
    alignSelf: 'center',
  },
});

```

</details>
  • Loading branch information
piaskowyk authored Apr 15, 2024
1 parent 0fccc42 commit 2770cc9
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,9 @@ export function isFabric(): boolean {
export function isRemoteDebuggingEnabled(): boolean {
// react-native-reanimated checks if in remote debugging in the same way
// @ts-ignore global is available but node types are not included
return !(global as any).nativeCallSyncHook || (global as any).__REMOTEDEV__;
const localGlobal = global as any;
return (
(!localGlobal.nativeCallSyncHook || !!localGlobal.__REMOTEDEV__) &&
!localGlobal.RN$Bridgeless
);
}

0 comments on commit 2770cc9

Please sign in to comment.