nesting support

src/components/Dialog/index.tsx

@@ -29,6 +29,26 @@ 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,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const ref = React.useRef<BlueskyBottomSheetView>(null)
@@ -93,26 +113,24 @@ export function Outer({
   const context = React.useMemo(() => ({close}), [close])
 
   return (
-    <Portal>
-      <Context.Provider value={context}>
-        <BlueskyBottomSheetView
-          // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
-          ref={ref}
-          topInset={30}
-          bottomInset={insets.bottom}
-          onStateChange={e => {
-            if (e.nativeEvent.state === 'closed') {
-              onCloseAnimationComplete()
-            }
-          }}
-          cornerRadius={20}
-          {...nativeOptions}>
-          <View testID={testID} style={[t.atoms.bg]}>
-            {children}
-          </View>
-        </BlueskyBottomSheetView>
-      </Context.Provider>
-    </Portal>
+    <Context.Provider value={context}>
+      <BlueskyBottomSheetView
+        // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
+        ref={ref}
+        topInset={30}
+        bottomInset={insets.bottom}
+        onStateChange={e => {
+          if (e.nativeEvent.state === 'closed') {
+            onCloseAnimationComplete()
+          }
+        }}
+        cornerRadius={20}
+        {...nativeOptions}>
+        <View testID={testID} style={[t.atoms.bg]}>
+          {children}
+        </View>
+      </BlueskyBottomSheetView>
+    </Context.Provider>
   )
 }
 

src/components/Prompt.tsx

@@ -4,6 +4,7 @@ import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/compon
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {isNative} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {ButtonColor, ButtonText} from '#/components/Button'
@@ -27,9 +28,11 @@ export function Outer({
   children,
   control,
   testID,
+  withoutPortal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogControlProps
   testID?: string
+  withoutPortal?: boolean
 }>) {
   const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
@@ -40,8 +43,11 @@ export function Outer({
     [titleId, descriptionId],
   )
 
+  const Wrapper =
+    withoutPortal && isNative ? Dialog.OuterWithoutPortal : Dialog.Outer
+
   return (
-    <Dialog.Outer control={control} testID={testID}>
+    <Wrapper control={control} testID={testID}>
       <Context.Provider value={context}>
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
@@ -52,7 +58,7 @@ export function Outer({
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>
-    </Dialog.Outer>
+    </Wrapper>
   )
 }
 
@@ -181,6 +187,7 @@ export function Basic({
   onConfirm,
   confirmButtonColor,
   showCancel = true,
+  withoutPortal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogOuterProps['control']
   title: string
@@ -197,9 +204,13 @@ export function Basic({
   onConfirm: (e: PressableEvent) => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
+  withoutPortal?: boolean
 }>) {
   return (
-    <Outer control={control} testID="confirmModal">
+    <Outer
+      control={control}
+      testID="confirmModal"
+      withoutPortal={withoutPortal}>
       <TitleText>{title}</TitleText>
       <DescriptionText>{description}</DescriptionText>
       <Actions>

src/view/com/composer/Composer.tsx

@@ -861,6 +861,7 @@ export const ComposePost = ({
         onConfirm={onClose}
         confirmButtonCta={_(msg`Discard`)}
         confirmButtonColor="negative"
+        withoutPortal={true}
       />
     </KeyboardAvoidingView>
   )