Fix keyboard hiding alt text input after viewing DMs on iOS (#5739)

3 files changed, 22 insertions, 9 deletions

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 73e54ea21..93acad438 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native'
 import {
   KeyboardAwareScrollView,
+  useKeyboardController,
   useKeyboardHandler,
 } from 'react-native-keyboard-controller'
 import {runOnJS} from 'react-native-reanimated'
@@ -189,7 +190,21 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
   function ScrollableInner({children, style, ...props}, ref) {
     const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
     const insets = useSafeAreaInsets()
+    const {setEnabled} = useKeyboardController()
+
     const [keyboardHeight, setKeyboardHeight] = React.useState(0)
+
+    React.useEffect(() => {
+      if (!isIOS) {
+        return
+      }
+
+      setEnabled(true)
+      return () => {
+        setEnabled(false)
+      }
+    })
+
     useKeyboardHandler({
       onEnd: e => {
         'worklet'
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index bd3860a28..732bd4bd6 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import {Dimensions, TouchableOpacity, View} from 'react-native'
+import {TouchableOpacity, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -9,7 +9,7 @@ import {
   EmbedPlayerParams,
   parseEmbedPlayerFromUrl,
 } from '#/lib/strings/embed-player'
-import {isAndroid, isWeb} from '#/platform/detection'
+import {isAndroid} from '#/platform/detection'
 import {useResolveGifQuery} from '#/state/queries/resolve-link'
 import {Gif} from '#/state/queries/tenor'
 import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
@@ -107,8 +107,7 @@ export function GifAltTextDialogLoaded({
         control={control}
         onClose={() => {
           onSubmit(altTextDraft)
-        }}
-        nativeOptions={{minHeight: Dimensions.get('window').height}}>
+        }}>
         <Dialog.Handle />
         <AltTextInner
           vendorAltText={vendorAltText}
@@ -158,7 +157,7 @@ function AltTextInner({
                   defaultValue={altText}
                   multiline
                   numberOfLines={3}
-                  autoFocus={isWeb}
+                  autoFocus
                   onKeyPress={({nativeEvent}) => {
                     if (nativeEvent.key === 'Escape') {
                       control.close()
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index 49b4cdd7e..aa0b0987a 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Dimensions, ImageStyle, useWindowDimensions, View} from 'react-native'
+import {ImageStyle, useWindowDimensions, View} from 'react-native'
 import {Image} from 'expo-image'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -38,8 +38,7 @@ export const ImageAltTextDialog = ({
           ...image,
           alt: enforceLen(altText, MAX_ALT_TEXT, true),
         })
-      }}
-      nativeOptions={{minHeight: Dimensions.get('window').height}}>
+      }}>
       <Dialog.Handle />
       <ImageAltTextInner
         control={control}
@@ -123,7 +122,7 @@ const ImageAltTextInner = ({
                 defaultValue={altText}
                 multiline
                 numberOfLines={3}
-                autoFocus={isWeb}
+                autoFocus
               />
             </TextField.Root>
           </View>