@tamagui/sheet 1.22.5 → 1.22.7

package/dist/jsx/useSheetChildren.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useSheetChildren.tsx"],
-  "mappings": "AAAA,OAAO,SAAS,sBAAsB;AAE/B,SAAS,iBAAiB,cAAmB;AAClD,MAAI,kBAA6C;AACjD,MAAI,mBAA8C;AAClD,MAAI,iBAA4C;AAGhD,QAAM,SAAS,QAAQ,cAAc,CAAC,UAAU;AAC9C,QAAI,eAAe,KAAK,GAAG;AACzB,YAAM,OAAO,MAAM,OAAO,cAAc,GAAG;AAC3C,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,4BAAkB;AAClB;AAAA,QACF,KAAK;AACH,2BAAiB;AACjB;AAAA,QACF,KAAK;AACH,6BAAmB;AACnB;AAAA,QACF;AACE,kBAAQ,KAAK,0CAA0C,KAAK;AAAA,MAChE;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB,iBAClB,MAAM,aAAa,gBAAgB;AAAA,MACjC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT,CAAC,IACD;AAAA,EACN;AACF;",
+  "mappings": "AAAA,OAAO,SAAS,sBAAsB;AAE/B,SAAS,iBAAiB,cAAmB;AAClD,MAAI,kBAA6C;AACjD,MAAI,mBAA8C;AAClD,MAAI,iBAA4C;AAGhD,QAAM,SAAS,QAAQ,cAAc,CAAC,UAAU;AAC9C,QAAI,eAAe,KAAK,GAAG;AACzB,YAAM,OAAO,MAAM,OAAO,cAAc,GAAG;AAC3C,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,4BAAkB;AAClB;AAAA,QACF,KAAK;AACH,2BAAiB;AACjB;AAAA,QACF,KAAK;AACH,6BAAmB;AACnB;AAAA,QACF;AACE,kBAAQ,KAAK,0CAA0C,KAAK;AAAA,MAChE;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,uBAA4B;AAEhC,MAAI,gBAAgB;AAClB,2BAAuB,MAAM,aAAa,gBAAgB;AAAA,MACxD,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/jsx/useSheetChildren.mjs

@@ -21,18 +21,22 @@ function useSheetChildren(childrenProp) {
       }
     }
   });
-  return {
-    handleComponent,
-    overlayComponent,
-    frameComponent,
-    bottomCoverComponent: frameComponent ? React.cloneElement(frameComponent, {
+  let bottomCoverComponent = null;
+  if (frameComponent) {
+    bottomCoverComponent = React.cloneElement(frameComponent, {
       children: null,
       position: "absolute",
       bottom: -100,
       height: 110,
       left: 0,
       right: 0
-    }) : null
+    });
+  }
+  return {
+    handleComponent,
+    overlayComponent,
+    frameComponent,
+    bottomCoverComponent
   };
 }
 export {

package/dist/jsx/useSheetChildren.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useSheetChildren.tsx"],
-  "mappings": "AAAA,OAAO,SAAS,sBAAsB;AAE/B,SAAS,iBAAiB,cAAmB;AAClD,MAAI,kBAA6C;AACjD,MAAI,mBAA8C;AAClD,MAAI,iBAA4C;AAGhD,QAAM,SAAS,QAAQ,cAAc,CAAC,UAAU;AAC9C,QAAI,eAAe,KAAK,GAAG;AACzB,YAAM,OAAO,MAAM,OAAO,cAAc,GAAG;AAC3C,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,4BAAkB;AAClB;AAAA,QACF,KAAK;AACH,2BAAiB;AACjB;AAAA,QACF,KAAK;AACH,6BAAmB;AACnB;AAAA,QACF;AACE,kBAAQ,KAAK,0CAA0C,KAAK;AAAA,MAChE;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB,iBAClB,MAAM,aAAa,gBAAgB;AAAA,MACjC,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT,CAAC,IACD;AAAA,EACN;AACF;",
+  "mappings": "AAAA,OAAO,SAAS,sBAAsB;AAE/B,SAAS,iBAAiB,cAAmB;AAClD,MAAI,kBAA6C;AACjD,MAAI,mBAA8C;AAClD,MAAI,iBAA4C;AAGhD,QAAM,SAAS,QAAQ,cAAc,CAAC,UAAU;AAC9C,QAAI,eAAe,KAAK,GAAG;AACzB,YAAM,OAAO,MAAM,OAAO,cAAc,GAAG;AAC3C,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,4BAAkB;AAClB;AAAA,QACF,KAAK;AACH,2BAAiB;AACjB;AAAA,QACF,KAAK;AACH,6BAAmB;AACnB;AAAA,QACF;AACE,kBAAQ,KAAK,0CAA0C,KAAK;AAAA,MAChE;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,uBAA4B;AAEhC,MAAI,gBAAgB;AAClB,2BAAuB,MAAM,aAAa,gBAAgB;AAAA,MACxD,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/jsx/useSheetSnapPoints.js

@@ -0,0 +1,53 @@
+import { useEffect, useMemo } from "react";
+const useSheetSnapPoints = ({
+  position,
+  setPosition,
+  dismissOnSnapToBottom,
+  snapPoints,
+  setPositionImmediate,
+  open,
+  frameSize
+}) => {
+  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 && dismissOnSnapToBottom && position === snapPoints.length - 1) {
+    setPositionImmediate(0);
+  }
+  const shouldSetPositionOpen = open && position < 0;
+  useEffect(() => {
+    if (shouldSetPositionOpen) {
+      setPosition(0);
+    }
+  }, [setPosition, shouldSetPositionOpen]);
+  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]
+  );
+  return {
+    positions,
+    maxSnapPoint,
+    screenSize
+  };
+};
+function getPercentSize(point, screenSize) {
+  if (!screenSize)
+    return 0;
+  if (point === void 0) {
+    console.warn("No snapPoint");
+    return 0;
+  }
+  const pct = point / 100;
+  const next = Math.round(screenSize - pct * screenSize);
+  return next;
+}
+export {
+  useSheetSnapPoints
+};
+//# sourceMappingURL=useSheetSnapPoints.js.map

