Fix 1405 handle android back button in composer (#1446)

* handle android back button in composer

* improve backHandler error handling

* simplify composer onClose functionality

src/lib/routes/back-handler.ts

@@ -1,8 +1,19 @@
+import {isAndroid} from 'platform/detection'
 import {BackHandler} from 'react-native'
 import {RootStoreModel} from 'state/index'
 
 export function init(store: RootStoreModel) {
-  BackHandler.addEventListener('hardwareBackPress', () => {
+  // only register back handler on android, otherwise it throws an error
-    return store.shell.closeAnyActiveElement()
+  if (isAndroid) {
-  })
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        return store.shell.closeAnyActiveElement()
+      },
+    )
+    return () => {
+      backHandler.remove()
+    }
+  }
+  return () => {}
 }

src/view/com/composer/Composer.tsx

@@ -2,6 +2,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
+  BackHandler,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
@@ -49,14 +50,10 @@ import {SelectLangBtn} from './select-language/SelectLangBtn'
 import {EmojiPickerButton} from './text-input/web/EmojiPicker.web'
 import {insertMentionAt} from 'lib/strings/mention-manip'
 
-type Props = ComposerOpts & {
+type Props = ComposerOpts
-  onClose: () => void
-}
-
 export const ComposePost = observer(function ComposePost({
   replyTo,
   onPost,
-  onClose,
   quote: initQuote,
   mention: initMention,
 }: Props) {
@@ -90,6 +87,9 @@ export const ComposePost = observer(function ComposePost({
   const [labels, setLabels] = useState<string[]>([])
   const [suggestedLinks, setSuggestedLinks] = useState<Set<string>>(new Set())
   const gallery = useMemo(() => new GalleryModel(store), [store])
+  const onClose = useCallback(() => {
+    store.shell.closeComposer()
+  }, [store])
 
   const autocompleteView = useMemo<UserAutocompleteModel>(
     () => new UserAutocompleteModel(store),
@@ -129,6 +129,20 @@ export const ComposePost = observer(function ComposePost({
       onClose()
     }
   }, [store, onClose, graphemeLength, gallery])
+  // android back button
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        onPressCancel()
+        return true
+      },
+    )
+
+    return () => {
+      backHandler.remove()
+    }
+  }, [onPressCancel])
 
   // initial setup
   useEffect(() => {

src/view/shell/Composer.tsx

@@ -11,7 +11,6 @@ export const Composer = observer(function ComposerImpl({
   winHeight,
   replyTo,
   onPost,
-  onClose,
   quote,
   mention,
 }: {
@@ -19,7 +18,6 @@ export const Composer = observer(function ComposerImpl({
   winHeight: number
   replyTo?: ComposerOpts['replyTo']
   onPost?: ComposerOpts['onPost']
-  onClose: () => void
   quote?: ComposerOpts['quote']
   mention?: ComposerOpts['mention']
 }) {
@@ -64,7 +62,6 @@ export const Composer = observer(function ComposerImpl({
       <ComposePost
         replyTo={replyTo}
         onPost={onPost}
-        onClose={onClose}
         quote={quote}
         mention={mention}
       />

src/view/shell/Composer.web.tsx

@@ -13,7 +13,6 @@ export const Composer = observer(function ComposerImpl({
   replyTo,
   quote,
   onPost,
-  onClose,
   mention,
 }: {
   active: boolean
@@ -21,7 +20,6 @@ export const Composer = observer(function ComposerImpl({
   replyTo?: ComposerOpts['replyTo']
   quote: ComposerOpts['quote']
   onPost?: ComposerOpts['onPost']
-  onClose: () => void
   mention?: ComposerOpts['mention']
 }) {
   const pal = usePalette('default')
@@ -47,7 +45,6 @@ export const Composer = observer(function ComposerImpl({
           replyTo={replyTo}
           quote={quote}
           onPost={onPost}
-          onClose={onClose}
           mention={mention}
         />
       </View>

src/view/shell/index.tsx

@@ -44,7 +44,10 @@ const ShellInner = observer(function ShellInnerImpl() {
   )
   const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
   React.useEffect(() => {
-    backHandler.init(store)
+    const listener = backHandler.init(store)
+    return () => {
+      listener()
+    }
   }, [store])
 
   return (
@@ -68,7 +71,6 @@ const ShellInner = observer(function ShellInnerImpl() {
       </View>
       <Composer
         active={store.shell.isComposerActive}
-        onClose={() => store.shell.closeComposer()}
         winHeight={winDim.height}
         replyTo={store.shell.composerOpts?.replyTo}
         onPost={store.shell.composerOpts?.onPost}

src/view/shell/index.web.tsx

@@ -48,7 +48,6 @@ const ShellInner = observer(function ShellInnerImpl() {
       )}
       <Composer
         active={store.shell.isComposerActive}
-        onClose={() => store.shell.closeComposer()}
         winHeight={0}
         replyTo={store.shell.composerOpts?.replyTo}
         quote={store.shell.composerOpts?.quote}