trigger onPressCancel on modal cancel

src/view/com/composer/Composer.tsx

@@ -1,7 +1,13 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {
   ActivityIndicator,
-  BackHandler,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
@@ -73,6 +79,10 @@ import {TextInput, TextInputRef} from './text-input/TextInput'
 import {ThreadgateBtn} from './threadgate/ThreadgateBtn'
 import {useExternalLinkFetch} from './useExternalLinkFetch'
 
+type CancelRef = {
+  onPressCancel: () => void
+}
+
 type Props = ComposerOpts
 export const ComposePost = observer(function ComposePost({
   replyTo,
@@ -82,7 +92,10 @@ export const ComposePost = observer(function ComposePost({
   openPicker,
   text: initText,
   imageUris: initImageUris,
-}: Props) {
+  cancelRef,
+}: Props & {
+  cancelRef: React.RefObject<CancelRef>
+}) {
   const {currentAccount} = useSession()
   const {getAgent} = useAgent()
   const {data: currentProfile} = useProfileQuery({did: currentAccount!.did})
@@ -161,23 +174,8 @@ export const ComposePost = observer(function ComposePost({
     discardPromptControl,
     onClose,
   ])
-  // android back button
-  useEffect(() => {
-    if (!isAndroid) {
-      return
-    }
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        onPressCancel()
-        return true
-      },
-    )
 
-    return () => {
+  useImperativeHandle(cancelRef, () => ({onPressCancel}))
-      backHandler.remove()
-    }
-  }, [onPressCancel])
 
   // listen to escape key on desktop web
   const onEscape = useCallback(
@@ -563,6 +561,10 @@ export const ComposePost = observer(function ComposePost({
   )
 })
 
+export function useComposerCancelRef() {
+  return useRef<CancelRef>(null)
+}
+
 const styles = StyleSheet.create({
   outer: {
     flexDirection: 'column',

src/view/shell/Composer.tsx

@@ -3,12 +3,17 @@ import {Modal} from 'react-native'
 import {observer} from 'mobx-react-lite'
 
 import {useComposerState} from 'state/shell/composer'
-import {ComposePost} from '../com/composer/Composer'
+import {
+  Outlet as PortalOutlet,
+  Provider as PortalProvider,
+} from '#/components/Portal'
+import {ComposePost, useComposerCancelRef} from '../com/composer/Composer'
 
 export const Composer = observer(function ComposerImpl({}: {
   winHeight: number
 }) {
   const state = useComposerState()
+  const ref = useComposerCancelRef()
 
   return (
     <Modal
@@ -16,15 +21,20 @@ export const Composer = observer(function ComposerImpl({}: {
       accessibilityViewIsModal
       visible={!!state}
       presentationStyle="formSheet"
-      animationType="slide">
+      animationType="slide"
-      <ComposePost
+      onRequestClose={() => ref.current?.onPressCancel()}>
-        replyTo={state?.replyTo}
+      <PortalProvider>
-        onPost={state?.onPost}
+        <ComposePost
-        quote={state?.quote}
+          cancelRef={ref}
-        mention={state?.mention}
+          replyTo={state?.replyTo}
-        text={state?.text}
+          onPost={state?.onPost}
-        imageUris={state?.imageUris}
+          quote={state?.quote}
-      />
+          mention={state?.mention}
+          text={state?.text}
+          imageUris={state?.imageUris}
+        />
+        <PortalOutlet />
+      </PortalProvider>
     </Modal>
   )
 })