@hanzogui/sheet 7.3.0 → 8.0.0

package/next.md

@@ -0,0 +1,78 @@
+# Sheet ScrollView Gesture Handoff - Next Steps
+
+## Current Limitation
+
+The Sheet + ScrollView gesture coordination on native iOS has limitations because Gui uses React Native's built-in `PanResponder`, while iOS's `UIScrollView` gesture recognizers fire BEFORE the RN responder system can claim the gesture.
+
+This causes:
+
+- Minor scroll "flicker" when starting to drag down from scroll top
+- Imperfect handoff between scroll and sheet drag gestures
+
+## Ideal Solution: react-native-gesture-handler Integration
+
+Both `gorhom/bottom-sheet` and `react-native-actions-sheet` solve this by using `react-native-gesture-handler` which provides:
+
+1. **`simultaneousHandlers`** - allows coordinating multiple gesture recognizers
+2. **`GestureDetector`** with worklets - can check conditions and decide who handles gesture before it starts
+3. **Native gesture coordination** - works at the iOS/Android gesture recognizer level, not the JS responder level
+
+## Proposed API
+
+```tsx
+import { setupGestureHandler } from '@hanzogui/sheet'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+
+// Call once at app startup (optional - falls back to PanResponder)
+setupGestureHandler({
+  // Pass the gesture handler module so we don't add it as a hard dependency
+  GestureDetector: require('react-native-gesture-handler').GestureDetector,
+  Gesture: require('react-native-gesture-handler').Gesture,
+})
+
+// Then wrap app
+export default function App() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <YourApp />
+    </GestureHandlerRootView>
+  )
+}
+```
+
+## Implementation Notes
+
+If `setupGestureHandler()` is called:
+
+- Use `GestureDetector` with `Gesture.Pan()` instead of `PanResponder`
+- Use `simultaneousHandlers` to coordinate with ScrollView's gesture
+- Implement `blockPan` flag pattern from actions-sheet for smooth handoff
+
+If not called:
+
+- Fall back to current `PanResponder` implementation
+- Accept the minor limitations on native
+
+## References
+
+- gorhom/bottom-sheet: Uses Reanimated worklets + gesture handler
+- react-native-actions-sheet: Uses `blockPan` flag pattern with gesture handler
+- Both are MIT licensed and can be used as reference
+
+## Files to Modify
+
+- `SheetImplementationCustom.tsx` - Replace PanResponder with GestureDetector
+- `SheetScrollView.tsx` - Use `useScrollHandlers()` pattern from actions-sheet
+- Add `setupGestureHandler.ts` for optional gesture handler registration
+
+## Test Case
+
+There's a test case at `apps/kitchen-sink/src/usecases/SheetScrollableDrag.tsx` that demonstrates the bug and can be used to verify fixes. It's not exported in the main navigation but can be accessed directly for testing.
+
+## Attempted Fixes
+
+1. **Native scroll enable/disable based on pane position** - Tried disabling scroll when sheet is not at top position, but this completely broke scrolling because the initial pane position values aren't set correctly on mount.
+
+2. **PaneY change listeners** - Added `onPaneYChange`/`setPaneY` to ScrollBridge to notify ScrollView of position changes during drag, but the fundamental issue remains that iOS UIScrollView gesture recognizers fire before RN's responder system.
+
+The core issue is architectural: React Native's PanResponder cannot coordinate with iOS's native UIScrollView gesture recognizers at the right level. The only real solution is `react-native-gesture-handler` integration.

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@hanzogui/sheet",
-  "version": "7.3.0",
-  "license": "BSD-3-Clause",
+  "version": "8.0.0",
+  "license": "MIT",
   "source": "src/index.ts",
   "type": "module",
-  "sideEffects": [
-    "*.css"
-  ],
+  "sideEffects": false,
   "main": "dist/cjs",
   "module": "dist/esm",
   "types": "./types/index.d.ts",
@@ -35,7 +33,7 @@
       "module": "./dist/esm/controller.mjs",
       "import": "./dist/esm/controller.mjs",
       "require": "./dist/cjs/controller.cjs",