package/dist/jsx/useSheetSnapPoints.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/useSheetSnapPoints.tsx"],
+  "mappings": "AAAA,SAAS,WAAW,eAAe;AAI5B,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,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,yBAAyB,aAAa,WAAW,SAAS,GAAG;AACvE,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,eAAe,WAAW,OAAO,CAAC,MAAM,QAAQ,KAAK,IAAI,MAAM,GAAG,CAAC;AACzE,QAAM,aAAa,aAAa,eAAe;AAE/C,QAAM,YAAY;AAAA,IAChB,MAAM,WAAW,IAAI,CAAC,UAAU,eAAe,OAAO,UAAU,CAAC;AAAA,IACjE,CAAC,WAAW,UAAU;AAAA,EACxB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,SAAS,eAAe,OAAgB,YAAqB;AAC3D,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,UAAU,QAAW;AACvB,YAAQ,KAAK,cAAc;AAC3B,WAAO;AAAA,EACT;AACA,QAAM,MAAM,QAAQ;AACpB,QAAM,OAAO,KAAK,MAAM,aAAa,MAAM,UAAU;AAErD,SAAO;AACT;",
+  "names": []
+}

package/dist/jsx/useSheetSnapPoints.mjs

@@ -0,0 +1,53 @@
+import { useEffect, useMemo } from "react";
+const useSheetSnapPoints = ({
+  position,
+  setPosition,
+  dismissOnSnapToBottom,
+  snapPoints,
+  setPositionImmediate,
+  open,
+  frameSize
+}) => {
+  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 && dismissOnSnapToBottom && position === snapPoints.length - 1) {
+    setPositionImmediate(0);
+  }
+  const shouldSetPositionOpen = open && position < 0;
+  useEffect(() => {
+    if (shouldSetPositionOpen) {
+      setPosition(0);
+    }
+  }, [setPosition, shouldSetPositionOpen]);
+  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]
+  );
+  return {
+    positions,
+    maxSnapPoint,
+    screenSize
+  };
+};
+function getPercentSize(point, screenSize) {
+  if (!screenSize)
+    return 0;
+  if (point === void 0) {
+    console.warn("No snapPoint");
+    return 0;
+  }
+  const pct = point / 100;
+  const next = Math.round(screenSize - pct * screenSize);
+  return next;
+}
+export {
+  useSheetSnapPoints
+};
+//# sourceMappingURL=useSheetSnapPoints.mjs.map

