Works on iOS and Android - but I can't make it work in a web browser

[joshon]

I have a game app I made for iOS and Android, and I want to put it on the web.

What is working
I use npx expo start --web --dev-client to start it in a browser and that works. The app runs in the browser- and I can read the console logs. All the basic interactions on pressable buttons etc work, the navigation between screens works and basic animations using react-native-reanimated work.

What is not working
The gesture handling (Pan and Tap) from react-native-gesture-handler is completely unresponsive.

Following the advice on react-native-reanimated web-support I Installed u/babel/plugin-proposal-export-namespace-from and added '@babel/plugin-proposal-export-namespace-from', to the plugins in the config file - above 'react-native-reanimated/plugin'

I read that the gestures use MouseButton.LEFT by default - so I did not add any explicit mouse button support.

App.js has the GestureHandlerRootView

<GestureHandlerRootView style={{ flex: 1 }}>
  <AllClear />
  <StatusBar style="auto" />
</GestureHandlerRootView>

Tap Gesture

    /**
     * Tap gesture
     * u/type {TapGesture}
     * Handles the tapping of a tile
     */
    const tap = useMemo(() => {
        return Gesture.Tap()
            .runOnJS(true)
            .onEnd((e, success) => {
                if(!useGridStore.getState().isDraggable) {
                    return;
                }
                if(!success) {
                    return;
                }
                console.log("Tap onEnd: ", id, "success: ", success);
                onTileTapped(id);
            });
    }, [cellSize]);

Pan Gesture

    /**
     * Pan gesture
     * u/type {PanGesture}
     * Handles the dragging of the tile
     */
    const pan = useMemo(() => {
        return Gesture.Pan()
            .runOnJS(true)
            .onStart((event, success) => {
                console.log("Pan onStart: ", event, id, success, letter.value);
                // ... my handling code
            })
            .onChange((event, success) => {
                //console.log("onChange: ", event, success);
                // my handling code
            })
            .onFinalize((event, success) => {
                // my handling code
            })
    }, [cellSize]);

Gesture Composition and Rendering

    const composed = Gesture.Exclusive(pan, tap);
    return (<GestureDetector gesture={composed}>
            {inited ? <Animated.View
                key={"tile" + id}
                style={AnimationStyle}
            >
                {/*{console.log("Tile rerender: ", tileSV.value.letter, " id:", id, "x: ", x.value, "y: ", y.value)}*/}
                <Animated.Text style={[AnimationTextStyle, styles.tileText]}  maxFontSizeMultiplier={1}>
                    {gridStore.getState().gameOver? "" : tileSV.value.letter}
                </Animated.Text>
            </Animated.View> : <View></View>}
        </GestureDetector>
    );

Here are some of my environment files - I suspect the problem may be in one of these:

package.json

{
  "name": "allclear",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "start:dev": "react-scripts start --env=development",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@expo/metro-runtime": "~3.1.3",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-spring/native": "^9.7.3",
    "@types/react": "~18.2.14",
    "expo": "^50.0.13",
    "expo-dev-client": "~3.3.12",
    "expo-font": "~11.10.3",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "immer": "^10.0.3",
    "moment-timezone": "^0.5.43",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.5",
    "react-native-gesture-handler": "2.14.0",
    "react-native-reanimated": "3.6.2",
    "react-native-svg": "14.1.0",
    "react-native-web": "~0.19.6",
    "typescript": "^5.1.3",
    "zustand": "^4.4.7"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

eas.js

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "preview4": {
      "distribution": "internal"
    },
    "production": {
      "autoIncrement": true
    }
  },
  cli: {
    promptToConfigurePushNotifications: false
  }

app.json

{
  "expo": {
    "name": "App Name",
    "slug": "AName",
    "version": "1.0.5",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "jsEngine": "hermes",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "info.domain.name",
      "buildNumber": "8"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "icon": "./assets/icon.png",
      "backgroundColor": "#ffffff",
      "package": "info.domain.name",
      "versionCode": 7
    },
    "web": {
      "favicon": "./assets/favicon.png",
      "bundler": "metro"
    },
    "plugins": [
      "expo-font"
    ],
    "extra": {
      "eas": {
        "projectId": "####"
      }
    }
  }
}

It works on Android and iOS - but the tiles are just completely unresponsive to my mouse clicks and drags on the web.

I am guessing (hoping) that this is really something about the configuration of my environment - given that it works elsewhere - but I am at a loss about what to change. I am pretty ignorant about all the decisions that I need to make - I am using expo, and I think metro? But I don't have a metro config file - is that likely the issue? I don't quite know what metro is TBH.

Thanks for any guidance!

[joshon]

Putting the gesture handler inside the conditional in the render of the tile enabled it to work on web. Not sure why (or how I came to try that :) )

return (<>
            {inited ? <GestureDetector gesture={composed}><Animated.View
                key={"tile" + id}
                style={AnimationStyle}
            >
                {/*{console.log("Tile rerender: ", tileSV.value.letter, " id:", id, "x: ", x.value, "y: ", y.value)}*/}
                <Animated.Text style={[AnimationTextStyle, styles.tileText]}  maxFontSizeMultiplier={1}>
                    {gridStore.getState().gameOver? "" : tileSV.value.letter}
                </Animated.Text>
            </Animated.View></GestureDetector> : <View></View>}
    </>