diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 315f863b5e..f32e0e79ec 100644 --- a/src/components/Dialog/index.tsx +++ b/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()}> { + 'worklet' + + if (maxHeight && e.height > maxHeight) { + keyboardHeight.value = maxHeight + } else { + keyboardHeight.value = e.height + } + }, + }, + [maxHeight], + ) + + const animatedStyle = useAnimatedStyle(() => ({ + height: keyboardHeight.value, + })) + + return +} diff --git a/src/components/KeyboardPadding.tsx b/src/components/KeyboardPadding.tsx new file mode 100644 index 0000000000..797d42ba0a --- /dev/null +++ b/src/components/KeyboardPadding.tsx @@ -0,0 +1,3 @@ +export function KeyboardPadding({maxHeight: _}: {maxHeight?: number}) { + return null +} diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx index 40d655aa90..e921d102a9 100644 --- a/src/components/ReportDialog/SubmitView.tsx +++ b/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 && } + ) } diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx index 534263422d..dea819412c 100644 --- a/src/components/dialogs/MutedWords.tsx +++ b/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() { + ) } diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx index 8583a226f0..2923981fd7 100644 --- a/src/components/moderation/LabelsOnMeDialog.tsx +++ b/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) { )} - + ) } diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx index b1f10bf2fc..cdef13352f 100644 --- a/src/view/com/composer/GifAltText.tsx +++ b/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({ + ) } diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 6524813015..d82975b5e8 100644 --- a/src/view/com/modals/Modal.tsx +++ b/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} + ) }