package/dist/jsx/useSheetSnapPoints.mjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/useSheetSnapPoints.tsx"],
+  "mappings": "AAAA,SAAS,WAAW,eAAe;AAI5B,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,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,yBAAyB,aAAa,WAAW,SAAS,GAAG;AACvE,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,eAAe,WAAW,OAAO,CAAC,MAAM,QAAQ,KAAK,IAAI,MAAM,GAAG,CAAC;AACzE,QAAM,aAAa,aAAa,eAAe;AAE/C,QAAM,YAAY;AAAA,IAChB,MAAM,WAAW,IAAI,CAAC,UAAU,eAAe,OAAO,UAAU,CAAC;AAAA,IACjE,CAAC,WAAW,UAAU;AAAA,EACxB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,SAAS,eAAe,OAAgB,YAAqB;AAC3D,MAAI,CAAC;AAAY,WAAO;AACxB,MAAI,UAAU,QAAW;AACvB,YAAQ,KAAK,cAAc;AAC3B,WAAO;AAAA,EACT;AACA,QAAM,MAAM,QAAQ;AACpB,QAAM,OAAO,KAAK,MAAM,aAAa,MAAM,UAAU;AAErD,SAAO;AACT;",
+  "names": []
+}

package/package.json

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

package/src/Sheet.tsx

@@ -20,7 +20,7 @@ import { Portal } from '@tamagui/portal'
 import { RemoveScroll } from '@tamagui/remove-scroll'
 import { ThemeableStack, XStack, XStackProps, YStack, YStackProps } from '@tamagui/stacks'
 import { useKeyboardVisible } from '@tamagui/use-keyboard-visible'
