From 52a8e4d6167b64d8731a6b1b157f2467f0fbc5b5 Mon Sep 17 00:00:00 2001 From: Hailey Date: Wed, 2 Oct 2024 21:53:23 -0700 Subject: [PATCH] [Sheets] [Pt. 13] Keyboard handling (#5586) Co-authored-by: Eric Bailey Co-authored-by: Samuel Newman --- modules/bottom-sheet/src/BottomSheet.types.ts | 1 - package.json | 2 +- src/components/Dialog/index.tsx | 9 ++++-- .../KeyboardControllerPadding.android.tsx | 31 ------------------- src/components/KeyboardControllerPadding.tsx | 7 ----- src/components/ReportDialog/index.tsx | 4 --- src/components/dms/ReportDialog.tsx | 2 -- yarn.lock | 8 ++--- 8 files changed, 11 insertions(+), 53 deletions(-) delete mode 100644 src/components/KeyboardControllerPadding.android.tsx delete mode 100644 src/components/KeyboardControllerPadding.tsx diff --git a/modules/bottom-sheet/src/BottomSheet.types.ts b/modules/bottom-sheet/src/BottomSheet.types.ts index e3cf64b997..d08e985fa7 100644 --- a/modules/bottom-sheet/src/BottomSheet.types.ts +++ b/modules/bottom-sheet/src/BottomSheet.types.ts @@ -28,5 +28,4 @@ export interface BottomSheetViewProps { onStateChange?: ( event: NativeSyntheticEvent<{state: BottomSheetState}>, ) => void - onAttemptDismiss?: (event: NativeSyntheticEvent) => void } diff --git a/package.json b/package.json index 6352440296..6e063522e7 100644 --- a/package.json +++ b/package.json @@ -175,7 +175,7 @@ "react-native-get-random-values": "~1.11.0", "react-native-image-crop-picker": "0.41.2", "react-native-ios-context-menu": "^1.15.3", - "react-native-keyboard-controller": "^1.12.1", + "react-native-keyboard-controller": "^1.14.0", "react-native-mmkv": "^2.12.2", "react-native-pager-view": "6.2.3", "react-native-picker-select": "^9.1.3", diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index cb2e37ac7e..effe781071 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -1,6 +1,7 @@ import React, {useImperativeHandle} from 'react' import {StyleProp, TextInput, View, ViewStyle} from 'react-native' import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler' +import {KeyboardAwareScrollView} from 'react-native-keyboard-controller' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {logger} from '#/logger' @@ -162,13 +163,15 @@ export const ScrollableInner = React.forwardRef( const insets = useSafeAreaInsets() const {nativeSnapPoint} = useDialogContext() return ( - + bounces={nativeSnapPoint === BottomSheetSnapPoint.Full} + bottomOffset={30} + ScrollViewComponent={ScrollView}> {children} - + ) }, ) diff --git a/src/components/KeyboardControllerPadding.android.tsx b/src/components/KeyboardControllerPadding.android.tsx deleted file mode 100644 index 92ef1b0b05..0000000000 --- a/src/components/KeyboardControllerPadding.android.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import {useKeyboardHandler} from 'react-native-keyboard-controller' -import Animated, { - useAnimatedStyle, - useSharedValue, -} from 'react-native-reanimated' - -export function KeyboardControllerPadding({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 -} diff --git a/src/components/KeyboardControllerPadding.tsx b/src/components/KeyboardControllerPadding.tsx deleted file mode 100644 index f3163d87cf..0000000000 --- a/src/components/KeyboardControllerPadding.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export function KeyboardControllerPadding({ - maxHeight: _, -}: { - maxHeight?: number -}) { - return null -} diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx index b781d9f39e..567867ce3d 100644 --- a/src/components/ReportDialog/index.tsx +++ b/src/components/ReportDialog/index.tsx @@ -13,7 +13,6 @@ import {AppBskyLabelerDefs} from '@atproto/api' import {atoms as a} from '#/alf' import * as Dialog from '#/components/Dialog' import {useDelayedLoading} from '#/components/hooks/useDelayedLoading' -import {useOnKeyboardDidShow} from '#/components/hooks/useOnKeyboard' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' import {SelectLabelerView} from './SelectLabelerView' @@ -39,9 +38,6 @@ function ReportDialogInner(props: ReportDialogProps) { const isLoading = useDelayedLoading(500, isLabelerLoading) const ref = React.useRef(null) - useOnKeyboardDidShow(() => { - ref.current?.scrollToEnd({animated: true}) - }) return ( diff --git a/src/components/dms/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx index 60a18723b0..27d4151b73 100644 --- a/src/components/dms/ReportDialog.tsx +++ b/src/components/dms/ReportDialog.tsx @@ -15,7 +15,6 @@ import {CharProgress} from '#/view/com/composer/char-progress/CharProgress' import * as Toast from '#/view/com/util/Toast' import {atoms as a, useBreakpoints, useTheme} from '#/alf' import * as Dialog from '#/components/Dialog' -import {KeyboardControllerPadding} from '#/components/KeyboardControllerPadding' import {Button, ButtonIcon, ButtonText} from '../Button' import {Divider} from '../Divider' import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '../icons/Chevron' @@ -44,7 +43,6 @@ let ReportDialog = ({ - ) diff --git a/yarn.lock b/yarn.lock index 6ff953ba53..03cbd97acc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18099,10 +18099,10 @@ react-native-ios-context-menu@^1.15.3: dependencies: "@dominicstop/ts-event-emitter" "^1.1.0" -react-native-keyboard-controller@^1.12.1: - version "1.12.1" - resolved "https://registry.yarnpkg.com/react-native-keyboard-controller/-/react-native-keyboard-controller-1.12.1.tgz#6de22ed4d060528a0dd25621eeaa7f71772ce35f" - integrity sha512-2OpQcesiYsMilrTzgcTafSGexd9UryRQRuHudIcOn0YaqvvzNpnhVZMVuJMH93fJv/iaZYp3138rgUKOdHhtSw== +react-native-keyboard-controller@^1.14.0: + version "1.14.0" + resolved "https://registry.yarnpkg.com/react-native-keyboard-controller/-/react-native-keyboard-controller-1.14.0.tgz#f6faaa12b3736a10f4eec4236ed5b0343508b9a1" + integrity sha512-JW9k2fehFXOpvLWh1YcgyubLodg/HPi6bR11sCZB/BOawf1tnbGnqk967B8XkxDOKHH6mg+z82quCvv8ALh1rg== react-native-mmkv@^2.12.2: version "2.12.2"