react-native-sheet-transitions

Wrap your application (or the relevant part of your component tree) with the SheetProvider component to enable sheet transition state management. This provider manages the shared scale value used for transitions and provides the useSheet hook to child components.

Props

• children: The components to be wrapped.
• resizeType (optional): Determines the resize behavior. Defaults to 'decremental'. Supported values are 'incremental' or 'decremental'.
• enableForWeb (optional): A boolean to enable sheet transitions on web platforms. Defaults to false.

import { SheetProvider } from 'react-native-sheet-transitions';

function App() {
  return (
    <SheetProvider resizeType="decremental" enableForWeb={true}>
      <YourAppContent />
    </SheetProvider>
  );
}

You can control which swipe directions trigger the closing of the sheet using the dragDirections prop. This is useful if you want a sheet that only slides down or only slides sideways.

By default, toBottom is set to true. If isScrollable is enabled, the component intelligently manages the interaction between scrolling and dragging (e.g., toBottom will only trigger if the user is at the top of the scrollable content).

<SheetScreen
  onClose={handleClose}
  dragDirections={{
    toTop: false,
    toBottom: true,
    toLeft: false,
    toRight: false
  }}
>
  {/* Content */}
</SheetScreen>

The springConfig prop allows you to customize the physics of the sheet's movement using react-native-reanimated spring settings. This affects how the sheet snaps back to its position or completes its closing animation.

import { SpringConfig } from 'react-native-sheet-transitions';

const mySpringConfig: SpringConfig = {
  damping: 20,
  stiffness: 90,
  mass: 1,
  restDisplacementThreshold: 0.01,
  restSpeedThreshold: 0.01,
};

// Usage
<SheetScreen
  onClose={handleClose}
  springConfig={mySpringConfig}
>
  {/* Content */}
</SheetScreen>

The SheetProvider component acts as the context provider for the sheet system, and the useSheet hook allows you to interact with the sheet state (such as opening or closing sheets) from any child component within the provider's tree.

import { SheetProvider, useSheet } from 'react-native-sheet-transitions';

function App() {
  return (
    <SheetProvider>
      <MyComponent />
    </SheetProvider>
  );
}

function MyComponent() {
  const { openSheet } = useSheet();
  // ... use openSheet to trigger transitions
}

The SheetScreen component is used to define the content and behavior of a sheet. It is typically used in conjunction with the SheetProvider to render specific sheet views during transitions.

import { SheetScreen } from 'react-native-sheet-transitions';

function MySheet() {
  return (
    <SheetScreen>
      {/* Your sheet content goes here */}
    </SheetScreen>
  );
}

The SheetProvider component accepts the following props to configure the global behavior of sheets within its context:

• children: The React nodes to be wrapped.
• springConfig: An optional SpringConfig (aliased from WithSpringConfig) to define the spring physics for sheet transitions.
• resizeType: Determines how the sheet behaves during resizing. Options are 'incremental' or 'decremental'.

<SheetProvider springConfig={{ damping: 20 }} resizeType='incremental'>
  <App />
</SheetProvider>

When configuring a SheetScreen, you can restrict the directions in which a user can drag the sheet using the DragDirections interface. This is useful for preventing accidental swipes in unintended directions.

Properties:

• toTop: Boolean
• toBottom: Boolean
• toLeft: Boolean
• toRight: Boolean

const dragDirections: DragDirections = {
  toTop: true,
  toBottom: false,
  toLeft: false,
  toRight: false
};

The library exports several key types for configuring sheets and transitions:

• SheetScreenProps: Configuration properties for the SheetScreen component.
• SpringConfig: Configuration object for spring-based animations.
• DragDirections: Defines the allowed directions for sheet dragging.