Add padding to dialogs when keyboard is open on Android (#4182)

* add keyboard padding to android dialogs

* missing `keyboardDismissMode` for `ScrollableInner`

* add to `MutedWords`

* add to `LabelsOnMe`

src/components/Dialog/index.tsx

@@ -1,5 +1,12 @@
 import React, {useImperativeHandle} from 'react'
-import {Dimensions, Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {
+  Dimensions,
+  Keyboard,
+  Pressable,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native'
 import Animated, {useAnimatedStyle} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import BottomSheet, {
@@ -169,7 +176,8 @@ export function Outer({
           // Android
           importantForAccessibility="yes"
           style={[a.absolute, a.inset_0]}
-          testID={testID}>
+          testID={testID}
+          onTouchMove={() => Keyboard.dismiss()}>
           <BottomSheet
             enableDynamicSizing={!hasSnapPoints}
             enablePanDownToClose

src/components/KeyboardPadding.android.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import {useKeyboardHandler} from 'react-native-keyboard-controller'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated'
+
+export function KeyboardPadding({maxHeight}: {maxHeight?: number}) {
+  const keyboardHeight = useSharedValue(0)
+
+  useKeyboardHandler(
+    {
+      onMove: e => {
+        'worklet'
+
+        if (maxHeight && e.height > maxHeight) {
+          keyboardHeight.value = maxHeight
+        } else {
+          keyboardHeight.value = e.height
+        }
+      },
+    },
+    [maxHeight],
+  )
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: keyboardHeight.value,
+  }))
+
+  return <Animated.View style={animatedStyle} />
+}

src/components/KeyboardPadding.tsx

@@ -0,0 +1,3 @@
+export function KeyboardPadding({maxHeight: _}: {maxHeight?: number}) {
+  return null
+}

src/components/ReportDialog/SubmitView.tsx

@@ -15,6 +15,7 @@ import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
+import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
@@ -221,6 +222,7 @@ export function SubmitView({
           {submitting && <ButtonIcon icon={Loader} />}
         </Button>
       </View>
+      <KeyboardPadding />
     </View>
   )
 }

src/components/dialogs/MutedWords.tsx

@@ -28,6 +28,7 @@ import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Has
 import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
@@ -256,6 +257,7 @@ function MutedWordsInner() {
       </View>
 
       <Dialog.Close />
+      <KeyboardPadding maxHeight={100} />
     </Dialog.ScrollableInner>
   )
 }

src/components/moderation/LabelsOnMeDialog.tsx

@@ -14,6 +14,7 @@ import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import {Divider} from '../Divider'
@@ -108,8 +109,8 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
           </View>
         </>
       )}
-
       <Dialog.Close />
+      <KeyboardPadding />
     </Dialog.ScrollableInner>
   )
 }

src/view/com/composer/GifAltText.tsx

@@ -20,6 +20,7 @@ import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {Text} from '#/components/Typography'
 import {GifEmbed} from '../util/post-embeds/GifEmbed'
 import {AltTextReminder} from './photos/Gallery'
@@ -180,6 +181,7 @@ function AltTextInner({
         </View>
       </View>
       <Dialog.Close />
+      <KeyboardPadding />
     </Dialog.ScrollableInner>
   )
 }

src/view/com/modals/Modal.tsx

@@ -5,6 +5,7 @@ import BottomSheet from '@discord/bottom-sheet/src'
 
 import {useModalControls, useModals} from '#/state/modals'
 import {usePalette} from 'lib/hooks/usePalette'
+import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
 import * as AddAppPassword from './AddAppPasswords'
 import * as AltImageModal from './AltImage'
@@ -146,6 +147,7 @@ export function ModalsContainer() {
       handleStyle={[styles.handle, pal.view]}
       onChange={onBottomSheetChange}>
       {element}
+      <KeyboardPadding />
     </BottomSheet>
   )
 }