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,7 +113,6 @@ 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!*/
@@ -112,7 +131,6 @@ export function Outer({
         </View>
       </BlueskyBottomSheetView>
     </Context.Provider>
-    </Portal>
   )
 }
 

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>
   )