feat: add height getter to ref

README.md

@@ -292,6 +292,32 @@ ref.current.snapTo(({ snapPoints }) => Math.min(...snapPoints), {
 })
 ```
 
+### height
+
+Type: `number`
+
+The current snap point, in other words the height, of the bottom sheet. This value is updated outside the React render cycle, for performance reasons.
+
+```jsx
+export default function Example() {
+  const sheetRef = React.useRef()
+  return (
+    <BottomSheet
+      ref={sheetRef}
+      onSpringStart={() => {
+        console.log('Transition from:', sheetRef.current.height)
+        requestAnimationFrame(() =>
+          console.log('Transition to:', sheetRef.current.height)
+        )
+      }}
+      onSpringEnd={() =>
+        console.log('Finished transition to:', sheetRef.current.height)
+      }
+    />
+  )
+}
+```
+
 # Credits
 
 - Play icon used on frame overlays: [font-awesome](https://fontawesome.com/icons/play-circle?style=regular)

pages/fixtures/experiments.tsx

@@ -478,7 +478,6 @@ function Twelve() {
   const [open, setOpen] = useState(false)
   const sheetRef = useRef<BottomSheetRef>()
   const [height, setHeight] = useState(0)
-  const [updating, setUpdating] = useState(false)
 
   return (
     <>
@@ -495,24 +494,21 @@ function Twelve() {
         }
         onSpringStart={(event) => {
           console.log('onSpringStart', event, sheetRef.current.height)
-          setUpdating(true)
+          setHeight(sheetRef.current.height)
+          requestAnimationFrame(() => setHeight(sheetRef.current.height))
+          if (event.type === 'OPEN') {
+            setTimeout(() => setHeight(sheetRef.current.height), 100)
+          }
+        }}
+        onSpringCancel={(event) => {
+          console.log('onSpringCancel', event, sheetRef.current.height)
           setHeight(sheetRef.current.height)
         }}
         onSpringEnd={(event) => {
           console.log('onSpringEnd', event, sheetRef.current.height)
-          setUpdating(false)
           setHeight(sheetRef.current.height)
         }}
-        footer={
-          <div className="w-full text-center">
-            Height:{' '}
-            {updating ? (
-              <del key="height">{height}</del>
-            ) : (
-              <span key="height">{height}</span>
-            )}
-          </div>
-        }
+        footer={<div className="w-full text-center">Height: {height}</div>}
       >
         <SheetContent>
           <Expandable>

src/BottomSheet.tsx

@@ -415,6 +415,9 @@ export const BottomSheet = React.forwardRef<
           },
         })
       },
+      get height() {
+        return heightRef.current
+      },
     }),
     [send]
   )

src/types.ts

@@ -151,4 +151,10 @@ export interface RefHandles {
     numberOrCallback: number | ((state: defaultSnapProps) => number),
     options?: { source?: string; velocity?: number }
   ) => void
+
+  /**
+   * Returns the current snap point, in other words the height.
+   * It's update lifecycle with events are onSpringStart and onSpringCancel will give you the old value, while onSpringEnd will give you the current one.
+   */
+  height: number
 }