chore: improve bottom sheet scrollables

Author: MateuszRostkowski

src/design-system/bottomSheets/BottomSheet.web.tsx

@@ -1,5 +1,5 @@
 import { Modal } from '@baca/components/Modal'
-import { useBoolean, useWeb } from '@baca/hooks'
+import { useBoolean } from '@baca/hooks'
 import { useCallback, useImperativeHandle } from 'react'
 import { ScrollView } from 'react-native'
 
@@ -18,7 +18,6 @@ export const BottomSheet = ({
   bottomSheetRef,
 }: BottomSheetProps) => {
   const [isOpen, setIsOpen] = useBoolean(false)
-  const { webContentWidth } = useWeb()
 
   useImperativeHandle(bottomSheetRef, () => ({
     snapToPosition: (index: string | number) => {
@@ -46,11 +45,13 @@ export const BottomSheet = ({
     <Modal transparent visible={isOpen} onRequestClose={closeModalHandler}>
       <Box
         mx="auto"
+        my={8}
         bg="bg.primary"
         borderRadius={8}
         borderColor={'border.primary'}
         borderWidth={1}
-        maxW={webContentWidth}
+        width="90%"
+        maxWidth={500}
       >
         <BottomSheetHeader
           title={title}

src/design-system/bottomSheets/BottomSheetFlashList.tsx

@@ -3,10 +3,9 @@
 // Could be connected to this: https://github.com/gorhom/react-native-bottom-sheet/issues/1760
 // After upgrading bottom sheet library try changing the imports, maybe it will work as expected
 // import { BottomSheetScrollView as ScrollView, BottomSheetFlashList as FlashList, BottomSheetSectionList as SectionList } from "@gorhom/bottom-sheet";
-import { FlashList } from '@shopify/flash-list'
-import { SectionList } from 'react-native'
-import { ScrollView } from 'react-native-gesture-handler'
+import { FlatList as RNFlatList, Platform, SectionList } from 'react-native'
+import { ScrollView, FlatList } from 'react-native-gesture-handler'
 
 export const BottomSheetScrollView = ScrollView
-export const BottomSheetFlashList = FlashList
+export const BottomSheetFlatList = Platform.OS === 'web' ? RNFlatList : FlatList
 export const BottomSheetSectionList = SectionList