Web Support

Yes, TrueSheet supports web! It ships a vendored drawer implementation so the same API works across iOS, Android, and Web.

Installation

Install @radix-ui/react-dialog and @radix-ui/react-presence alongside @lodev09/react-native-true-sheet. They're declared as optional peer dependencies and provide the underlying dialog primitives for the web renderer.

yarn add @radix-ui/react-dialog @radix-ui/react-presence

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.

Controlling Sheets

On web, use the useTrueSheet hook or refs to control sheets. Static methods like TrueSheet.present() are not supported on web.

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, dismissAll } = 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 on native.

Detached Mode

Use the detached prop to render the sheet as a floating card, not attached to the bottom edge. Use detachedOffset to control the spacing from the bottom:

<TrueSheet detached detachedOffset={24} detents={[0.5]}>
  {/* Content */}
</TrueSheet>