get scrollview working

package.json

@@ -68,6 +68,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
+    "@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.7",
     "@haileyok/bluesky-video": "0.1.10",
     "@lingui/react": "^4.5.0",
     "@mattermost/react-native-paste-input": "^0.7.1",

src/components/Dialog/index.tsx

@@ -1,15 +1,14 @@
 import React, {useImperativeHandle} from 'react'
-import {Dimensions, Keyboard, StyleProp, View, ViewStyle} from 'react-native'
+import {ScrollView, StyleProp, View, ViewStyle} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import BottomSheet, {
+import {
   BottomSheetFlatList,
   BottomSheetFlatListMethods,
-  BottomSheetScrollView,
-  BottomSheetScrollViewMethods,
   BottomSheetTextInput,
   BottomSheetView,
 } from '@discord/bottom-sheet/src'
 import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bottomSheetScrollable/types'
+import {BlueskyBottomSheetView} from '@haileyok/bluesky-bottom-sheet'
 
 import {logger} from '#/logger'
 import {useDialogStateControlContext} from '#/state/dialogs'
@@ -37,7 +36,7 @@ export function Outer({
   testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
-  const sheet = React.useRef<BottomSheet>(null)
+  const ref = React.useRef<BlueskyBottomSheetView>(null)
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
@@ -61,7 +60,7 @@ export function Outer({
     callQueuedCallbacks()
     setIsOpen(true)
     setDialogIsOpen(control.id, true)
-    // sheet.current?.open() // @TODO DIALOG REFACTOR
+    ref.current?.present()
   }, [setDialogIsOpen, control.id, callQueuedCallbacks])
 
   // This is the function that we call when we want to dismiss the dialog.
@@ -70,7 +69,7 @@ export function Outer({
     if (typeof cb === 'function') {
       closeCallbacks.current.push(cb)
     }
-    // sheet.current?.close() // @TODO DIALOG REFACTOR
+    ref.current?.dismiss()
   }, [])
 
   // This is the actual thing we are doing once we "confirm" the dialog. We want the dialog's close animation to
@@ -102,40 +101,37 @@ export function Outer({
   const context = React.useMemo(() => ({close}), [close])
 
   return (
-    isOpen && (
     <Portal>
-        <View
+      <Context.Provider value={context}>
-          // iOS
+        <BlueskyBottomSheetView
-          accessibilityViewIsModal
+          // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
-          style={[a.absolute, a.inset_0]}
+          ref={ref}
-          testID={testID}
-          onTouchMove={() => Keyboard.dismiss()}>
-          <BottomSheet
           topInset={insets.top}
           bottomInset={insets.bottom}
-            ref={sheet}
+          onStateChange={e => {
-            // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!
+            if (e.nativeEvent.state === 'closed') {
-            onClose={onCloseAnimationComplete}>
+              onCloseAnimationComplete()
-            <Context.Provider value={context}>
+            }
-              <View
+          }}>
-                style={[
+          <View testID={testID} style={[t.atoms.bg]}>
-                  a.absolute,
+            {/*<View*/}
-                  a.inset_0,
+            {/*  style={[*/}
-                  t.atoms.bg,
+            {/*    a.absolute,*/}
-                  {
+            {/*    a.inset_0,*/}
-                    borderTopLeftRadius: 40,
+            {/*    t.atoms.bg,*/}
-                    borderTopRightRadius: 40,
+            {/*    {*/}
-                    height: Dimensions.get('window').height * 2,
+            {/*      borderTopLeftRadius: 40,*/}
-                  },
+            {/*      borderTopRightRadius: 40,*/}
-                ]}
+            {/*      height: Dimensions.get('window').height * 2,*/}
-              />
+            {/*    },*/}
+            {/*  ]}*/}
+            {/*/>*/}
             {children}
-            </Context.Provider>
-          </BottomSheet>
           </View>
+        </BlueskyBottomSheetView>
+      </Context.Provider>
     </Portal>
   )
-  )
 }
 
 export function Inner({children, style}: DialogInnerProps) {
@@ -158,32 +154,29 @@ export function Inner({children, style}: DialogInnerProps) {
   )
 }
 
-export const ScrollableInner = React.forwardRef<
+export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
-  BottomSheetScrollViewMethods,
+  function ScrollableInner({children, style}, ref) {
-  DialogInnerProps
->(function ScrollableInner({children, style}, ref) {
     const insets = useSafeAreaInsets()
     return (
-    <BottomSheetScrollView
+      <View
-      keyboardShouldPersistTaps="handled"
+      // style={[
-      style={[
+      //   a.p_xl,
-        a.flex_1, // main diff is this
+      //   a.h_full,
-        a.p_xl,
+      //   {
-        a.h_full,
+      //     paddingTop: 40,
-        {
+      //     borderTopLeftRadius: 40,
-          paddingTop: 40,
+      //     borderTopRightRadius: 40,
-          borderTopLeftRadius: 40,
+      //   },
-          borderTopRightRadius: 40,
+      //   style,
-        },
+      // ]}
-        style,
+      // ref={ref}
-      ]}
+      >
-      contentContainerStyle={a.pb_4xl}
-      ref={ref}>
         {children}
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-    </BottomSheetScrollView>
+      </View>
     )
-})
+  },
+)
 
 export const InnerFlatList = React.forwardRef<
   BottomSheetFlatListMethods,

yarn.lock

@@ -4120,10 +4120,10 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
-"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.4":
+"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.7":
-  version "0.1.1-alpha.4"
+  version "0.1.1-alpha.7"
-  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.4.tgz#19717e57e63d70e79b8bd86984903c448deb83bc"
+  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.7.tgz#a5845cd2ac386b78716db5940b65b3e78b392042"
-  integrity sha512-bEZRbErsI6OJCgmFolbr9Ta5LxNvyaltzRPFOVtwsykIwL8tqNJeNlmfxP8EdJa5lSu2kK1MauQcygmCIouzwg==
+  integrity sha512-Ps2nsNmfjqUmP/LPAM94/2dWZerwZEjnvSUfi/ipFNHlNp/McIYIObxDaPJaZ0ZLxUcRXxdhmC3UonK25sJKSw==
 
 "@haileyok/bluesky-video@0.1.10":
   version "0.1.10"