[Sheets] [Pt. 13] Keyboard handling (#5586)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>

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<ScrollView, DialogInnerProps>(
     const insets = useSafeAreaInsets()
     const {nativeSnapPoint} = useDialogContext()
     return (
-      <ScrollView
+      <KeyboardAwareScrollView
         style={[a.px_xl, style]}
         ref={ref}
-        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}>
+        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
+        bottomOffset={30}
+        ScrollViewComponent={ScrollView}>
         {children}
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-      </ScrollView>
+      </KeyboardAwareScrollView>
     )
   },
 )

src/components/KeyboardControllerPadding.android.tsx

@@ -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 <Animated.View style={animatedStyle} />
-}

src/components/KeyboardControllerPadding.tsx

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

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<ScrollView>(null)
-  useOnKeyboardDidShow(() => {
-    ref.current?.scrollToEnd({animated: true})
-  })
 
   return (
     <Dialog.ScrollableInner label={_(msg`Report dialog`)} ref={ref}>

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 = ({
       <Dialog.ScrollableInner label={_(msg`Report this message`)}>
         <DialogInner params={params} />
         <Dialog.Close />
-        <KeyboardControllerPadding />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )