Revert to old modal on android (#4458)

* revert to old modal on android

* close alf dialogs before closing composer

* Try to fix white area

* Use hook

* Fix Back button

* oops

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

1 files changed, 27 insertions, 40 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 5bcac2e67..e8ea5189f 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -8,6 +8,7 @@ import React, {
 } from 'react'
 import {
   ActivityIndicator,
+  BackHandler,
   Keyboard,
   LayoutChangeEvent,
   StyleSheet,
@@ -17,7 +18,7 @@ import {
 import {
   KeyboardAvoidingView,
   KeyboardStickyView,
-  useKeyboardContext,
+  useKeyboardController,
 } from 'react-native-keyboard-controller'
 import Animated, {
   interpolateColor,
@@ -42,6 +43,7 @@ import {LikelyType} from '#/lib/link-meta/link-meta'
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {emitPostCreated} from '#/state/events'
+import {useModalControls} from '#/state/modals'
 import {useModals} from '#/state/modals'
 import {useRequireAltTextEnabled} from '#/state/preferences'
 import {
@@ -108,9 +110,7 @@ export const ComposePost = observer(function ComposePost({
   text: initText,
   imageUris: initImageUris,
   cancelRef,
-  isModalReady,
 }: Props & {
-  isModalReady: boolean
   cancelRef?: React.RefObject<CancelRef>
 }) {
   const {currentAccount} = useSession()
@@ -128,11 +128,12 @@ export const ComposePost = observer(function ComposePost({
   const textInput = useRef<TextInputRef>(null)
   const discardPromptControl = Prompt.usePromptControl()
   const {closeAllDialogs} = useDialogStateControlContext()
+  const {closeAllModals} = useModalControls()
   const t = useTheme()
 
   // Disable this in the composer to prevent any extra keyboard height being applied.
   // See https://github.com/bluesky-social/social-app/pull/4399
-  const {setEnabled} = useKeyboardContext()
+  const {setEnabled} = useKeyboardController()
   React.useEffect(() => {
     if (!isAndroid) return
     setEnabled(false)
@@ -180,6 +181,7 @@ export const ComposePost = observer(function ComposePost({
   const insets = useSafeAreaInsets()
   const viewStyles = useMemo(
     () => ({
+      paddingTop: isAndroid ? insets.top : 0,
       paddingBottom:
         isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
     }),
@@ -205,6 +207,26 @@ export const ComposePost = observer(function ComposePost({
 
   useImperativeHandle(cancelRef, () => ({onPressCancel}))
 
+  // On Android, pressing Back should ask confirmation.
+  useEffect(() => {
+    if (!isAndroid) {
+      return
+    }
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        if (closeAllDialogs() || closeAllModals()) {
+          return true
+        }
+        onPressCancel()
+        return true
+      },
+    )
+    return () => {
+      backHandler.remove()
+    }
+  }, [onPressCancel, closeAllDialogs, closeAllModals])
+
   // listen to escape key on desktop web
   const onEscape = useCallback(
     (e: KeyboardEvent) => {
@@ -408,37 +430,6 @@ export const ComposePost = observer(function ComposePost({
     bottomBarAnimatedStyle,
   } = useAnimatedBorders()
 
-  // Backup focus on android, if the keyboard *still* refuses to show
-  useEffect(() => {
-    if (!isAndroid) return
-    if (!isModalReady) return
-
-    function tryFocus() {
-      if (!Keyboard.isVisible()) {
-        textInput.current?.blur()
-        textInput.current?.focus()
-      }
-    }
-
-    tryFocus()
-    // Retry with enough gap to avoid interrupting the previous attempt.
-    // Unfortunately we don't know which attempt will succeed.
-    const retryInterval = setInterval(tryFocus, 500)
-
-    function stopTrying() {
-      clearInterval(retryInterval)
-    }
-
-    // Deactivate this fallback as soon as anything happens.
-    const sub1 = Keyboard.addListener('keyboardDidShow', stopTrying)
-    const sub2 = Keyboard.addListener('keyboardDidHide', stopTrying)
-    return () => {
-      clearInterval(retryInterval)
-      sub1.remove()
-      sub2.remove()
-    }
-  }, [isModalReady])
-
   return (
     <>
       <KeyboardAvoidingView
@@ -567,11 +558,7 @@ export const ComposePost = observer(function ComposePost({
                 ref={textInput}
                 richtext={richtext}
                 placeholder={selectTextInputPlaceholder}
-                // fixes autofocus on android
-                key={
-                  isAndroid ? (isModalReady ? 'ready' : 'animating') : 'static'
-                }
-                autoFocus={isAndroid ? isModalReady : true}
+                autoFocus
                 setRichText={setRichText}
                 onPhotoPasted={onPhotoPasted}
                 onPressPublish={onPressPublish}