Scrollable dialogs

src/App.native.tsx

@@ -41,10 +41,7 @@ import {
 import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import * as persisted from '#/state/persisted'
 import {Splash} from '#/Splash'
-import {
+import {Provider as PortalProvider} from '#/components/Portal'
-  Provider as PortalProvider,
-  Outlet as PortalOutlet,
-} from '#/components/Portal'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -80,7 +77,6 @@ function InnerApp() {
                     <GestureHandlerRootView style={s.h100pct}>
                       <TestCtrls />
                       <Shell />
-                      <PortalOutlet />
                     </GestureHandlerRootView>
                   </RootSiblingParent>
                 </ThemeProvider>

src/App.web.tsx

@@ -30,10 +30,7 @@ import {
 } from 'state/session'
 import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import * as persisted from '#/state/persisted'
-import {
+import {Provider as PortalProvider} from '#/components/Portal'
-  Provider as PortalProvider,
-  Outlet as PortalOutlet,
-} from '#/components/Portal'
 
 function InnerApp() {
   const {isInitialLoad, currentAccount} = useSession()
@@ -62,7 +59,6 @@ function InnerApp() {
               <RootSiblingParent>
                 <SafeAreaProvider>
                   <Shell />
-                  <PortalOutlet />
                 </SafeAreaProvider>
               </RootSiblingParent>
               <ToastContainer />

src/components/Dialog/index.tsx

@@ -2,6 +2,7 @@ import React, {useImperativeHandle} from 'react'
 import {View, Dimensions} from 'react-native'
 import BottomSheet, {
   BottomSheetBackdrop,
+  BottomSheetScrollView,
   BottomSheetView,
 } from '@gorhom/bottom-sheet'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
@@ -16,13 +17,6 @@ import {
 } from '#/components/Dialog/types'
 import {Context} from '#/components/Dialog/context'
 
-/**
- * Exports
- */
-export {
-  BottomSheetScrollView as ScrollView,
-  BottomSheetTextInput as TextInput,
-} from '@gorhom/bottom-sheet'
 export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 
@@ -34,6 +28,8 @@ export function Outer({
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const sheet = React.useRef<BottomSheet>(null)
+  const sheetOptions = nativeOptions?.sheet || {}
+  const hasSnapPoints = !!sheetOptions.snapPoints
 
   const open = React.useCallback<DialogControlProps['open']>((i = 0) => {
     sheet.current?.snapToIndex(i)
@@ -58,15 +54,15 @@ export function Outer({
   return (
     <Portal>
       <BottomSheet
-        enableDynamicSizing
+        enableDynamicSizing={!hasSnapPoints}
         enablePanDownToClose
         keyboardBehavior="interactive"
         android_keyboardInputMode="adjustResize"
         keyboardBlurBehavior="restore"
-        {...(nativeOptions?.sheet || {})}
+        {...sheetOptions}
         ref={sheet}
         index={-1}
-        backgroundStyle={{backgroundColor: 'transparent'}}
+        backgroundStyle={{backgroundColor: t.atoms.bg.backgroundColor}}
         backdropComponent={props => (
           <BottomSheetBackdrop
             appearsOnIndex={0}
@@ -77,23 +73,21 @@ export function Outer({
         handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
         handleStyle={{display: 'none'}}
         onClose={onClose}>
-        <BottomSheetView>
+        <Context.Provider value={context}>
-          <Context.Provider value={context}>
+          <View
-            <View
+            style={[
-              style={[
+              a.absolute,
-                a.absolute,
+              a.inset_0,
-                a.inset_0,
+              t.atoms.bg,
-                t.atoms.bg,
+              {
-                {
+                borderTopLeftRadius: 40,
-                  borderTopLeftRadius: 40,
+                borderTopRightRadius: 40,
-                  borderTopRightRadius: 40,
+                height: Dimensions.get('window').height * 2,
-                  height: Dimensions.get('window').height * 2,
+              },
-                },
+            ]}
-              ]}
+          />
-            />
+          {children}
-            {children}
+        </Context.Provider>
-          </Context.Provider>
-        </BottomSheetView>
       </BottomSheet>
     </Portal>
   )
@@ -103,7 +97,7 @@ export function Outer({
 export function Inner(props: DialogInnerProps) {
   const insets = useSafeAreaInsets()
   return (
-    <View
+    <BottomSheetView
       style={[
         a.p_lg,
         a.pt_3xl,
@@ -114,7 +108,26 @@ export function Inner(props: DialogInnerProps) {
         },
       ]}>
       {props.children}
-    </View>
+    </BottomSheetView>
+  )
+}
+
+export function ScrollableInner(props: DialogInnerProps) {
+  const insets = useSafeAreaInsets()
+  return (
+    <BottomSheetScrollView
+      style={[
+        a.flex_1, // main diff is this
+        a.p_lg,
+        a.pt_3xl,
+        {
+          borderTopLeftRadius: 40,
+          borderTopRightRadius: 40,
+          paddingBottom: insets.bottom + a.pb_5xl.paddingBottom,
+        },
+      ]}>
+      {props.children}
+    </BottomSheetScrollView>
   )
 }
 
@@ -126,12 +139,13 @@ export function Handle() {
         a.absolute,
         a.rounded_sm,
         a.z_10,
-        t.atoms.bg_contrast_200,
         {
-          top: 12,
+          top: a.pt_lg.paddingTop,
-          width: 50,
+          width: 35,
-          height: 6,
+          height: 4,
           alignSelf: 'center',
+          backgroundColor: t.palette.contrast_900,
+          opacity: 0.5,
         },
       ]}
     />

src/components/Dialog/index.web.tsx

@@ -11,7 +11,6 @@ import {Button} from '#/components/Button'
 import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types'
 import {Context, useDialogContext} from '#/components/Dialog/context'
 
-export {ScrollView, TextInput} from 'react-native'
 export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 
@@ -91,7 +90,7 @@ export function Outer({
                     style={[
                       web(a.fixed),
                       a.inset_0,
-                      t.atoms.bg_contrast_300,
+                      t.atoms.bg_contrast_100,
                       {opacity: 0.8},
                     ]}
                   />
@@ -145,7 +144,7 @@ export function Inner({
           a.border,
           gtMobile ? a.p_xl : a.p_lg,
           t.atoms.bg,
-          {maxWidth: 600, borderColor: t.palette.contrast_300},
+          {maxWidth: 600, borderColor: t.palette.contrast_200},
           ...(Array.isArray(style) ? style : [style || {}]),
         ]}>
         {children}
@@ -154,6 +153,8 @@ export function Inner({
   )
 }
 
+export const ScrollableInner = Inner
+
 export function Handle() {
   return null
 }

src/components/Prompt.tsx

@@ -34,11 +34,12 @@ export function Outer({
   return (
     <Dialog.Outer control={control}>
       <Context.Provider value={context}>
+        <Dialog.Handle />
+
         <Dialog.Inner
           accessibilityLabelledBy={titleId}
           accessibilityDescribedBy={descriptionId}
           style={{width: 'auto', maxWidth: 400}}>
-          <Dialog.Handle />
           {children}
         </Dialog.Inner>
       </Context.Provider>

src/view/screens/Storybook/Dialogs.tsx

@@ -45,15 +45,18 @@ export function Dialogs() {
         </Prompt.Actions>
       </Prompt.Outer>
 
-      <Dialog.Outer control={control}>
+      <Dialog.Outer
-        <Dialog.Inner
+        control={control}
+        nativeOptions={{sheet: {snapPoints: ['90%']}}}>
+        <Dialog.Handle />
+
+        <Dialog.ScrollableInner
           accessibilityLabelledBy="dialog-title"
           accessibilityDescribedBy="dialog-description">
-          <Dialog.Handle />
-
           <View style={[a.relative, a.gap_md, a.w_full]}>
             <H3 nativeID="dialog-title">Dialog</H3>
             <P nativeID="dialog-description">Description</P>
+            <View style={{height: 1000}} />
             <View style={[a.flex_row, a.justify_end]}>
               <Button
                 variant="outline"
@@ -66,7 +69,7 @@ export function Dialogs() {
               </Button>
             </View>
           </View>
-        </Dialog.Inner>
+        </Dialog.ScrollableInner>
       </Dialog.Outer>
     </>
   )

src/view/shell/index.tsx

@@ -28,6 +28,7 @@ import {isAndroid} from 'platform/detection'
 import {useSession} from '#/state/session'
 import {useCloseAnyActiveElement} from '#/state/util'
 import * as notifications from 'lib/notifications/notifications'
+import {Outlet as PortalOutlet} from '#/components/Portal'
 
 function ShellInner() {
   const isDrawerOpen = useIsDrawerOpen()
@@ -94,6 +95,7 @@ function ShellInner() {
       </View>
       <Composer winHeight={winDim.height} />
       <ModalsContainer />
+      <PortalOutlet />
       <Lightbox />
     </>
   )

src/view/shell/index.web.tsx

@@ -15,6 +15,7 @@ import {useAuxClick} from 'lib/hooks/useAuxClick'
 import {t} from '@lingui/macro'
 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useCloseAllActiveElements} from '#/state/util'
+import {Outlet as PortalOutlet} from '#/components/Portal'
 
 function ShellInner() {
   const isDrawerOpen = useIsDrawerOpen()
@@ -41,6 +42,7 @@ function ShellInner() {
       </View>
       <Composer winHeight={0} />
       <ModalsContainer />
+      <PortalOutlet />
       <Lightbox />
       {!isDesktop && isDrawerOpen && (
         <TouchableOpacity