Web Support

Yes, TrueSheet supports web! Using @gorhom/bottom-sheet under the hood. This allows you to use the same API across iOS, Android, and Web.

Installation

In addition to @lodev09/react-native-true-sheet, install the required web dependencies. Follow the @gorhom/bottom-sheet installation guide.

Setup

Wrap your app with TrueSheetProvider:

import { TrueSheetProvider } from '@lodev09/react-native-true-sheet'

const App = () => {
  return (
    <TrueSheetProvider>
      <YourApp />
    </TrueSheetProvider>
  )
}

tip

On native platforms, TrueSheetProvider is a simple pass-through component, so you can safely wrap your entire app without any performance impact.

Using the Hook

Use the useTrueSheet hook to control sheets by name:

import { TrueSheet, useTrueSheet } from '@lodev09/react-native-true-sheet'

const MyComponent = () => {
  const { present, dismiss } = useTrueSheet()

  return (
    <>
      <Button onPress={() => present('my-sheet')} title="Open" />
      <Button onPress={() => dismiss('my-sheet')} title="Close" />

      <TrueSheet name="my-sheet" detents={[0.5, 1]}>
        <View>
          <Text>Hello from the sheet!</Text>
        </View>
      </TrueSheet>
    </>
  )
}

Using Refs

You can also use refs to control sheets directly as you would do normally.

Scrollable Content

For scrollable content on web, use the scrollable components from @gorhom/bottom-sheet:

import { BottomSheetScrollView } from '@gorhom/bottom-sheet'

<TrueSheet scrollable detents={[0.5, 1]}>
  <BottomSheetScrollView>
    {/* Your scrollable content */}
  </BottomSheetScrollView>
</TrueSheet>

note

On native platforms, standard React Native scrollables work without any changes.

Stack Behavior

Control how sheets stack when presenting multiple sheets using the stackBehavior prop:

Value	Description
push	Mount the modal on top of the current one
switch	Minimize the current modal then mount the new one (default)
replace	Dismiss the current modal then mount the new one
none	Use a regular BottomSheet instead of BottomSheetModal

<TrueSheet stackBehavior="none" detents={[0.5, 1]}>
  {/* Content */}
</TrueSheet>

Use stackBehavior="none" when you need a non-modal sheet that doesn't participate in the modal stack.