[Sheets] [Pt. 14] Portaling behaviors for nested dialogs

modules/bottom-sheet/src/BottomSheet.types.ts

@@ -28,5 +28,4 @@ export interface BottomSheetViewProps {
   onStateChange?: (
     event: NativeSyntheticEvent<{state: BottomSheetState}>,
   ) => void
-  onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
 }

package.json

@@ -175,7 +175,7 @@
     "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "0.41.2",
     "react-native-ios-context-menu": "^1.15.3",
-    "react-native-keyboard-controller": "^1.12.1",
+    "react-native-keyboard-controller": "^1.14.0",
     "react-native-mmkv": "^2.12.2",
     "react-native-pager-view": "6.2.3",
     "react-native-picker-select": "^9.1.3",

src/components/Dialog/index.tsx

@@ -1,6 +1,7 @@
 import React, {useImperativeHandle} from 'react'
 import {StyleProp, TextInput, View, ViewStyle} from 'react-native'
 import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler'
+import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
 import {logger} from '#/logger'
@@ -15,7 +16,7 @@ import {
   DialogOuterProps,
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
-import {Portal} from '#/components/Portal'
+import {Portal as DefaultPortal} from '#/components/Portal'
 import {
   BottomSheetSnapPoint,
   BottomSheetView,
@@ -33,26 +34,7 @@ export function Outer({
   onClose,
   nativeOptions,
   testID,
-}: React.PropsWithChildren<DialogOuterProps>) {
-  return (
-    <Portal>
-      <OuterWithoutPortal
-        control={control}
-        onClose={onClose}
-        nativeOptions={nativeOptions}
-        testID={testID}>
-        {children}
-      </OuterWithoutPortal>
-    </Portal>
-  )
-}
-
-export function OuterWithoutPortal({
-  children,
-  control,
-  onClose,
-  nativeOptions,
-  testID,
+  Portal = DefaultPortal,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const ref = React.useRef<BottomSheetView>(null)
@@ -118,26 +100,28 @@ export function OuterWithoutPortal({
   const Wrapper = isIOS ? View : GestureHandlerRootView
 
   return (
-    <Context.Provider value={context}>
-      <BottomSheetView
-        ref={ref}
-        topInset={30}
-        bottomInset={insets.bottom}
-        onSnapPointChange={e => {
-          setSnapPoint(e.nativeEvent.snapPoint)
-        }}
-        onStateChange={e => {
-          if (e.nativeEvent.state === 'closed') {
-            onCloseAnimationComplete()
-          }
-        }}
-        cornerRadius={20}
-        {...nativeOptions}>
-        <Wrapper testID={testID} style={[t.atoms.bg]}>
-          {children}
-        </Wrapper>
-      </BottomSheetView>
-    </Context.Provider>
+    <Portal>
+      <Context.Provider value={context}>
+        <BottomSheetView
+          ref={ref}
+          topInset={30}
+          bottomInset={insets.bottom}
+          onSnapPointChange={e => {
+            setSnapPoint(e.nativeEvent.snapPoint)
+          }}
+          onStateChange={e => {
+            if (e.nativeEvent.state === 'closed') {
+              onCloseAnimationComplete()
+            }
+          }}
+          cornerRadius={20}
+          {...nativeOptions}>
+          <Wrapper testID={testID} style={[t.atoms.bg]}>
+            {children}
+          </Wrapper>
+        </BottomSheetView>
+      </Context.Provider>
+    </Portal>
   )
 }
 
@@ -162,13 +146,15 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
     const insets = useSafeAreaInsets()
     const {nativeSnapPoint} = useDialogContext()
     return (
-      <ScrollView
+      <KeyboardAwareScrollView
         style={[a.px_xl, style]}
         ref={ref}
-        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}>
+        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
+        bottomOffset={30}
+        ScrollViewComponent={ScrollView}>
         {children}
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-      </ScrollView>
+      </KeyboardAwareScrollView>
     )
   },
 )

src/components/Dialog/types.ts

@@ -6,6 +6,7 @@ import type {
 } from 'react-native'
 
 import {ViewStyleProp} from '#/alf'
+import {PortalComponent} from '#/components/Portal'
 import {BottomSheetViewProps} from '../../../modules/bottom-sheet'
 import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
 
@@ -58,6 +59,7 @@ export type DialogOuterProps = {
   nativeOptions?: Omit<BottomSheetViewProps, 'children'>
   webOptions?: {}
   testID?: string
+  Portal?: PortalComponent
 }
 
 type DialogInnerPropsBase<T> = React.PropsWithChildren<ViewStyleProp> & T

src/components/Portal.tsx

@@ -12,6 +12,8 @@ type ComponentMap = {
   [id: string]: Component
 }
 
+export type PortalComponent = ({children}: {children?: React.ReactNode}) => null
+
 export function createPortalGroup() {
   const Context = React.createContext<ContextType>({
     outlet: null,

src/components/Prompt.tsx

@@ -3,10 +3,10 @@ import {GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {isNative} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
 export {
@@ -26,11 +26,11 @@ export function Outer({
   children,
   control,
   testID,
-  withoutPortal,
+  Portal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogControlProps
   testID?: string
-  withoutPortal?: boolean
+  Portal?: PortalComponent
 }>) {
   const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
@@ -41,11 +41,8 @@ export function Outer({
     [titleId, descriptionId],
   )
 
-  const Wrapper =
-    withoutPortal && isNative ? Dialog.OuterWithoutPortal : Dialog.Outer
-
   return (
-    <Wrapper control={control} testID={testID}>
+    <Dialog.Outer control={control} testID={testID} Portal={Portal}>
       <Context.Provider value={context}>
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
@@ -56,7 +53,7 @@ export function Outer({
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>
-    </Wrapper>
+    </Dialog.Outer>
   )
 }
 
@@ -185,7 +182,7 @@ export function Basic({
   onConfirm,
   confirmButtonColor,
   showCancel = true,
-  withoutPortal,
+  Portal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogOuterProps['control']
   title: string
@@ -202,13 +199,10 @@ export function Basic({
   onConfirm: (e: GestureResponderEvent) => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
-  withoutPortal?: boolean
+  Portal?: PortalComponent
 }>) {
   return (
-    <Outer
-      control={control}
-      testID="confirmModal"
-      withoutPortal={withoutPortal}>
+    <Outer control={control} testID="confirmModal" Portal={Portal}>
       <TitleText>{title}</TitleText>
       <DescriptionText>{description}</DescriptionText>
       <Actions>

src/components/ReportDialog/index.tsx

@@ -13,7 +13,6 @@ import {AppBskyLabelerDefs} from '@atproto/api'
 import {atoms as a} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
-import {useOnKeyboardDidShow} from '#/components/hooks/useOnKeyboard'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {SelectLabelerView} from './SelectLabelerView'
@@ -39,9 +38,6 @@ function ReportDialogInner(props: ReportDialogProps) {
   const isLoading = useDelayedLoading(500, isLabelerLoading)
 
   const ref = React.useRef<ScrollView>(null)
-  useOnKeyboardDidShow(() => {
-    ref.current?.scrollToEnd({animated: true})
-  })
 
   return (
     <Dialog.ScrollableInner label={_(msg`Report dialog`)} ref={ref}>