Fixed typing on PixelfedBottomSheetModal

.tamagui/tamagui.config.json

@@ -28009,7 +28009,8 @@
               "flexShrink": 0,
               "flexDirection": "column",
               "backgroundColor": "$background",
-              "position": "absolute"
+              "position": "absolute",
+              "pointerEvents": "box-none"
             },
             "validStyles": {
               "backfaceVisibility": true,

src/app/(auth)/(tabs)/camera.tsx

@@ -24,8 +24,8 @@ import {
 } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import { PressableOpacity } from 'react-native-pressable-opacity'
-import { PixelfedBottomSheetModal } from 'src/components/BottomSheets'
 import ImageComponent from 'src/components/ImageComponent'
+import { PixelfedBottomSheetModal } from 'src/components/common/BottomSheets'
 import { ErrorAlert } from 'src/components/common/ErrorAlert'
 import UserAvatar from 'src/components/common/UserAvatar'
 import { Switch } from 'src/components/form/Switch'

src/app/(auth)/(tabs)/index.tsx

@@ -19,7 +19,7 @@ import {
   StyleSheet,
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { PixelfedBottomSheetModal } from 'src/components/BottomSheets'
+import { PixelfedBottomSheetModal } from 'src/components/common/BottomSheets'
 import EmptyFeed from 'src/components/common/EmptyFeed'
 import ErrorFeed from 'src/components/common/ErrorFeed'
 import FeedHeader from 'src/components/common/FeedHeader'

src/app/(auth)/(tabs)/network.tsx

@@ -17,7 +17,7 @@ import {
   StyleSheet,
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { PixelfedBottomSheetModal } from 'src/components/BottomSheets'
+import { PixelfedBottomSheetModal } from 'src/components/common/BottomSheets'
 import EmptyFeed from 'src/components/common/EmptyFeed'
 import ErrorFeed from 'src/components/common/ErrorFeed'
 import FeedHeader from 'src/components/common/FeedHeader'

src/app/(auth)/admin/autospam/index.tsx

@@ -10,8 +10,8 @@ import { useCallback, useMemo, useRef, useState } from 'react'
 import { ActivityIndicator, Alert, FlatList, StyleSheet } from 'react-native'
 import { PressableOpacity } from 'react-native-pressable-opacity'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { PixelfedBottomSheetModal } from 'src/components/BottomSheets'
 import ImageComponent from 'src/components/ImageComponent'
+import { PixelfedBottomSheetModal } from 'src/components/common/BottomSheets'
 import ReadMore from 'src/components/common/ReadMore'
 import UserAvatar from 'src/components/common/UserAvatar'
 import { getAutospamReports, postAutospamHandle } from 'src/lib/api'

src/app/(auth)/admin/reports/index.tsx

@@ -10,8 +10,8 @@ import { useCallback, useMemo, useRef, useState } from 'react'
 import { ActivityIndicator, Alert, FlatList, StyleSheet } from 'react-native'
 import { PressableOpacity } from 'react-native-pressable-opacity'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { PixelfedBottomSheetModal } from 'src/components/BottomSheets'
 import ImageComponent from 'src/components/ImageComponent'
+import { PixelfedBottomSheetModal } from 'src/components/common/BottomSheets'
 import ReadMore from 'src/components/common/ReadMore'
 import { getModReports, postReportHandle, postUserHandle } from 'src/lib/api'
 import { _timeAgo, enforceLen, htmlToTextWithLineBreaks } from 'src/utils'

src/app/(auth)/post/[id].tsx

@@ -5,7 +5,7 @@ import { useCallback, useLayoutEffect, useMemo, useRef } from 'react'
 //@ts-check
 import { ActivityIndicator, Platform } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { PixelfedBottomSheetModal } from 'src/components/BottomSheets'
+import { PixelfedBottomSheetModal } from 'src/components/common/BottomSheets'
 import CommentFeed from 'src/components/post/CommentFeed'
 import FeedPost from 'src/components/post/FeedPost'
 import { deleteStatusV1, getStatusById, reblogStatus, unreblogStatus } from 'src/lib/api'

src/app/(auth)/profile/[id].tsx

@@ -43,7 +43,7 @@ import { Storage } from 'src/state/cache'
 import { Button, Separator, Text, View, YStack, ZStack } from 'tamagui'
 
 import type { BottomSheetBackdropProps } from '@gorhom/bottom-sheet'
-import { PixelfedBottomSheetModal } from 'src/components/BottomSheets'
+import { PixelfedBottomSheetModal } from 'src/components/common/BottomSheets'
 
 const SCREEN_WIDTH = Dimensions.get('screen').width
 

src/app/(auth)/profile/bookmarks/index.tsx

@@ -6,7 +6,7 @@ import { Stack, useNavigation, useRouter } from 'expo-router'
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { ActivityIndicator, FlatList, Platform } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { PixelfedBottomSheetModal } from 'src/components/BottomSheets'
+import { PixelfedBottomSheetModal } from 'src/components/common/BottomSheets'
 import CommentFeed from 'src/components/post/CommentFeed'
 import FeedPost from 'src/components/post/FeedPost'
 import { getSelfBookmarks, reblogStatus, unreblogStatus } from 'src/lib/api'

src/components/common/BottomSheets.tsx

@@ -0,0 +1,39 @@
+import { BottomSheetModal, useBottomSheetModal } from '@gorhom/bottom-sheet'
+import type { BottomSheetModalProps, SNAP_POINT_TYPE } from '@gorhom/bottom-sheet'
+import type { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types'
+import React, { useCallback, useState } from 'react'
+import { useEffect } from 'react'
+import { BackHandler } from 'react-native'
+
+export const PixelfedBottomSheetModal = React.forwardRef<
+  BottomSheetModalMethods,
+  Omit<BottomSheetModalProps, 'onChange'>
+>((props, ref?) => {
+  const [openPosition, setOpenPosition] = useState(-1)
+  const { children } = props
+  const { dismissAll } = useBottomSheetModal()
+
+  const onBackPressed = useCallback(() => {
+    if (openPosition < 0) {
+      return false
+    }
+
+    dismissAll()
+    return true
+  }, [openPosition])
+
+  const onChange = (index: number) => {
+    setOpenPosition(index)
+  }
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPressed)
+    return () => backHandler.remove()
+  }, [onBackPressed])
+
+  return (
+    <BottomSheetModal ref={ref} {...props} onChange={onChange}>
+      {children}
+    </BottomSheetModal>
+  )
+})

src/components/post/FeedPost.tsx

@@ -63,7 +63,7 @@ import type {
   Timestamp,
   Visibility,
 } from 'src/lib/api-types'
-import { PixelfedBottomSheetModal } from '../BottomSheets'
+import { PixelfedBottomSheetModal } from '../common/BottomSheets'
 
 const AnimatedFastImage = Animated.createAnimatedComponent(Image)