-import React, {
+import {
   FunctionComponent,
   RefAttributes,
   createContext,
@@ -51,6 +51,7 @@ import { useSheetChildren } from './useSheetChildren'
 import { useSheetController } from './useSheetController'
 import { useSheetOpenState } from './useSheetOpenState'
 import { useSheetProviderProps } from './useSheetProviderProps'
+import { useSheetSnapPoints } from './useSheetSnapPoints'
 
 export { createSheetScope } from './SheetContext'
 export * from './types'
@@ -260,7 +261,6 @@ const SheetImplementationCustom = themeable(
 
     const {
       animationConfig,
-      dismissOnSnapToBottom = false,
       forceRemoveScrollEnabled = null,
       disableDrag: disableDragProp,
       modal = false,
@@ -271,31 +271,16 @@ const SheetImplementationCustom = themeable(
 
     const state = useSheetOpenState(props)
     const providerProps = useSheetProviderProps(props, state)
+    const { positions, maxSnapPoint, screenSize } = useSheetSnapPoints(providerProps)
 
-    const {
-      snapPoints,
-      position,
-      contentRef,
-      setPosition,
-      setPositionImmediate,
-      scrollBridge,
-      frameSize,
-      setFrameSize,
-    } = providerProps
+    const { position, contentRef, setPosition, scrollBridge, frameSize, setFrameSize } =
+      providerProps
 
     const { open, isHidden, controller } = state
 
     const { frameComponent, handleComponent, bottomCoverComponent, overlayComponent } =
       useSheetChildren(props.children)
 
-    if (process.env.NODE_ENV === 'development') {
-      if (snapPoints.some((p) => p < 0 || p > 100)) {
-        console.warn(
-          '⚠️ Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame'
-        )
-      }
-    }
-
     const sheetRef = useRef<View>(null)
     const ref = useComposedRefs(forwardedRef, sheetRef)
 
@@ -308,11 +293,6 @@ const SheetImplementationCustom = themeable(
     const keyboardIsVisible = useKeyboardVisible()
     const themeName = useThemeName()
 
-    // reset position to fully open on re-open after dismissOnSnapToBottom
-    if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {
-      setPositionImmediate(0)
-    }
-
     const { useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle } =
       driver
 
@@ -341,22 +321,6 @@ const SheetImplementationCustom = themeable(
       }
     }
 
-    // open must set position
-    const shouldSetPositionOpen = open && position < 0
-    useEffect(() => {
-      if (shouldSetPositionOpen) {
-        setPosition(0)
-      }
-    }, [setPosition, shouldSetPositionOpen])
-
-    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]
-    )
-
     // 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)
@@ -668,18 +632,6 @@ export const ControlledSheet = Sheet as FunctionComponent<
 
 /* -------------------------------------------------------------------------------------------------*/
 
-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
-}
-
 function resisted(y: number, minY: number, maxOverflow = 25) {
   if (y < minY) {
     const past = minY - y

package/src/nativeSheet.tsx

@@ -1,3 +1,4 @@
+import { YStack } from '@tamagui/stacks'
 import { FunctionComponent, useEffect, useRef } from 'react'
 
 import { SheetProvider } from './SheetContext'
@@ -6,6 +7,8 @@ import { useSheetChildren } from './useSheetChildren'
 import { useSheetOpenState } from './useSheetOpenState'
 import { useSheetProviderProps } from './useSheetProviderProps'
 
+// import { useSheetSnapPoints } from './useSheetSnapPoints'
+
 type SheetNativePlatforms = 'ios'
 
 const nativeSheets: Record<SheetNativePlatforms, FunctionComponent<SheetProps> | null> = {
@@ -21,6 +24,8 @@ export function setupNativeSheet(platform: SheetNativePlatforms, Implementation:
     nativeSheets[platform] = (props: SheetProps) => {
       const state = useSheetOpenState(props)
       const providerProps = useSheetProviderProps(props, state)
+      // const { position } = providerProps
+      // const { positions } = useSheetSnapPoints(providerProps)
       const { frameComponent } = useSheetChildren(props.children)
 
       const { open, setOpen } = state
@@ -32,10 +37,32 @@ export function setupNativeSheet(platform: SheetNativePlatforms, Implementation:
         ref.current?.setVisibility(open)
       }, [open])
 
+      // modalContentPreferredContentSize={{
+      //   mode: 'percent',
+      //   percentWidth: '100%',
+      //   percentHeight:
+      // }}
+
       return (
-        <Implementation ref={ref} onModalDismiss={() => setOpen(false)}>
-          <SheetProvider {...providerProps}>{frameComponent}</SheetProvider>
-        </Implementation>
+        <>
+          <SheetProvider {...providerProps}>
+            <Implementation ref={ref} onModalDismiss={() => setOpen(false)}>
+              {frameComponent}
+            </Implementation>
+
+            {/* for some reason select triggers wont show on native if this isn't inside the actual tree not inside implementation... */}
+            {/* so just hiding it here for now... not great... */}
+            <YStack
+              position="absolute"
+              opacity={0}
+              pointerEvents="none"
+              width={0}
+              height={0}
+            >
+              {frameComponent}
+            </YStack>
+          </SheetProvider>
+        </>
       )
     }
   }

package/src/useSheetChildren.tsx

@@ -25,19 +25,23 @@ export function useSheetChildren(childrenProp: any) {
     }
   })
 
+  let bottomCoverComponent: any = null
+
+  if (frameComponent) {
+    bottomCoverComponent = React.cloneElement(frameComponent, {
+      children: null,
+      position: 'absolute',
+      bottom: -100,
+      height: 110,
+      left: 0,
+      right: 0,
+    })
+  }
+
   return {
     handleComponent,
     overlayComponent,
     frameComponent,
-    bottomCoverComponent: frameComponent
-      ? React.cloneElement(frameComponent, {
-          children: null,
-          position: 'absolute',
-          bottom: -100,
-          height: 110,
-          left: 0,
-          right: 0,
-        })
-      : null,
+    bottomCoverComponent,
   }
 }

package/src/useSheetProviderProps.tsx

@@ -69,3 +69,5 @@ export function useSheetProviderProps(props: SheetProps, state: SheetOpenState)
     scrollBridge,
   }
 }
+
+export type SheetContextValue = ReturnType<typeof useSheetProviderProps>

package/src/useSheetSnapPoints.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useMemo } from 'react'
+
+import { SheetContextValue } from './useSheetProviderProps'
+
+export const useSheetSnapPoints = ({
+  position,
+  setPosition,
+  dismissOnSnapToBottom,
+  snapPoints,
+  setPositionImmediate,
+  open,
+  frameSize,
+}: SheetContextValue) => {
+  if (process.env.NODE_ENV === 'development') {
+    if (snapPoints.some((p) => p < 0 || p > 100)) {
+      console.warn(
+        '⚠️ Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame'
+      )
+    }
+  }
+
+  // reset position to fully open on re-open after dismissOnSnapToBottom
+  if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {
+    setPositionImmediate(0)
+  }
+
+  // open must set position
+  const shouldSetPositionOpen = open && position < 0
+  useEffect(() => {
+    if (shouldSetPositionOpen) {
+      setPosition(0)
+    }
+  }, [setPosition, shouldSetPositionOpen])
+
+  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]
+  )
+
+  return {
+    positions,
+    maxSnapPoint,
+    screenSize,
+  }
+}
+
+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/types/Sheet.d.ts

