simplify keyboard padding system on dialog

src/components/Dialog/index.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-native'
 import {
   KeyboardAwareScrollView,
-  useKeyboardHandler,
+  type KeyboardAwareScrollViewProps,
 } from 'react-native-keyboard-controller'
 import {runOnJS} from 'react-native-reanimated'
 import {type ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/hook/commonTypes'
@@ -20,6 +20,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useEnableKeyboardController} from '#/lib/hooks/useEnableKeyboardController'
+import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
 import {ScrollProvider} from '#/lib/ScrollContext'
 import {logger} from '#/logger'
 import {isAndroid, isIOS} from '#/platform/detection'
@@ -197,78 +198,74 @@ export function Inner({children, style, header}: DialogInnerProps) {
   )
 }
 
-export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
+export const ScrollableInner = React.forwardRef<
-  function ScrollableInner(
+  ScrollView,
-    {children, contentContainerStyle, header, ...props},
+  DialogInnerProps &
-    ref,
+    Pick<
-  ) {
+      KeyboardAwareScrollViewProps,
-    const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
+      'bottomOffset' | 'enabled' | 'extraKeyboardSpace'
-    const insets = useSafeAreaInsets()
+    >
+>(function ScrollableInner(
+  {children, contentContainerStyle, header, ...props},
+  ref,
+) {
+  const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
+  const insets = useSafeAreaInsets()
 
-    useEnableKeyboardController(isIOS)
+  useEnableKeyboardController(isIOS)
 
-    const [keyboardHeight, setKeyboardHeight] = React.useState(0)
+  const keyboardIsVisible = useIsKeyboardVisible({iosUseWillEvents: true})
 
-    useKeyboardHandler(
+  let paddingBottom = 0
-      {
+  if (isIOS) {
-        onEnd: e => {
+    if (keyboardIsVisible) {
-          'worklet'
+      paddingBottom += insets.bottom
-          runOnJS(setKeyboardHeight)(e.height)
-        },
-      },
-      [],
-    )
-
-    let paddingBottom = 0
-    if (isIOS) {
-      paddingBottom += keyboardHeight / 4
-      if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
-        paddingBottom += insets.bottom + tokens.space.md
-      }
-      paddingBottom = Math.max(paddingBottom, tokens.space._2xl)
-    } else {
-      paddingBottom += keyboardHeight
-      if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
-        paddingBottom += insets.top
-      }
-      paddingBottom +=
-        Math.max(insets.bottom, tokens.space._5xl) + tokens.space._2xl
     }
-
+    if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
-    const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      paddingBottom += insets.bottom + tokens.space.md
-      if (!isAndroid) {
-        return
-      }
-      const {contentOffset} = e.nativeEvent
-      if (contentOffset.y > 0 && !disableDrag) {
-        setDisableDrag(true)
-      } else if (contentOffset.y <= 1 && disableDrag) {
-        setDisableDrag(false)
-      }
     }
+    paddingBottom = Math.max(paddingBottom, tokens.space._2xl)
+  } else {
+    if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
+      paddingBottom += insets.top
+    }
+    paddingBottom +=
+      Math.max(insets.bottom, tokens.space._5xl) + tokens.space._2xl
+  }
 
-    return (
+  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-      <KeyboardAwareScrollView
+    if (!isAndroid) {
-        contentContainerStyle={[
+      return
-          a.pt_2xl,
+    }
-          a.px_xl,
+    const {contentOffset} = e.nativeEvent
-          {paddingBottom},
+    if (contentOffset.y > 0 && !disableDrag) {
-          contentContainerStyle,
+      setDisableDrag(true)
-        ]}
+    } else if (contentOffset.y <= 1 && disableDrag) {
-        ref={ref}
+      setDisableDrag(false)
-        {...props}
+    }
-        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
+  }
-        bottomOffset={30}
+
-        scrollEventThrottle={50}
+  return (
-        onScroll={isAndroid ? onScroll : undefined}
+    <KeyboardAwareScrollView
-        keyboardShouldPersistTaps="handled"
+      contentContainerStyle={[
-        stickyHeaderIndices={header ? [0] : undefined}>
+        a.pt_2xl,
-        {header}
+        a.px_xl,
-        {children}
+        {paddingBottom},
-      </KeyboardAwareScrollView>
+        contentContainerStyle,
-    )
+      ]}
-  },
+      ref={ref}
-)
+      bottomOffset={30}
+      {...props}
+      bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
+      scrollEventThrottle={50}
+      onScroll={isAndroid ? onScroll : undefined}
+      keyboardShouldPersistTaps="handled"
+      stickyHeaderIndices={header ? [0] : undefined}>
+      {header}
+      {children}
+    </KeyboardAwareScrollView>
+  )
+})
 
 export const InnerFlatList = React.forwardRef<
   ListMethods,