-      "default": "./dist/cjs/controller.native.js"
+      "default": "./dist/esm/controller.mjs"
     },
     "./setup-gesture-handler": {
       "types": "./types/setupGestureHandler.d.ts",
@@ -51,56 +49,40 @@
     "access": "public"
   },
   "scripts": {
-    "build": "gui-build",
-    "watch": "gui-build --watch",
-    "clean": "gui-build clean"
+    "build": "hanzogui-build",
+    "watch": "hanzogui-build --watch",
+    "clean": "hanzogui-build clean"
   },
   "dependencies": {
-    "@hanzogui/adapt": "7.3.0",
-    "@hanzogui/animate-presence": "7.3.0",
-    "@hanzogui/animations-react-native": "7.3.0",
-    "@hanzogui/compose-refs": "7.3.0",
-    "@hanzogui/constants": "7.3.0",
-    "@hanzogui/core": "7.3.0",
-    "@hanzogui/create-context": "7.3.0",
-    "@hanzogui/helpers": "7.3.0",
-    "@hanzogui/native": "7.3.0",
-    "@hanzogui/portal": "7.3.0",
-    "@hanzogui/remove-scroll": "7.3.0",
-    "@hanzogui/scroll-view": "7.3.0",
-    "@hanzogui/stacks": "7.3.0",
-    "@hanzogui/use-constant": "7.3.0",
-    "@hanzogui/use-controllable-state": "7.3.0",
-    "@hanzogui/use-did-finish-ssr": "7.3.0",
-    "@hanzogui/use-keyboard-visible": "7.3.0",
-    "@hanzogui/z-index-stack": "7.3.0"
+    "@hanzogui/adapt": "8.0.0",
+    "@hanzogui/animate-presence": "8.0.0",
+    "@hanzogui/animations-react-native": "8.0.0",
+    "@hanzogui/compose-refs": "8.0.0",
+    "@hanzogui/constants": "8.0.0",
+    "@hanzogui/core": "8.0.0",
+    "@hanzogui/create-context": "8.0.0",
+    "@hanzogui/helpers": "8.0.0",
+    "@hanzogui/native": "8.0.0",
+    "@hanzogui/portal": "8.0.0",
+    "@hanzogui/remove-scroll": "8.0.0",
+    "@hanzogui/scroll-view": "8.0.0",
+    "@hanzogui/stacks": "8.0.0",
+    "@hanzogui/use-constant": "8.0.0",
+    "@hanzogui/use-controllable-state": "8.0.0",
+    "@hanzogui/use-did-finish-ssr": "8.0.0",
+    "@hanzogui/use-keyboard-visible": "8.0.0",
+    "@hanzogui/z-index-stack": "8.0.0"
   },
   "devDependencies": {
-    "@hanzogui/build": "7.3.0",
+    "@hanzogui/build": "8.0.0",
     "react": ">=19",
     "react-native": "0.83.2",
-    "react-native-gesture-handler": "~2.30.0"
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-safe-area-context": "~5.7.0"
   },
   "peerDependencies": {
-    "react": ">=19",
-    "react-native": "*",
-    "react-native-gesture-handler": ">=2.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react-native-gesture-handler": {
-      "optional": true
-    }
+    "react": ">=19"
   },
   "module:jsx": "dist/jsx",
-  "removeSideEffects": true,
-  "files": [
-    "dist",
-    "src",
-    "types",
-    "*.cjs",
-    "*.mjs",
-    "*.css",
-    "README.md"
-  ],
-  "author": "Hanzo AI <dev@hanzo.ai>"
+  "removeSideEffects": true
 }

package/setup-gesture-handler/index.cjs

@@ -0,0 +1,2 @@
+// compat with hanzogui static compiler
+Object.assign(module.exports, require('../dist/cjs/setupGestureHandler.cjs'))

package/setup-gesture-handler/index.js

@@ -0,0 +1,2 @@
+// compat with metro without package exports
+Object.assign(module.exports, require('../dist/cjs/setupGestureHandler.cjs'))

package/setup-gesture-handler/index.native.cjs

@@ -0,0 +1,2 @@
+// compat with hanzogui static compiler
+Object.assign(module.exports, require('../dist/cjs/setupGestureHandler.cjs'))

package/setup-gesture-handler/index.native.js

@@ -0,0 +1,2 @@
+// compat with metro without package exports
+Object.assign(module.exports, require('../dist/cjs/setupGestureHandler.cjs'))

package/src/GestureDetectorWrapper.tsx

@@ -20,13 +20,10 @@ export function GestureDetectorWrapper({
   const { GestureDetector } = getGestureHandlerState()
   const enabled = isGestureHandlerEnabled()
 
-  // console.warn('[RNGH-Wrapper] enabled:', enabled, 'hasDetector:', !!GestureDetector, 'hasGesture:', !!gesture)
-
   // only wrap if we have RNGH available AND a gesture to attach
   if (enabled && GestureDetector && gesture) {
     // GestureDetector needs a native View to attach handlers to
     // the View wrapper ensures proper gesture propagation
-    // console.warn('[RNGH-Wrapper] WRAPPING')
     return (
       <GestureDetector gesture={gesture}>
         <View style={style} collapsable={false}>