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 71f57391ae.

* Use derived state pattern

* Rename for clarity

---------

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

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}