diff options
-rw-r--r-- | src/components/Dialog/index.tsx | 12 | ||||
-rw-r--r-- | src/components/KeyboardPadding.android.tsx | 31 | ||||
-rw-r--r-- | src/components/KeyboardPadding.tsx | 3 | ||||
-rw-r--r-- | src/components/ReportDialog/SubmitView.tsx | 2 | ||||
-rw-r--r-- | src/components/dialogs/MutedWords.tsx | 2 | ||||
-rw-r--r-- | src/components/moderation/LabelsOnMeDialog.tsx | 3 | ||||
-rw-r--r-- | src/view/com/composer/GifAltText.tsx | 2 | ||||
-rw-r--r-- | src/view/com/modals/Modal.tsx | 2 |
8 files changed, 54 insertions, 3 deletions
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 315f863b5..f32e0e79e 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()}> <BottomSheet enableDynamicSizing={!hasSnapPoints} enablePanDownToClose diff --git a/src/components/KeyboardPadding.android.tsx b/src/components/KeyboardPadding.android.tsx new file mode 100644 index 000000000..40dec3001 --- /dev/null +++ b/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} /> +} diff --git a/src/components/KeyboardPadding.tsx b/src/components/KeyboardPadding.tsx new file mode 100644 index 000000000..797d42ba0 --- /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 40d655aa9..e921d102a 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 && <ButtonIcon icon={Loader} />} </Button> </View> + <KeyboardPadding /> </View> ) } diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx index 534263422..dea819412 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() { </View> <Dialog.Close /> + <KeyboardPadding maxHeight={100} /> </Dialog.ScrollableInner> ) } diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx index 8583a226f..2923981fd 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) { </View> </> )} - <Dialog.Close /> + <KeyboardPadding /> </Dialog.ScrollableInner> ) } diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx index b1f10bf2f..cdef13352 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({ </View> </View> <Dialog.Close /> + <KeyboardPadding /> </Dialog.ScrollableInner> ) } diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 652481301..d82975b5e 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} + <KeyboardPadding /> </BottomSheet> ) } |