fix(sheet): automatically add padding bottom to scrollable sheets to …

…avoid bottom content clipping off the screen
tamagui · Dec 24, 2022 · 4918ca2 · 4918ca2
1 parent fc154af
commit 4918ca2
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 7 deletions.
diff --git a/apps/sandbox/Sandbox.tsx b/apps/sandbox/Sandbox.tsx
@@ -1,6 +1,7 @@
 // import '@tamagui/core/reset.css'
 import '@tamagui/polyfill-dev'
 
+import { SheetDemo } from '@tamagui/demos'
 import { useState } from 'react'
 import { OpaqueColorValue } from 'react-native'
 import {
@@ -96,6 +97,8 @@ export const Sandbox = () => {
 
           {/* <DialogDemo /> */}
 
+          <SheetDemo />
+
           <Button
             onPress={async () => {
               await import('./SandboxSecondPage')

diff --git a/next.md b/next.md
@@ -39,7 +39,6 @@
 1.0 potentially:
 
 - `tamagui` cli basic version
-- #quest-portal - scroll view seems to extend beyond the bottom of the screen making it impossible to access the items at the bottom
 
 ---
 
@@ -83,6 +82,7 @@
 
 inbox
 
+- sheets can be way faster, they listen for layout/windowdimensions and re-render constnatly, but whe closed that could be ignored, just needs one level more of wrapping and react memo stuff
 - prebuild option
   - de-dupes css
   - fixes next.js next load css

diff --git a/packages/demos/src/SheetDemo.tsx b/packages/demos/src/SheetDemo.tsx
@@ -63,7 +63,7 @@ function InnerSheet(props: SheetProps) {
           <H1>Hello world</H1>
           <H2>You can scroll me</H2>
           {[1, 2, 3].map((i) => (
-            <Paragraph key={i} size="$8">
+            <Paragraph key={i} size="$10">
               Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad
               pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation
               ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat

diff --git a/packages/select/src/SelectContent.tsx b/packages/select/src/SelectContent.tsx
@@ -26,7 +26,10 @@ export const SelectContent = ({
   const touch = useIsTouchDevice()
 
   if (showSheet) {
-    return context.open ? contents : null
+    if (!context.open) {
+      return null
+    }
+    return <>{contents}</>
   }
 
   return (

diff --git a/packages/select/src/SelectViewport.native.tsx b/packages/select/src/SelectViewport.native.tsx
@@ -1,5 +1,5 @@
 import { AdaptParentContext } from '@tamagui/adapt'
-import { Theme, useThemeName } from '@tamagui/core'
+import { Stack, Theme, useThemeName } from '@tamagui/core'
 import { PortalItem } from '@tamagui/portal'
 import * as React from 'react'
 

diff --git a/packages/sheet/src/Sheet.tsx b/packages/sheet/src/Sheet.tsx
@@ -581,6 +581,7 @@ const SheetImplementation = themeable(
         <SheetProvider
           modal={modal}
           contentRef={contentRef}
+          frameSize={frameSize}
           dismissOnOverlayPress={dismissOnOverlayPress}
           dismissOnSnapToBottom={dismissOnSnapToBottom}
           open={open}

diff --git a/packages/sheet/src/SheetContext.tsx b/packages/sheet/src/SheetContext.tsx
@@ -14,6 +14,7 @@ type SheetContextValue = Required<
   contentRef: React.RefObject<TamaguiElement>
   dismissOnSnapToBottom: boolean
   scrollBridge: ScrollBridge
+  frameSize: number
   modal: boolean
 }
 

diff --git a/packages/sheet/src/SheetScrollView.tsx b/packages/sheet/src/SheetScrollView.tsx
@@ -1,4 +1,4 @@
-import { TamaguiElement, composeRefs } from '@tamagui/core'
+import { Stack, TamaguiElement, composeRefs } from '@tamagui/core'
 import { ScrollView, ScrollViewProps } from '@tamagui/scroll-view'
 import { forwardRef, useMemo, useRef, useState } from 'react'
 import { ScrollView as RNScrollView } from 'react-native'
@@ -16,10 +16,21 @@ const SHEET_SCROLL_VIEW_NAME = 'SheetScrollView'
 
 export const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(
   ({ __scopeSheet, children, ...props }: SheetScopedProps<ScrollViewProps>, ref) => {
-    const { scrollBridge } = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet)
+    const { scrollBridge, position, snapPoints, frameSize, open } = useSheetContext(
+      SHEET_SCROLL_VIEW_NAME,
+      __scopeSheet
+    )
     const [scrollEnabled, setScrollEnabled_] = useState(true)
     const scrollRef = useRef<RNScrollView | null>(null)
 
+    const percentOpened = snapPoints[position] ?? 0
+    const [percentToPadBottom, setPercentToPadBottom] = useState(0)
+
+    const next = 100 - percentOpened
+    if (open && next !== percentToPadBottom) {
+      setPercentToPadBottom(next)
+    }
+
     const setScrollEnabled = (next: boolean) => {
       scrollRef.current?.setNativeProps?.({
         scrollEnabled: next,
@@ -108,7 +119,8 @@ export const SheetScrollView = forwardRef<TamaguiElement, ScrollViewProps>(
         {...props}
       >
         {useMemo(() => children, [children])}
+        <Stack height={(percentToPadBottom / 100) * frameSize} width={0} />
       </ScrollView>
     )
-  },
+  }
 )
diff --git a/packages/sheet/types/SheetContext.d.ts b/packages/sheet/types/SheetContext.d.ts
@@ -8,6 +8,7 @@ type SheetContextValue = Required<Pick<SheetProps, 'open' | 'position' | 'snapPo
     contentRef: React.RefObject<TamaguiElement>;
     dismissOnSnapToBottom: boolean;
     scrollBridge: ScrollBridge;
+    frameSize: number;
     modal: boolean;
 };
 export declare const createSheetContext: <ContextValueType extends object | null>(rootComponentName: string, defaultContext?: ContextValueType | undefined) => readonly [{
@@ -25,6 +26,7 @@ export declare const SheetProvider: {
         contentRef: React.RefObject<TamaguiElement>;
         dismissOnSnapToBottom: boolean;
         scrollBridge: ScrollBridge;
+        frameSize: number;
         modal: boolean;
     } & {
         scope: import("@tamagui/create-context").Scope<SheetContextValue>;