refactor(native): use Pressable for react-native-web

packages/fiber/src/native/Canvas.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as THREE from 'three'
-import { View, ViewProps, ViewStyle, LayoutChangeEvent, StyleSheet, PixelRatio } from 'react-native'
+import { View, ViewProps, Pressable, ViewStyle, LayoutChangeEvent, StyleSheet, PixelRatio } from 'react-native'
 import { ExpoWebGLRenderingContext, GLView } from 'expo-gl'
 import { useContextBridge, FiberProvider } from 'its-fine'
 import { SetBlock, Block, ErrorBoundary, useMutableCallback } from '../core/utils'
@@ -115,8 +115,7 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<View, Props>(
         // Overwrite onCreated to apply RN bindings
         onCreated: (state: RootState) => {
           // Bind events after creation
-          const handlers = state.events.connect?.(viewRef.current)
-          setBind(handlers)
+          setBind(state.events.handlers)
 
           // Bind render to RN bridge
           const context = state.gl.getContext() as ExpoWebGLRenderingContext
@@ -145,9 +144,9 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<View, Props>(
     }, [canvas])
 
     return (
-      <View {...props} ref={viewRef} onLayout={onLayout} style={{ flex: 1, ...style }} {...bind}>
+      <Pressable {...props} ref={viewRef} onLayout={onLayout} style={{ flex: 1, ...style }} {...bind}>
         {width > 0 && <GLView onContextCreate={onContextCreate} style={StyleSheet.absoluteFill} />}
-      </View>
+      </Pressable>
     )
   },
 )

packages/fiber/src/native/events.ts

@@ -1,11 +1,7 @@
 import { UseBoundStore } from 'zustand'
 import { RootState } from '../core/store'
 import { createEvents, DomEvent, EventManager, Events } from '../core/events'
-import { GestureResponderEvent } from 'react-native'
-/* eslint-disable import/default, import/no-named-as-default, import/no-named-as-default-member */
-// @ts-ignore
-import Pressability from 'react-native/Libraries/Pressability/Pressability'
-/* eslint-enable import/default, import/no-named-as-default, import/no-named-as-default-member */
+import type { GestureResponderEvent } from 'react-native'
 
 const EVENTS = {
   PRESS: 'onPress',
@@ -71,19 +67,12 @@ export function createTouchEvents(store: UseBoundStore<RootState>): EventManager
       const { set, events } = store.getState()
       events.disconnect?.()
 
-      const connected = new Pressability(events.handlers)
-      set((state) => ({ events: { ...state.events, connected } }))
-
-      const handlers = connected.getEventHandlers()
-      return handlers
+      set((state) => ({ events: { ...state.events, connected: true } }))
     },
     disconnect: () => {
-      const { set, events } = store.getState()
+      const { set } = store.getState()
 
-      if (events.connected) {
-        events.connected.reset()
-        set((state) => ({ events: { ...state.events, connected: undefined } }))
-      }
+      set((state) => ({ events: { ...state.events, connected: false } }))
     },
   }
 }