Composer - make sure android keyboard opens (#4390)

* keep trying to open keyboard until it's open

* limit number of retries

* keep the original 50ms one as well

* Proper fix!

* disable autoFocus if not visible

* Reset derived state

* Revert "Reset derived state"

This reverts commit 71f57391ae78bac717282e699d1b83cbd87771eb.

* Use derived state pattern

* Rename for clarity

---------

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

src/view/com/composer/Composer.tsx

@@ -107,7 +107,9 @@ export const ComposePost = observer(function ComposePost({
   text: initText,
   imageUris: initImageUris,
   cancelRef,
+  isModalReady,
 }: Props & {
+  isModalReady: boolean
   cancelRef?: React.RefObject<CancelRef>
 }) {
   const {currentAccount} = useSession()
@@ -155,12 +157,6 @@ export const ComposePost = observer(function ComposePost({
   const [labels, setLabels] = useState<string[]>([])
   const [threadgate, setThreadgate] = useState<ThreadgateSetting[]>([])
 
-  React.useEffect(() => {
-    if (!isAndroid) return
-    const id = setTimeout(() => textInput.current?.focus(), 100)
-    return () => clearTimeout(id)
-  }, [])
-
   const gallery = useMemo(
     () => new GalleryModel(initImageUris),
     [initImageUris],
@@ -181,9 +177,7 @@ export const ComposePost = observer(function ComposePost({
   const onPressCancel = useCallback(() => {
     if (graphemeLength > 0 || !gallery.isEmpty || extGif) {
       closeAllDialogs()
-      if (Keyboard) {
       Keyboard.dismiss()
-      }
       discardPromptControl.open()
     } else {
       onClose()
@@ -524,7 +518,11 @@ export const ComposePost = observer(function ComposePost({
                 ref={textInput}
                 richtext={richtext}
                 placeholder={selectTextInputPlaceholder}
-                autoFocus={!isAndroid}
+                // fixes autofocus on android
+                key={
+                  isAndroid ? (isModalReady ? 'ready' : 'animating') : 'static'
+                }
+                autoFocus={isAndroid ? isModalReady : true}
                 setRichText={setRichText}
                 onPhotoPasted={onPhotoPasted}
                 onPressPublish={onPressPublish}

src/view/shell/Composer.tsx

@@ -1,4 +1,4 @@
-import React, {useLayoutEffect} from 'react'
+import React, {useLayoutEffect, useState} from 'react'
 import {Modal, View} from 'react-native'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import {RootSiblingParent} from 'react-native-root-siblings'
@@ -24,8 +24,16 @@ export const Composer = observer(function ComposerImpl({}: {
   const t = useTheme()
   const state = useComposerState()
   const ref = useComposerCancelRef()
+  const [isModalReady, setIsModalReady] = useState(false)
 
   const open = !!state
+  const [prevOpen, setPrevOpen] = useState(open)
+  if (open !== prevOpen) {
+    setPrevOpen(open)
+    if (!open) {
+      setIsModalReady(false)
+    }
+  }
 
   return (
     <Modal
@@ -34,10 +42,12 @@ export const Composer = observer(function ComposerImpl({}: {
       visible={open}
       presentationStyle="formSheet"
       animationType="slide"
+      onShow={() => setIsModalReady(true)}
       onRequestClose={() => ref.current?.onPressCancel()}>
       <View style={[t.atoms.bg, a.flex_1]}>
         <Providers open={open}>
           <ComposePost
+            isModalReady={isModalReady}
             cancelRef={ref}
             replyTo={state?.replyTo}
             onPost={state?.onPost}

src/view/shell/Composer.web.tsx

@@ -56,6 +56,7 @@ export function Composer({}: {winHeight: number}) {
           t.atoms.border_contrast_medium,
         ]}>
         <ComposePost
+          isModalReady={true}
           replyTo={state.replyTo}
           quote={state.quote}
           onPost={state.onPost}