@@ -1,6 +1,6 @@
 import { GetProps } from '@tamagui/core';
 import { XStackProps } from '@tamagui/stacks';
-import React from 'react';
+import { FunctionComponent, RefAttributes } from 'react';
 import { View } from 'react-native';
 import { SheetProps, SheetScopedProps } from './types';
 export { createSheetScope } from './SheetContext';
@@ -133,7 +133,7 @@ export declare const SheetFrameFrame: import("@tamagui/core").TamaguiComponent<O
 }, {
     displayName: string | undefined;
 }>;
-export declare const SheetFrame: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{}, "elevation" | "fullscreen"> & {
+export declare const SheetFrame: import("react").ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{}, "elevation" | "fullscreen"> & {
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
 } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{}, "elevation" | "fullscreen"> & {
@@ -144,16 +144,16 @@ export declare const SheetFrame: React.ForwardRefExoticComponent<Omit<import("re
     readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
 }>> & {
     __scopeSheet?: import("@tamagui/create-context").Scope<any>;
-} & React.RefAttributes<unknown>>;
-export declare const Sheet: React.ForwardRefExoticComponent<{
+} & RefAttributes<unknown>>;
+export declare const Sheet: import("react").ForwardRefExoticComponent<{
     open?: boolean | undefined;
     defaultOpen?: boolean | undefined;
-    onOpenChange?: (((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>) | undefined;
+    onOpenChange?: (((open: boolean) => void) | import("react").Dispatch<import("react").SetStateAction<boolean>>) | undefined;
     position?: number | undefined;
     defaultPosition?: number | undefined;
     snapPoints?: number[] | undefined;
     onPositionChange?: import("./types").PositionChangeHandler | undefined;
-    children?: React.ReactNode;
+    children?: import("react").ReactNode;
     dismissOnOverlayPress?: boolean | undefined;
     dismissOnSnapToBottom?: boolean | undefined;
     forceRemoveScrollEnabled?: boolean | undefined;
@@ -168,9 +168,9 @@ export declare const Sheet: React.ForwardRefExoticComponent<{
     moveOnKeyboardChange?: boolean | undefined;
 } & {
     __scopeSheet?: import("@tamagui/create-context").Scope<any>;
-} & React.RefAttributes<View>> & {
+} & RefAttributes<View>> & {
     Handle: ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => JSX.Element;
-    Frame: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{}, "elevation" | "fullscreen"> & {
+    Frame: import("react").ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{}, "elevation" | "fullscreen"> & {
         readonly fullscreen?: boolean | undefined;
         readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
     } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{}, "elevation" | "fullscreen"> & {
@@ -181,19 +181,19 @@ export declare const Sheet: React.ForwardRefExoticComponent<{
         readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
     }>> & {
         __scopeSheet?: import("@tamagui/create-context").Scope<any>;
-    } & React.RefAttributes<unknown>>;
+    } & RefAttributes<unknown>>;
     Overlay: ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => JSX.Element;
-    ScrollView: React.ForwardRefExoticComponent<import("react-native").ScrollViewProps & Omit<import("@tamagui/core").StackProps, keyof import("react-native").ScrollViewProps> & Omit<{}, "fullscreen"> & {
+    ScrollView: import("react").ForwardRefExoticComponent<import("react-native").ScrollViewProps & Omit<import("@tamagui/core").StackProps, keyof import("react-native").ScrollViewProps> & Omit<{}, "fullscreen"> & {
         readonly fullscreen?: boolean | undefined;
     } & import("@tamagui/core").MediaProps<Partial<import("react-native").ScrollViewProps & Omit<import("@tamagui/core").StackProps, keyof import("react-native").ScrollViewProps> & Omit<{}, "fullscreen"> & {
         readonly fullscreen?: boolean | undefined;
     }>> & import("@tamagui/core").PseudoProps<Partial<import("react-native").ScrollViewProps & Omit<import("@tamagui/core").StackProps, keyof import("react-native").ScrollViewProps> & Omit<{}, "fullscreen"> & {
         readonly fullscreen?: boolean | undefined;
-    }>> & React.RefAttributes<import("@tamagui/core").TamaguiElement>>;
+    }>> & RefAttributes<import("@tamagui/core").TamaguiElement>>;
 };
-export declare const ControlledSheet: React.FunctionComponent<Omit<SheetProps, "open" | "onOpenChange"> & React.RefAttributes<View>> & {
+export declare const ControlledSheet: FunctionComponent<Omit<SheetProps, "open" | "onOpenChange"> & RefAttributes<View>> & {
     Handle: ({ __scopeSheet, ...props }: SheetScopedProps<XStackProps>) => JSX.Element;
-    Frame: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{}, "elevation" | "fullscreen"> & {
+    Frame: import("react").ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{}, "elevation" | "fullscreen"> & {
         readonly fullscreen?: boolean | undefined;
         readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
     } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{}, "elevation" | "fullscreen"> & {
@@ -204,14 +204,14 @@ export declare const ControlledSheet: React.FunctionComponent<Omit<SheetProps, "
         readonly elevation?: import("@tamagui/core").SizeTokens | undefined;
     }>> & {
         __scopeSheet?: import("@tamagui/create-context").Scope<any>;
-    } & React.RefAttributes<unknown>>;
+    } & RefAttributes<unknown>>;
     Overlay: ({ __scopeSheet, ...props }: SheetScopedProps<SheetOverlayProps>) => JSX.Element;
-    ScrollView: React.ForwardRefExoticComponent<import("react-native").ScrollViewProps & Omit<import("@tamagui/core").StackProps, keyof import("react-native").ScrollViewProps> & Omit<{}, "fullscreen"> & {
+    ScrollView: import("react").ForwardRefExoticComponent<import("react-native").ScrollViewProps & Omit<import("@tamagui/core").StackProps, keyof import("react-native").ScrollViewProps> & Omit<{}, "fullscreen"> & {
         readonly fullscreen?: boolean | undefined;
     } & import("@tamagui/core").MediaProps<Partial<import("react-native").ScrollViewProps & Omit<import("@tamagui/core").StackProps, keyof import("react-native").ScrollViewProps> & Omit<{}, "fullscreen"> & {
         readonly fullscreen?: boolean | undefined;
     }>> & import("@tamagui/core").PseudoProps<Partial<import("react-native").ScrollViewProps & Omit<import("@tamagui/core").StackProps, keyof import("react-native").ScrollViewProps> & Omit<{}, "fullscreen"> & {
         readonly fullscreen?: boolean | undefined;
-    }>> & React.RefAttributes<import("@tamagui/core").TamaguiElement>>;
+    }>> & RefAttributes<import("@tamagui/core").TamaguiElement>>;
 };
 //# sourceMappingURL=Sheet.d.ts.map

package/types/Sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../src/Sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,QAAQ,EAcT,MAAM,eAAe,CAAA;AAGtB,OAAO,EAA0B,WAAW,EAAuB,MAAM,iBAAiB,CAAA;AAE1F,OAAO,KAWN,MAAM,OAAO,CAAA;AACd,OAAO,EAOL,IAAI,EACL,MAAM,cAAc,CAAA;AAMrB,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAMtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,cAAc,SAAS,CAAA;AAMvB,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC3B,CAAA;AAEF,eAAO,MAAM,WAAW,+BACO,iBAAiB,WAAW,CAAC,gBAe3D,CAAA;AAQD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2B5B,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAElE,eAAO,MAAM,YAAY,+BACM,iBAAiB,iBAAiB,CAAC,gBAiBjE,CAAA;AAWD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;EAqB1B,CAAA;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;iCAQtB,CAAA;AAgBD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;yCAlIa,iBAAiB,WAAW,CAAC;;;;;;;;;;;;;0CAuD7B,iBAAiB,iBAAiB,CAAC;;;;;;;;CAqGjE,CAAA;AAyZD,eAAO,MAAM,eAAe;yCArjBG,iBAAiB,WAAW,CAAC;;;;;;;;;;;;;0CAuD7B,iBAAiB,iBAAiB,CAAC;;;;;;;;CAigB1C,CAAA"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../src/Sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,QAAQ,EAcT,MAAM,eAAe,CAAA;AAGtB,OAAO,EAA0B,WAAW,EAAuB,MAAM,iBAAiB,CAAA;AAE1F,OAAO,EACL,iBAAiB,EACjB,aAAa,EASd,MAAM,OAAO,CAAA;AACd,OAAO,EAOL,IAAI,EACL,MAAM,cAAc,CAAA;AAMrB,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAOtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,cAAc,SAAS,CAAA;AAMvB,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC3B,CAAA;AAEF,eAAO,MAAM,WAAW,+BACO,iBAAiB,WAAW,CAAC,gBAe3D,CAAA;AAQD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2B5B,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAElE,eAAO,MAAM,YAAY,+BACM,iBAAiB,iBAAiB,CAAC,gBAiBjE,CAAA;AAWD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;EAqB1B,CAAA;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;2BAQtB,CAAA;AAgBD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;yCAlIa,iBAAiB,WAAW,CAAC;;;;;;;;;;;;;0CAuD7B,iBAAiB,iBAAiB,CAAC;;;;;;;;CAqGjE,CAAA;AAoXD,eAAO,MAAM,eAAe;yCAhhBG,iBAAiB,WAAW,CAAC;;;;;;;;;;;;;0CAuD7B,iBAAiB,iBAAiB,CAAC;;;;;;;;CA4d1C,CAAA"}

package/types/nativeSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativeSheet.d.ts","sourceRoot":"","sources":["../src/nativeSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAA;AAG5D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAKpC,KAAK,oBAAoB,GAAG,KAAK,CAAA;AAMjC,wBAAgB,cAAc,CAAC,QAAQ,EAAE,oBAAoB,wCAE5D;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE,cAAc,EAAE,GAAG,QAuBnF"}
+{"version":3,"file":"nativeSheet.d.ts","sourceRoot":"","sources":["../src/nativeSheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAA;AAG5D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAOpC,KAAK,oBAAoB,GAAG,KAAK,CAAA;AAMjC,wBAAgB,cAAc,CAAC,QAAQ,EAAE,oBAAoB,wCAE5D;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,EAAE,cAAc,EAAE,GAAG,QA+CnF"}

package/types/useSheetChildren.d.ts

@@ -1,15 +1,7 @@
-import React from 'react';
 export declare function useSheetChildren(childrenProp: any): {
     handleComponent: null;
     overlayComponent: null;
     frameComponent: null;
-    bottomCoverComponent: React.DetailedReactHTMLElement<{
-        children: null;
-        position: string;
-        bottom: number;
-        height: number;
-        left: number;
-        right: number;
-    }, HTMLElement> | null;
+    bottomCoverComponent: any;
 };
 //# sourceMappingURL=useSheetChildren.d.ts.map

package/types/useSheetChildren.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSheetChildren.d.ts","sourceRoot":"","sources":["../src/useSheetChildren.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAE7C,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,GAAG;;;;;;;;;;;;EAwCjD"}
+{"version":3,"file":"useSheetChildren.d.ts","sourceRoot":"","sources":["../src/useSheetChildren.tsx"],"names":[],"mappings":"AAEA,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,GAAG;;;;;EA4CjD"}

package/types/useSheetProviderProps.d.ts

@@ -19,4 +19,5 @@ export declare function useSheetProviderProps(props: SheetProps, state: SheetOpe
     setPositionImmediate: React.Dispatch<React.SetStateAction<number>>;
     scrollBridge: ScrollBridge;
 };
+export type SheetContextValue = ReturnType<typeof useSheetProviderProps>;
 //# sourceMappingURL=useSheetProviderProps.d.ts.map

package/types/useSheetProviderProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSheetProviderProps.d.ts","sourceRoot":"","sources":["../src/useSheetProviderProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG9C,OAAO,KAAyC,MAAM,OAAO,CAAA;AAE7D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc;;;;;;;;;;;;;wBAuBnE,MAAM;;;EAuChB"}
+{"version":3,"file":"useSheetProviderProps.d.ts","sourceRoot":"","sources":["../src/useSheetProviderProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAG9C,OAAO,KAAyC,MAAM,OAAO,CAAA;AAE7D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc;;;;;;;;;;;;;wBAuBnE,MAAM;;;EAuChB;AAED,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAA"}