From ad3dd9f6dccaa4b73da0000f41f23ac2fea5d1b2 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 20 Mar 2024 17:26:38 -0700
Subject: Fix problems with `BottomSheet` and the report dialog (#3297)

* use @discord/bottom-sheet

* add @types/invariant

* some progress on keyboard dialog

* rework

rework

add a comment

use discord bottom sheet

* remove `@gorhom/bottom-sheet`

* remove android specific code

* organize imports
---
 src/components/ReportDialog/index.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

(limited to 'src/components/ReportDialog/index.tsx')

diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx
index 6a7aa6ff2..b41df3b3a 100644
--- a/src/components/ReportDialog/index.tsx
+++ b/src/components/ReportDialog/index.tsx
@@ -1,22 +1,24 @@
 import React from 'react'
-import {View, Pressable} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {Trans} from '@lingui/macro'
 
-import {useMyLabelersQuery} from '#/state/queries/preferences'
 import {ReportOption} from '#/lib/moderation/useReportOptions'
+import {useMyLabelersQuery} from '#/state/queries/preferences'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
+import {AppBskyLabelerDefs} from '@atproto/api'
+import {BottomSheetScrollViewMethods} from '@discord/bottom-sheet/src'
+
 import {atoms as a} from '#/alf'
-import {Loader} from '#/components/Loader'
 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 {ReportDialogProps} from './types'
 import {SelectLabelerView} from './SelectLabelerView'
 import {SelectReportOptionView} from './SelectReportOptionView'
 import {SubmitView} from './SubmitView'
-import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
-import {AppBskyLabelerDefs} from '@atproto/api'
+import {ReportDialogProps} from './types'
 
 export function ReportDialog(props: ReportDialogProps) {
   return (
@@ -36,10 +38,13 @@ function ReportDialogInner(props: ReportDialogProps) {
   } = useMyLabelersQuery()
   const isLoading = useDelayedLoading(500, isLabelerLoading)
 
+  const ref = React.useRef<BottomSheetScrollViewMethods>(null)
+  useOnKeyboardDidShow(() => {
+    ref.current?.scrollToEnd({animated: true})
+  })
+
   return (
-    <Dialog.ScrollableInner
-      label="Report Dialog"
-      keyboardDismissMode="interactive">
+    <Dialog.ScrollableInner label="Report Dialog" ref={ref}>
       {isLoading ? (
         <View style={[a.align_center, {height: 100}]}>
           <Loader size="xl" />
@@ -55,8 +60,6 @@ function ReportDialogInner(props: ReportDialogProps) {
       ) : (
         <ReportDialogLoaded labelers={labelers} {...props} />
       )}
-
-      <Dialog.Close />
     </Dialog.ScrollableInner>
   )
 }
-- 
cgit 1.4.1

