@tamagui/sheet 1.27.1 → 1.27.2

package/dist/jsx/useSheetController.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useSheetController.tsx"],
-  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAEnC,MAAM,qBAAqB,MAAM;AACtC,QAAM,aAAa,WAAW,sBAAsB;AACpD,QAAM,WAAW,YAAY;AAC7B,QAAM,oBAAoB,YAAY,YAAY;AAClD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,yBAAyB;AAAA,EACpC;AACF;",
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAEnC,MAAM,qBAAqB,MAAM;AACtC,QAAM,aAAa,WAAW,sBAAsB;AACpD,QAAM,WAAW,YAAY;AAC7B,QAAM,oBAAoB,YAAY,YAAY;AAClD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,YAAY;AAAA,EAC3B;AACF;AAEO,MAAM,yBAAyB;AAAA,EACpC;AACF;",
   "names": []
 }

package/dist/jsx/useSheetProviderProps.js

@@ -1,7 +1,8 @@
+import { useAnimationDriver } from "@tamagui/core";
 import { useConstant } from "@tamagui/use-constant";
 import { useControllableState } from "@tamagui/use-controllable-state";
-import React, { useCallback, useMemo, useState } from "react";
-function useSheetProviderProps(props, state) {
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+function useSheetProviderProps(props, state, options = {}) {
   const contentRef = React.useRef(null);
   const [frameSize, setFrameSize] = useState(0);
   const snapPointsProp = props.snapPoints || [80];
@@ -18,6 +19,7 @@ function useSheetProviderProps(props, state) {
     transition: true
   });
   const position = state.open === false ? -1 : position_;
+  const { open } = state;
   const setPosition = useCallback(
     (next) => {
       if (props.dismissOnSnapToBottom && next === snapPoints.length - 1) {
@@ -28,6 +30,26 @@ function useSheetProviderProps(props, state) {
     },
     [props.dismissOnSnapToBottom, snapPoints.length, setPositionImmediate, state.setOpen]
   );
+  if (process.env.NODE_ENV === "development") {
+    if (snapPoints.some((p) => p < 0 || p > 100)) {
+      console.warn(
+        "\u26A0\uFE0F Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame"
+      );
+    }
+  }
+  if (open && props.dismissOnSnapToBottom && position === snapPoints.length - 1) {
+    setPositionImmediate(0);
+  }
+  const shouldSetPositionOpen = open && position < 0;
+  useEffect(() => {
+    if (shouldSetPositionOpen) {
+      setPosition(0);
+    }
+  }, [setPosition, shouldSetPositionOpen]);
+  const driver = useAnimationDriver();
+  if (!driver) {
+    throw new Error("Must set animations in tamagui.config.ts");
+  }
   const scrollBridge = useConstant(() => ({
     enabled: false,
     y: 0,
@@ -40,7 +62,10 @@ function useSheetProviderProps(props, state) {
     },
     scrollLock: false
   }));
-  return {
+  const removeScrollEnabled = props.forceRemoveScrollEnabled ?? (open && props.modal);
+  const providerProps = {
+    removeScrollEnabled,
+    scrollBridge,
     modal: !!props.modal,
     open: state.open,
     setOpen: state.setOpen,
@@ -50,13 +75,15 @@ function useSheetProviderProps(props, state) {
     setFrameSize,
     dismissOnOverlayPress: props.dismissOnOverlayPress ?? true,
     dismissOnSnapToBottom: props.dismissOnSnapToBottom ?? false,
+    onOverlayComponent: options.onOverlayComponent,
     scope: props.__scopeSheet,
     position,
     snapPoints,
     setPosition,
     setPositionImmediate,
-    scrollBridge
+    onlyShowFrame: false
   };
+  return providerProps;
 }
 export {
   useSheetProviderProps

package/dist/jsx/useSheetProviderProps.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useSheetProviderProps.tsx"],
-  "mappings": "AACA,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,OAAO,SAAS,aAAa,SAAS,gBAAgB;AAK/C,SAAS,sBAAsB,OAAmB,OAAuB;AAC9E,QAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,CAAC;AACpD,QAAM,iBAAiB,MAAM,cAAc,CAAC,EAAE;AAE9C,QAAM,aAAa;AAAA,IACjB,MAAO,MAAM,wBAAwB,CAAC,GAAG,gBAAgB,CAAC,IAAI;AAAA;AAAA,IAE9D,CAAC,KAAK,UAAU,cAAc,GAAG,MAAM,qBAAqB;AAAA,EAC9D;AAGA,QAAM,CAAC,WAAW,oBAAoB,IAAI,qBAAqB;AAAA,IAC7D,MAAM,MAAM;AAAA,IACZ,aAAa,MAAM,oBAAoB,MAAM,OAAO,IAAI;AAAA,IACxD,UAAU,MAAM;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,EACd,CAAC;AAED,QAAM,WAAW,MAAM,SAAS,QAAQ,KAAK;AAE7C,QAAM,cAAc;AAAA,IAClB,CAAC,SAAiB;AAEhB,UAAI,MAAM,yBAAyB,SAAS,WAAW,SAAS,GAAG;AACjE,cAAM,QAAQ,KAAK;AAAA,MACrB,OAAO;AACL,6BAAqB,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,MAAM,uBAAuB,WAAW,QAAQ,sBAAsB,MAAM,OAAO;AAAA,EACtF;AAEA,QAAM,eAAe,YAA0B,OAAO;AAAA,IACpD,SAAS;AAAA,IACT,GAAG;AAAA,IACH,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc;AAAA,IACd,MAAM,MAAM;AAAA,IAAC;AAAA,IACb,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,YAAY;AAAA,EACd,EAAE;AAEF,SAAO;AAAA,IACL,OAAO,CAAC,CAAC,MAAM;AAAA,IACf,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM;AAAA,IACf,QAAQ,CAAC,CAAC,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB,MAAM,yBAAyB;AAAA,IACtD,uBAAuB,MAAM,yBAAyB;AAAA,IACtD,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "mappings": "AAAA,SAAyB,0BAA0B;AACnD,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,OAAO,SAAS,aAAa,WAAW,SAAS,gBAAgB;AAO1D,SAAS,sBACd,OACA,OACA,UAEI,CAAC,GACL;AACA,QAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,CAAC;AACpD,QAAM,iBAAiB,MAAM,cAAc,CAAC,EAAE;AAE9C,QAAM,aAAa;AAAA,IACjB,MAAO,MAAM,wBAAwB,CAAC,GAAG,gBAAgB,CAAC,IAAI;AAAA;AAAA,IAE9D,CAAC,KAAK,UAAU,cAAc,GAAG,MAAM,qBAAqB;AAAA,EAC9D;AAGA,QAAM,CAAC,WAAW,oBAAoB,IAAI,qBAAqB;AAAA,IAC7D,MAAM,MAAM;AAAA,IACZ,aAAa,MAAM,oBAAoB,MAAM,OAAO,IAAI;AAAA,IACxD,UAAU,MAAM;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,EACd,CAAC;AAED,QAAM,WAAW,MAAM,SAAS,QAAQ,KAAK;AAE7C,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,cAAc;AAAA,IAClB,CAAC,SAAiB;AAEhB,UAAI,MAAM,yBAAyB,SAAS,WAAW,SAAS,GAAG;AACjE,cAAM,QAAQ,KAAK;AAAA,MACrB,OAAO;AACL,6BAAqB,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,MAAM,uBAAuB,WAAW,QAAQ,sBAAsB,MAAM,OAAO;AAAA,EACtF;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,WAAW,KAAK,CAAC,MAAM,IAAI,KAAK,IAAI,GAAG,GAAG;AAC5C,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,MAAI,QAAQ,MAAM,yBAAyB,aAAa,WAAW,SAAS,GAAG;AAC7E,yBAAqB,CAAC;AAAA,EACxB;AAGA,QAAM,wBAAwB,QAAQ,WAAW;AACjD,YAAU,MAAM;AACd,QAAI,uBAAuB;AACzB,kBAAY,CAAC;AAAA,IACf;AAAA,EACF,GAAG,CAAC,aAAa,qBAAqB,CAAC;AAEvC,QAAM,SAAS,mBAAmB;AAClC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,0CAA0C;AAAA,EAC5D;AAEA,QAAM,eAAe,YAA0B,OAAO;AAAA,IACpD,SAAS;AAAA,IACT,GAAG;AAAA,IACH,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc;AAAA,IACd,MAAM,MAAM;AAAA,IAAC;AAAA,IACb,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,YAAY;AAAA,EACd,EAAE;AAEF,QAAM,sBAAsB,MAAM,6BAA6B,QAAQ,MAAM;AAE7E,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,OAAO,CAAC,CAAC,MAAM;AAAA,IACf,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM;AAAA,IACf,QAAQ,CAAC,CAAC,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB,MAAM,yBAAyB;AAAA,IACtD,uBAAuB,MAAM,yBAAyB;AAAA,IACtD,oBAAoB,QAAQ;AAAA,IAC5B,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/jsx/useSheetProviderProps.mjs

@@ -1,7 +1,8 @@
+import { useAnimationDriver } from "@tamagui/core";
 import { useConstant } from "@tamagui/use-constant";
 import { useControllableState } from "@tamagui/use-controllable-state";
-import React, { useCallback, useMemo, useState } from "react";
-function useSheetProviderProps(props, state) {
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+function useSheetProviderProps(props, state, options = {}) {
   const contentRef = React.useRef(null);
   const [frameSize, setFrameSize] = useState(0);
   const snapPointsProp = props.snapPoints || [80];
@@ -18,6 +19,7 @@ function useSheetProviderProps(props, state) {
     transition: true
   });
   const position = state.open === false ? -1 : position_;
+  const { open } = state;
   const setPosition = useCallback(
     (next) => {
       if (props.dismissOnSnapToBottom && next === snapPoints.length - 1) {
@@ -28,6 +30,26 @@ function useSheetProviderProps(props, state) {
     },
     [props.dismissOnSnapToBottom, snapPoints.length, setPositionImmediate, state.setOpen]
   );
+  if (process.env.NODE_ENV === "development") {
+    if (snapPoints.some((p) => p < 0 || p > 100)) {
+      console.warn(
+        "\u26A0\uFE0F Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame"
+      );
+    }
+  }
+  if (open && props.dismissOnSnapToBottom && position === snapPoints.length - 1) {
+    setPositionImmediate(0);
+  }
+  const shouldSetPositionOpen = open && position < 0;
+  useEffect(() => {
+    if (shouldSetPositionOpen) {
+      setPosition(0);
+    }
+  }, [setPosition, shouldSetPositionOpen]);
+  const driver = useAnimationDriver();
+  if (!driver) {
+    throw new Error("Must set animations in tamagui.config.ts");
+  }
   const scrollBridge = useConstant(() => ({
     enabled: false,
     y: 0,
@@ -40,7 +62,10 @@ function useSheetProviderProps(props, state) {
     },
     scrollLock: false
   }));
-  return {
+  const removeScrollEnabled = props.forceRemoveScrollEnabled ?? (open && props.modal);
+  const providerProps = {
+    removeScrollEnabled,
+    scrollBridge,
     modal: !!props.modal,
     open: state.open,
     setOpen: state.setOpen,
@@ -50,13 +75,15 @@ function useSheetProviderProps(props, state) {
     setFrameSize,
     dismissOnOverlayPress: props.dismissOnOverlayPress ?? true,
     dismissOnSnapToBottom: props.dismissOnSnapToBottom ?? false,
+    onOverlayComponent: options.onOverlayComponent,
     scope: props.__scopeSheet,
     position,
     snapPoints,
     setPosition,
     setPositionImmediate,
-    scrollBridge
+    onlyShowFrame: false
   };
+  return providerProps;
 }
 export {
   useSheetProviderProps

package/dist/jsx/useSheetProviderProps.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useSheetProviderProps.tsx"],
-  "mappings": "AACA,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,OAAO,SAAS,aAAa,SAAS,gBAAgB;AAK/C,SAAS,sBAAsB,OAAmB,OAAuB;AAC9E,QAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,CAAC;AACpD,QAAM,iBAAiB,MAAM,cAAc,CAAC,EAAE;AAE9C,QAAM,aAAa;AAAA,IACjB,MAAO,MAAM,wBAAwB,CAAC,GAAG,gBAAgB,CAAC,IAAI;AAAA;AAAA,IAE9D,CAAC,KAAK,UAAU,cAAc,GAAG,MAAM,qBAAqB;AAAA,EAC9D;AAGA,QAAM,CAAC,WAAW,oBAAoB,IAAI,qBAAqB;AAAA,IAC7D,MAAM,MAAM;AAAA,IACZ,aAAa,MAAM,oBAAoB,MAAM,OAAO,IAAI;AAAA,IACxD,UAAU,MAAM;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,EACd,CAAC;AAED,QAAM,WAAW,MAAM,SAAS,QAAQ,KAAK;AAE7C,QAAM,cAAc;AAAA,IAClB,CAAC,SAAiB;AAEhB,UAAI,MAAM,yBAAyB,SAAS,WAAW,SAAS,GAAG;AACjE,cAAM,QAAQ,KAAK;AAAA,MACrB,OAAO;AACL,6BAAqB,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,MAAM,uBAAuB,WAAW,QAAQ,sBAAsB,MAAM,OAAO;AAAA,EACtF;AAEA,QAAM,eAAe,YAA0B,OAAO;AAAA,IACpD,SAAS;AAAA,IACT,GAAG;AAAA,IACH,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc;AAAA,IACd,MAAM,MAAM;AAAA,IAAC;AAAA,IACb,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,YAAY;AAAA,EACd,EAAE;AAEF,SAAO;AAAA,IACL,OAAO,CAAC,CAAC,MAAM;AAAA,IACf,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM;AAAA,IACf,QAAQ,CAAC,CAAC,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB,MAAM,yBAAyB;AAAA,IACtD,uBAAuB,MAAM,yBAAyB;AAAA,IACtD,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "mappings": "AAAA,SAAyB,0BAA0B;AACnD,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,OAAO,SAAS,aAAa,WAAW,SAAS,gBAAgB;AAO1D,SAAS,sBACd,OACA,OACA,UAEI,CAAC,GACL;AACA,QAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,CAAC;AACpD,QAAM,iBAAiB,MAAM,cAAc,CAAC,EAAE;AAE9C,QAAM,aAAa;AAAA,IACjB,MAAO,MAAM,wBAAwB,CAAC,GAAG,gBAAgB,CAAC,IAAI;AAAA;AAAA,IAE9D,CAAC,KAAK,UAAU,cAAc,GAAG,MAAM,qBAAqB;AAAA,EAC9D;AAGA,QAAM,CAAC,WAAW,oBAAoB,IAAI,qBAAqB;AAAA,IAC7D,MAAM,MAAM;AAAA,IACZ,aAAa,MAAM,oBAAoB,MAAM,OAAO,IAAI;AAAA,IACxD,UAAU,MAAM;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,EACd,CAAC;AAED,QAAM,WAAW,MAAM,SAAS,QAAQ,KAAK;AAE7C,QAAM,EAAE,KAAK,IAAI;AAEjB,QAAM,cAAc;AAAA,IAClB,CAAC,SAAiB;AAEhB,UAAI,MAAM,yBAAyB,SAAS,WAAW,SAAS,GAAG;AACjE,cAAM,QAAQ,KAAK;AAAA,MACrB,OAAO;AACL,6BAAqB,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,MAAM,uBAAuB,WAAW,QAAQ,sBAAsB,MAAM,OAAO;AAAA,EACtF;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,WAAW,KAAK,CAAC,MAAM,IAAI,KAAK,IAAI,GAAG,GAAG;AAC5C,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,MAAI,QAAQ,MAAM,yBAAyB,aAAa,WAAW,SAAS,GAAG;AAC7E,yBAAqB,CAAC;AAAA,EACxB;AAGA,QAAM,wBAAwB,QAAQ,WAAW;AACjD,YAAU,MAAM;AACd,QAAI,uBAAuB;AACzB,kBAAY,CAAC;AAAA,IACf;AAAA,EACF,GAAG,CAAC,aAAa,qBAAqB,CAAC;AAEvC,QAAM,SAAS,mBAAmB;AAClC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,0CAA0C;AAAA,EAC5D;AAEA,QAAM,eAAe,YAA0B,OAAO;AAAA,IACpD,SAAS;AAAA,IACT,GAAG;AAAA,IACH,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc;AAAA,IACd,MAAM,MAAM;AAAA,IAAC;AAAA,IACb,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,YAAY;AAAA,EACd,EAAE;AAEF,QAAM,sBAAsB,MAAM,6BAA6B,QAAQ,MAAM;AAE7E,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,OAAO,CAAC,CAAC,MAAM;AAAA,IACf,MAAM,MAAM;AAAA,IACZ,SAAS,MAAM;AAAA,IACf,QAAQ,CAAC,CAAC,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB,MAAM,yBAAyB;AAAA,IACtD,uBAAuB,MAAM,yBAAyB;AAAA,IACtD,oBAAoB,QAAQ;AAAA,IAC5B,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB;AAEA,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/sheet",
-  "version": "1.27.1",
+  "version": "1.27.2",
   "sideEffects": [
     "*.css"
   ],
@@ -30,24 +30,24 @@
     }
   },
   "dependencies": {
-    "@tamagui/animations-react-native": "1.27.1",
-    "@tamagui/compose-refs": "1.27.1",
-    "@tamagui/core": "1.27.1",
-    "@tamagui/create-context": "1.27.1",
-    "@tamagui/portal": "1.27.1",
-    "@tamagui/remove-scroll": "1.27.1",
-    "@tamagui/scroll-view": "1.27.1",
-    "@tamagui/stacks": "1.27.1",
-    "@tamagui/use-constant": "1.27.1",
-    "@tamagui/use-controllable-state": "1.27.1",
-    "@tamagui/use-keyboard-visible": "1.27.1"
+    "@tamagui/animations-react-native": "1.27.2",
+    "@tamagui/compose-refs": "1.27.2",
+    "@tamagui/core": "1.27.2",
+    "@tamagui/create-context": "1.27.2",
+    "@tamagui/portal": "1.27.2",
+    "@tamagui/remove-scroll": "1.27.2",
+    "@tamagui/scroll-view": "1.27.2",
+    "@tamagui/stacks": "1.27.2",
+    "@tamagui/use-constant": "1.27.2",
+    "@tamagui/use-controllable-state": "1.27.2",
+    "@tamagui/use-keyboard-visible": "1.27.2"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.27.1",
+    "@tamagui/build": "1.27.2",
     "react": "^18.2.0",
     "react-native": "^0.71.7"
   },

package/src/Sheet.tsx

@@ -98,7 +98,6 @@ export const Frame = styled(YStack, {
         width: '100%',
         maxHeight: '100%',
         overflow: 'hidden',
-        pointerEvents: 'auto',
       },
     },
   } as const,

package/src/SheetContext.tsx

@@ -1,22 +1,7 @@
-import { TamaguiElement } from '@tamagui/core'
 import { createContextScope } from '@tamagui/create-context'
-import React from 'react'
 
 import { SHEET_NAME } from './constants'
-import { PositionChangeHandler, ScrollBridge, SheetProps } from './types'
-
-type SheetContextValue = Required<
-  Pick<SheetProps, 'open' | 'position' | 'snapPoints' | 'dismissOnOverlayPress'>
-> & {
-  hidden: boolean
-  setPosition: PositionChangeHandler
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>
-  contentRef: React.RefObject<TamaguiElement>
-  dismissOnSnapToBottom: boolean
-  scrollBridge: ScrollBridge
-  frameSize: number
-  modal: boolean
-}
+import { SheetContextValue } from './useSheetProviderProps'
 
 export const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME)
 

package/src/SheetImplementationCustom.tsx

@@ -0,0 +1,404 @@
+import { AdaptParentContext } from '@tamagui/adapt'
+import { useComposedRefs } from '@tamagui/compose-refs'
+import {
+  Theme,
+  isTouchable,
+  isWeb,
+  themeable,
+  useAnimationDriver,
+  useEvent,
+  useIsomorphicLayoutEffect,
+  useThemeName,
+} from '@tamagui/core'
+import { Portal } from '@tamagui/portal'
+import { useKeyboardVisible } from '@tamagui/use-keyboard-visible'
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  Animated,
+  GestureResponderEvent,
+  Keyboard,
+  LayoutChangeEvent,
+  PanResponder,
+  PanResponderGestureState,
+  View,
+} from 'react-native'
+
+import { HIDDEN_SIZE, SHEET_HIDDEN_STYLESHEET } from './constants'
+import { ParentSheetContext, SheetInsideSheetContext } from './contexts'
+import { resisted } from './helpers'
+import { SheetProvider } from './SheetContext'
+import { SheetProps } from './types'
+import { useSheetOpenState } from './useSheetOpenState'
+import { useSheetProviderProps } from './useSheetProviderProps'
+
+export const SheetImplementationCustom = themeable(
+  forwardRef<View, SheetProps>(function SheetImplementationCustom(props, forwardedRef) {
+    const parentSheet = useContext(ParentSheetContext)
+
+    const {
+      animationConfig,
+      modal = false,
+      zIndex = parentSheet.zIndex + 1,
+      moveOnKeyboardChange = false,
+      portalProps,
+    } = props
+
+    const keyboardIsVisible = useKeyboardVisible()
+    const state = useSheetOpenState(props)
+    const [overlayComponent, setOverlayComponent] = useState<any>(null)
+    const providerProps = useSheetProviderProps(props, state, {
+      onOverlayComponent: setOverlayComponent,
+    })
+    const { frameSize, setFrameSize, snapPoints, position, setPosition, scrollBridge } =
+      providerProps
+    const { open, controller, isHidden } = state
+
+    const sheetRef = useRef<View>(null)
+    const ref = useComposedRefs(forwardedRef, sheetRef)
+
+    /**
+     * This is a hacky workaround for native:
+     */
+    const [isShowingInnerSheet, setIsShowingInnerSheet] = useState(false)
+    const shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet
+    const parentSheetContext = useContext(SheetInsideSheetContext)
+    const onInnerSheet = useCallback((hasChild: boolean) => {
+      setIsShowingInnerSheet(hasChild)
+    }, [])
+
+    const maxSnapPoint = snapPoints.reduce((prev, cur) => Math.max(prev, cur))
+    const screenSize = frameSize / (maxSnapPoint / 100)
+
+    const positions = useMemo(
+      () => snapPoints.map((point) => getPercentSize(point, screenSize)),
+      [frameSize, snapPoints]
+    )
+
+    const driver = useAnimationDriver()
+    const { useAnimatedNumber, useAnimatedNumberStyle, useAnimatedNumberReaction } =
+      driver
+
+    // temp until reanimated useAnimatedNumber fix
+    const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View
+
+    useIsomorphicLayoutEffect(() => {
+      if (!(parentSheetContext && open)) return
+      parentSheetContext(true)
+      return () => {
+        parentSheetContext(false)
+      }
+    }, [parentSheetContext, open])
+
+    const nextParentContext = useMemo(
+      () => ({
+        zIndex,
+      }),
+      [zIndex]
+    )
+
+    const animatedNumber = useAnimatedNumber(HIDDEN_SIZE)
+
+    // native only fix
+    const at = useRef(0)
+
+    useAnimatedNumberReaction(
+      {
+        value: animatedNumber,
+        hostRef: sheetRef,
+      },
+      (value) => {
+        if (!driver.isReactNative) return
+        at.current = value
+        scrollBridge.paneY = value
+      }
+    )
+
+    function stopSpring() {
+      animatedNumber.stop()
+      if (scrollBridge.onFinishAnimate) {
+        scrollBridge.onFinishAnimate()
+        scrollBridge.onFinishAnimate = undefined
+      }
+    }
+
+    const animateTo = useEvent((position: number) => {
+      const current = animatedNumber.getValue()
+      if (isHidden && open) return
+      if (!current) return
+      if (frameSize === 0) return
+      const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : screenSize
+      const toValue = isHidden || position === -1 ? hiddenValue : positions[position]
+      if (at.current === toValue) return
+      stopSpring()
+      if (isHidden) {
+        animatedNumber.setValue(toValue, {
+          type: 'timing',
+          duration: 0,
+        })
+        at.current = toValue
+        return
+      }
+      // dont bounce on initial measure to bottom
+      const overshootClamping = at.current === HIDDEN_SIZE
+      animatedNumber.setValue(toValue, {
+        ...animationConfig,
+        type: 'spring',
+        overshootClamping,
+      })
+    })
+
+    useIsomorphicLayoutEffect(() => {
+      animateTo(position)
+    }, [isHidden, frameSize, position, animateTo])
+
+    const disableDrag = props.disableDrag ?? controller?.disableDrag
+    const themeName = useThemeName()
+
+    const panResponder = useMemo(
+      () => {
+        if (disableDrag) return
+        if (!frameSize) return
+        if (isShowingInnerSheet) return
+
+        const minY = positions[0]
+        scrollBridge.paneMinY = minY
+        let startY = at.current
+
+        function makeUnselectable(val: boolean) {
+          if (!SHEET_HIDDEN_STYLESHEET) return
+          if (!val) {
+            SHEET_HIDDEN_STYLESHEET.innerText = ''
+          } else {
+            SHEET_HIDDEN_STYLESHEET.innerText =
+              ':root * { user-select: none !important; -webkit-user-select: none !important; }'
+          }
+        }
+
+        const release = ({ vy, dragAt }: { dragAt: number; vy: number }) => {
+          isExternalDrag = false
+          previouslyScrolling = false
+          makeUnselectable(false)
+          const at = dragAt + startY
+          // seems liky vy goes up to about 4 at the very most (+ is down, - is up)
+          // lets base our multiplier on the total layout height
+          const end = at + frameSize * vy * 0.2
+          let closestPoint = 0
+          let dist = Infinity
+          for (let i = 0; i < positions.length; i++) {
+            const position = positions[i]
+            const curDist = end > position ? end - position : position - end
+            if (curDist < dist) {
+              dist = curDist
+              closestPoint = i
+            }
+          }
+          // have to call both because state may not change but need to snap back
+          setPosition(closestPoint)
+          animateTo(closestPoint)
+        }
+
+        const finish = (_e: GestureResponderEvent, state: PanResponderGestureState) => {
+          release({
+            vy: state.vy,
+            dragAt: state.dy,
+          })
+        }
+
+        let previouslyScrolling = false
+
+        const onMoveShouldSet = (
+          _e: GestureResponderEvent,
+          { dy }: PanResponderGestureState
+        ) => {
+          const isScrolled = scrollBridge.y !== 0
+          const isDraggingUp = dy < 0
+          // we can treat near top instead of exactly to avoid trouble with springs
+          const isNearTop = scrollBridge.paneY - 5 <= scrollBridge.paneMinY
+          if (isScrolled) {
+            previouslyScrolling = true
+            return false
+          }
+          // prevent drag once at top and pulling up
+          if (isNearTop) {
+            if (!isScrolled && isDraggingUp) {
+              return false
+            }
+          }
+          // we could do some detection of other touchables and cancel here..
+          return Math.abs(dy) > 5
+        }
+
+        const grant = () => {
+          makeUnselectable(true)
+          stopSpring()
+          startY = at.current
+        }
+
+        let isExternalDrag = false
+
+        scrollBridge.drag = (dy) => {
+          if (!isExternalDrag) {
+            isExternalDrag = true
+            grant()
+          }
+          const to = dy + startY
+          animatedNumber.setValue(resisted(to, minY), { type: 'direct' })
+        }
+
+        scrollBridge.release = release
+
+        return PanResponder.create({
+          onMoveShouldSetPanResponder: onMoveShouldSet,
+          onPanResponderGrant: grant,
+          onPanResponderMove: (_e, { dy }) => {
+            const toFull = dy + startY
+            const to = resisted(toFull, minY)
+            animatedNumber.setValue(to, { type: 'direct' })
+          },
+          onPanResponderEnd: finish,
+          onPanResponderTerminate: finish,
+          onPanResponderRelease: finish,
+        })
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]
+    )
+
+    const handleAnimationViewLayout = useCallback(
+      (e: LayoutChangeEvent) => {
+        let next = e.nativeEvent?.layout.height
+        if (isWeb && isTouchable && !open) {
+          // temp fix ios bug where it doesn't go below dynamic bottom...
+          next += 100
+        }
+        if (!next) return
+        setFrameSize(next)
+      },
+      [keyboardIsVisible]
+    )
+
+    const animatedStyle = useAnimatedNumberStyle(animatedNumber, (val) => {
+      'worklet'
+      const translateY = frameSize === 0 ? HIDDEN_SIZE : val
+      return {
+        transform: [{ translateY }],
+      }
+    })
+
+    const sizeBeforeKeyboard = useRef<number | null>(null)
+    useEffect(() => {
+      if (isWeb || !moveOnKeyboardChange) return
+      const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
+        if (sizeBeforeKeyboard.current !== null) return
+        sizeBeforeKeyboard.current = animatedNumber.getValue()
+        animatedNumber.setValue(
+          Math.max(animatedNumber.getValue() - e.endCoordinates.height, 0)
+        )
+      })
+      const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+        if (sizeBeforeKeyboard.current === null) return
+        animatedNumber.setValue(sizeBeforeKeyboard.current)
+        sizeBeforeKeyboard.current = null
+      })
+
+      return () => {
+        keyboardDidHideListener.remove()
+        keyboardDidShowListener.remove()
+      }
+    }, [moveOnKeyboardChange])
+
+    // we need to set this *after* fully closed to 0, to avoid it overlapping
+    // the page when resizing quickly on web for example
+    const [opacity, setOpacity] = useState(open ? 1 : 0)
+    if (open && opacity === 0) {
+      setOpacity(1)
+    }
+    useEffect(() => {
+      if (!open) {
+        // need to wait for animation complete, for now lets just do it naively
+        const tm = setTimeout(() => {
+          setOpacity(0)
+        }, 400)
+        return () => {
+          clearTimeout(tm)
+        }
+      }
+    }, [open])
+
+    const contents = (
+      <ParentSheetContext.Provider value={nextParentContext}>
+        <SheetProvider {...providerProps}>
+          {shouldHideParentSheet ? null : overlayComponent}
+
+          <AnimatedView
+            ref={ref}
+            {...panResponder?.panHandlers}
+            onLayout={handleAnimationViewLayout}
+            pointerEvents={open && !shouldHideParentSheet ? 'auto' : 'none'}
+            //  @ts-ignore
+            animation={props.animation}
+            style={[
+              {
+                position: 'absolute',
+                zIndex,
+                width: '100%',
+                height: `${maxSnapPoint}%`,
+                opacity,
+              },
+              animatedStyle,
+            ]}
+          >
+            {props.children}
+          </AnimatedView>
+        </SheetProvider>
+      </ParentSheetContext.Provider>
+    )
+
+    const adaptContext = useContext(AdaptParentContext)
+
+    if (modal) {
+      const modalContents = (
+        <Portal zIndex={zIndex} {...portalProps}>
+          <Theme forceClassName name={themeName}>
+            <AdaptParentContext.Provider value={adaptContext}>
+              {contents}
+            </AdaptParentContext.Provider>
+          </Theme>
+        </Portal>
+      )
+
+      if (isWeb) {
+        return modalContents
+      }
+
+      // on native we don't support multiple modals yet... fix for now is to hide outer one
+      return (
+        <SheetInsideSheetContext.Provider value={onInnerSheet}>
+          {modalContents}
+        </SheetInsideSheetContext.Provider>
+      )
+    }
+
+    return contents
+  })
+)
+
+function getPercentSize(point?: number, screenSize?: number) {
+  if (!screenSize) return 0
+  if (point === undefined) {
+    console.warn('No snapPoint')
+    return 0
+  }
+  const pct = point / 100
+  const next = Math.round(screenSize - pct * screenSize)
+
+  return next
+}

package/src/constants.tsx

@@ -1,5 +1,15 @@
+import { isClient } from '@tamagui/core'
+
 export const constants = {}
 
 export const SHEET_NAME = 'Sheet'
 export const SHEET_HANDLE_NAME = 'SheetHandle'
 export const SHEET_OVERLAY_NAME = 'SheetOverlay'
+
+// set all the way off screen
+export const HIDDEN_SIZE = 10_000
+
+export const SHEET_HIDDEN_STYLESHEET = isClient ? document.createElement('style') : null
+if (SHEET_HIDDEN_STYLESHEET) {
+  document.head.appendChild(SHEET_HIDDEN_STYLESHEET)
+}