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

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

src/view/com/composer/Composer.tsx

···
 import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
+  BackHandler,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
···
 import {EmojiPickerButton} from './text-input/web/EmojiPicker.web'
 import {insertMentionAt} from 'lib/strings/mention-manip'
 
-type Props = ComposerOpts & {
-  onClose: () => void
-}
-
+type Props = ComposerOpts
 export const ComposePost = observer(function ComposePost({
   replyTo,
   onPost,
-  onClose,
   quote: initQuote,
   mention: initMention,
 }: Props) {
···
   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),
···
       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

···
   winHeight,
   replyTo,
   onPost,
-  onClose,
   quote,
   mention,
 }: {
···
   winHeight: number
   replyTo?: ComposerOpts['replyTo']
   onPost?: ComposerOpts['onPost']
-  onClose: () => void
   quote?: ComposerOpts['quote']
   mention?: ComposerOpts['mention']
 }) {
···
       <ComposePost
         replyTo={replyTo}
         onPost={onPost}
-        onClose={onClose}
         quote={quote}
         mention={mention}
       />

src/view/shell/Composer.web.tsx

···
   replyTo,
   quote,
   onPost,
-  onClose,
   mention,
 }: {
   active: boolean
···
   replyTo?: ComposerOpts['replyTo']
   quote: ComposerOpts['quote']
   onPost?: ComposerOpts['onPost']
-  onClose: () => void
   mention?: ComposerOpts['mention']
 }) {
   const pal = usePalette('default')
···
           replyTo={replyTo}
           quote={quote}
           onPost={onPost}
-          onClose={onClose}
           mention={mention}
         />
       </View>

src/view/shell/index.tsx

···
   )
   const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
   React.useEffect(() => {
-    backHandler.init(store)
+    const listener = backHandler.init(store)
+    return () => {
+      listener()
+    }
   }, [store])
 
   return (
···
       </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

···
       )}
       <Composer
         active={store.shell.isComposerActive}
-        onClose={() => store.shell.closeComposer()}
         winHeight={0}
         replyTo={store.shell.composerOpts?.replyTo}
         quote={store.shell.composerOpts?.quote}