GestureDetector on web causes warning "Received false for a non-boolean attribute collapsable"

[nzapponi]

Description

I'm attempting to use RNGH in a RN web project. When I mount a <GestureDetector ...> to the DOM, I get the following warning:

Warning: Received `false` for a non-boolean attribute `collapsable`.

If you want to write it to the DOM, pass a string instead: collapsable="false" or collapsable={value.toString()}.

If you used to conditionally omit it with collapsable={condition && value}, pass collapsable={condition ? value : undefined} instead.
    at div
    at Wrap (http://127.0.0.1:28000/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:243942:3)
    at GestureDetector (http://127.0.0.1:28000/node_modules/expo-router/entry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:243804:51)

This doesn't break functionality however.

Steps to reproduce

1. Run RN web project with RNGH

Snack or a link to a repository

N/A

Gesture Handler version

2.16.0

React Native version

0.74.0

Platforms

Web

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

None

Build type

Debug mode

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[latekvo]

Hi @nzapponi.

As far as I see, regular usage of GestureDetector on rngh 2.16.0 does not trigger this warning.

Could please try using the latest version of rngh? If that won't help, please provide a minimal reproduction of this issue, it's difficult to say what might be wrong without seeing a snippet of your code first.

[nzapponi]

Weird, I just tested the latest version of rngh and still got the same...

Here's how I'm using it:

import { router, Stack } from "expo-router";
mport { useCallback, useMemo, useState } from "react";
import { Platform, Pressable, StatusBar } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { runOnJS } from "react-native-reanimated";
import { YStack } from "tamagui";

export default function AssetView({ id }: { id: string }) {
  const [showHeader, setShowHeader] = useState(true);

  const toggleHeader = useCallback(() => {
    setShowHeader(!showHeader);
  }, [showHeader]);

  const tap = useMemo(() => {
    return Gesture.Tap()
      .maxDuration(250)
      .onStart(() => {
        runOnJS(toggleHeader)();
      });
  }, [toggleHeader]);

  const content = .....

  return (
    <>
      <Stack.Screen
        options={{
          title,
          headerShown: showHeader,
          headerBackTitleVisible: false,
          headerTransparent: Platform.OS !== "web",
          headerBlurEffect: "regular",
        }}
      />
      <StatusBar hidden={!showHeader} />
      <GestureDetector gesture={tap}>
        <YStack
          flex={1}
          backgroundColor={!showHeader ? "$black1" : undefined}
          justifyContent="center"
        >
          {content}
        </YStack>
      </GestureDetector>
    </>
  );
}

Note that I'm using tamagui for styling, not sure if it's interfering somehow... Thanks

[m-bert]

Hi @nzapponi! I've just created this PR - it will remove this unnecessary property 😄

[nzapponi]

Amazing, thank you!!