State to check whether the sheet is open or not

[bryanprimus]

As we know if we use BottomSheet. The content inside it will be rendered immediately.

I want to improve the performance of my screen by lazy loading content inside the BottomSheet.

const BottomSheetContent = lazy(() => import('./components/BottomSheetContent'))

<BottomSheet>
   <Suspense fallback={<Text>Loading...</Text>}>
       {isOpen && <BottomSheetContent/>}
   </Suspense>
</BottomSheet>

Is there a way to do this the right way?

[Wenceslauu]

have you figured that out? @bryanltobing

[notclive]

I use this hook to work out when the height of the bottom sheet passes a certain boundary:

import { useBottomSheet } from '@gorhom/bottom-sheet'
import { useState } from 'react'
import { Dimensions } from 'react-native'
import { runOnJS, useAnimatedReaction } from 'react-native-reanimated'

const windowHeight = Dimensions.get('window').height

export function useBottomSheetBoundary (boundary: number) {
  const { animatedPosition } = useBottomSheet()
  const [isBelowBoundary, setIsBelowBoundary] = useState(true)

  useAnimatedReaction(
    () => windowHeight - animatedPosition.value,
    (estimatedHeight, previous) => {
      if (estimatedHeight < (previous ?? 0) && estimatedHeight < boundary) {
        runOnJS(setIsBelowBoundary)(true)
      } else if (estimatedHeight > (previous ?? 0) && estimatedHeight > boundary) {
        runOnJS(setIsBelowBoundary)(false)
      }
    }
  )

  return isBelowBoundary ? 'below' : 'above'
}

[Wenceslauu]

Looks good!