### Start Expo Example Packager

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Starts the Metro server for the Expo example application.

```sh
yarn expo start
```

--------------------------------

### Start Bare Example Packager

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Starts the Metro server for the bare React Native example application.

```sh
yarn bare start
```

--------------------------------

### Install Dependencies

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/example/README.md

Run this command from the repository root to install all project dependencies.

```bash
yarn install
```

--------------------------------

### Prebuild Expo Example

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Before running the Expo example, prebuild the application using this command.

```sh
yarn expo prebuild
```

--------------------------------

### Run Expo Example

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/example/README.md

Navigate to the Expo example directory and run the iOS or Android application.

```bash
cd example/expo

# iOS
yarn ios

# Android
yarn android
```

--------------------------------

### Install React Navigation

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/navigation.mdx

Install the core React Navigation library before using the Sheet Navigator.

```bash
npm install @react-navigation/native
```

--------------------------------

### Run Bare React Native Example

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/example/README.md

Navigate to the bare example directory and run the iOS or Android application.

```bash
cd example/bare

# iOS
yarn ios

# Android
yarn android
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/README.md

Run this command to install all necessary project dependencies using Yarn.

```bash
yarn
```

--------------------------------

### Install with Expo

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/install.mdx

Use this command to install the package when working with Expo projects.

```sh
npx expo install @lodev09/react-native-true-sheet
```

--------------------------------

### Run Expo Example on iOS

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Builds and runs the Expo example application on an iOS simulator or device.

```sh
yarn expo ios
```

--------------------------------

### Run Bare Example on iOS

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Builds and runs the bare React Native example application on an iOS simulator or device.

```sh
yarn bare ios
```

--------------------------------

### Verify Bare Example Environment

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Before running the bare React Native example, use this command to check if your development environment is correctly configured.

```sh
yarn bare doctor
```

--------------------------------

### Start Local Development Server

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/README.md

Starts a local development server. Changes are reflected live without needing a server restart. Opens the project in your browser.

```bash
yarn start
```

--------------------------------

### Run Bare Example on Android

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Builds and runs the bare React Native example application on an Android device or emulator.

```sh
yarn bare android
```

--------------------------------

### Install TrueSheet with Expo

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/README.md

Use this command to install the TrueSheet package when using Expo.

```sh
npx expo install @lodev09/react-native-true-sheet
```

--------------------------------

### Run Expo Example on Android

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Builds and runs the Expo example application on an Android device or emulator.

```sh
yarn expo android
```

--------------------------------

### Install TrueSheet Usage Skill

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/usage.mdx

Install the TrueSheet Usage skill into your project using the provided npx command. This skill enhances your AI coding agent's knowledge of the TrueSheet component.

```sh
npx skills add lodev09/react-native-true-sheet
```

--------------------------------

### Install Web Dependencies for TrueSheet

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/web.mdx

Install the necessary Radix UI dependencies alongside the TrueSheet library for web support. These are optional peer dependencies.

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

--------------------------------

### Install Native Dependencies (iOS)

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/install.mdx

After adding the package to a bare React Native project, run this command to install the native iOS dependencies.

```sh
cd ios && pod install
```

--------------------------------

### Setup TrueSheetProvider for Web App

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/web.mdx

Wrap your entire application with TrueSheetProvider to enable TrueSheet functionality. This setup is also safe for native platforms.

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

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

--------------------------------

### Install TrueSheet with Bare React Native

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/README.md

Use these commands to add the TrueSheet package to a bare React Native project and install native dependencies.

```sh
yarn add @lodev09/react-native-true-sheet
cd ios && pod install
```

--------------------------------

### Basic TrueSheet Configuration

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/01-configuration.mdx

Example of configuring a TrueSheet with detents, background color, and a ref. Ensure detents are sorted from smallest to largest for recommended behavior.

```tsx
<TrueSheet
  ref={sheet}
  detents={['auto', 0.8, 1]}
  backgroundColor="#696969"
  // ...
>
  <View />
</TrueSheet>
```

--------------------------------

### Install with Yarn (Bare React Native)

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/install.mdx

Use this command to add the package to your project when using Yarn in a bare React Native environment.

```sh
yarn add @lodev09/react-native-true-sheet
```

--------------------------------

### Check Xcode Version

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/troubleshooting.mdx

Verify your installed Xcode version to ensure compatibility. The package requires Xcode 26.1 or later for correct background functionality.

```sh
xcodebuild -version
```

--------------------------------

### Add TrueSheet AI Skill

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/README.md

Install the TrueSheet Usage skill to enable AI coding agents to understand and generate correct TrueSheet code.

```sh
npx skills add lodev09/react-native-true-sheet
```

--------------------------------

### Configure Jest for TrueSheet mocks

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/jest.mdx

Configure Jest to use the setup file and transform the package. The `transformIgnorePatterns` config is required because the mock files use ESM syntax, telling Jest to transform the package instead of skipping it.

```json
{
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"],
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|@react-native|@lodev09/react-native-true-sheet)/)"
    ]
  }
}
```

--------------------------------

### Detent Configurations

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/SKILL.md

Provides examples of different detent configurations for TrueSheet, including 'auto', fractional heights, and combinations.

```tsx
// Content-sized sheet
<TrueSheet detents={['auto']} />

// Half and full screen
<TrueSheet detents={[0.5, 1]} />

// Three stops: peek, half, full
<TrueSheet detents={[0.25, 0.5, 1]} />
```

--------------------------------

### InsetAdjustment Example

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/04-types.mdx

Controls how the bottom safe area inset affects detent heights. Use 'never' to maintain precise sizing.

```tsx
<TrueSheet insetAdjustment="never">
  <View />
</TrueSheet>
```

--------------------------------

### Handling TrueSheet Lifecycle Events

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/02-events.mdx

Example of how to use various lifecycle event handlers like onWillPresent, onDidPresent, onDetentChange, onWillDismiss, and onDidDismiss with TrueSheet.

```tsx
const App = () => {
  const handleDismiss = () => {
    console.log('Bye bye')
  }

  const handleOnWillPresent = (e: WillPresentEvent) => {
    console.log(e.nativeEvent) // { index: 0, position: 123.5, detent: 0.5 }
    console.log('Sheet is about to be presented')
  }

  const handleOnDidPresent = (e: DidPresentEvent) => {
    console.log(e.nativeEvent) // { index: 0, position: 123.5, detent: 0.5 }
  }

  const handleDetentChange = (e: DetentChangeEvent) => {
    console.log(e.nativeEvent) // { index: 1, position: 234.5, detent: 0.8 }
  }

  return (
    <View>
      <Button title="Present" onPress={() => sheet.current?.present()} />
      <TrueSheet
        ref={sheet}
        detents={[0.5, 0.8]}
        onWillPresent={handleOnWillPresent}
        onDidPresent={handleOnDidPresent}
        onDetentChange={handleDetentChange}
        onWillDismiss={handleOnWillDismiss}
        onDidDismiss={handleOnDidDismiss}
      >
        <Button title="Resize" onPress={() => sheet.current?.resize(1)} />
        <Button title="Dismiss" onPress={() => sheet.current?.dismiss(1)} />
      </TrueSheet>
    </View>
  )
}
```

--------------------------------

### Native Header Prop Example

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/migration.mdx

Add a fixed header above scrollable content using the 'header' prop. The header is rendered as a native view and is accounted for in layout calculations for proper scrolling behavior.

```tsx
<TrueSheet header={<MyHeader />}>
  <FlatList data={items} renderItem={renderItem} />
</TrueSheet>
```

--------------------------------

### Workaround for Initial Present and Deep Linking on iOS

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/troubleshooting.mdx

To address issues with `initialDetentIndex` not working on iOS during deep linking from a cold start, use `useFocusEffect` to present the sheet when the screen gains focus. This ensures the sheet is presented correctly even if the initial render failed.

```tsx
import { useFocusEffect } from '@react-navigation/native';
import { useCallback } from 'react';

function HomeScreen() {
  const sheet = useRef<TrueSheet>(null);
  const [didPresent, setDidPresent] = useState(false);

  useFocusEffect(
    useCallback(() => {
      if (!didPresent) {
        sheet.current?.present();
      }
    }, [didPresent])
  );

  return (
    <View>
      <TrueSheet
        ref={sheet}
        initialDetentIndex={0}
        onDidPresent={() => setDidPresent(true)}
      >
        {/* ... */}
      </TrueSheet>
    </View>
  );
}
```

--------------------------------

### Mock TrueSheet and related modules for Jest

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/jest.mdx

Add these mocks to your Jest setup file to enable testing of components using TrueSheet. This includes mocks for the main component, navigation, and Reanimated integration.

```javascript
// jest.setup.js

// Main component
jest.mock('@lodev09/react-native-true-sheet',
  () =>
    require('@lodev09/react-native-true-sheet/mock')
);

// Navigation (if using)
jest.mock('@lodev09/react-native-true-sheet/navigation',
  () =>
    require('@lodev09/react-native-true-sheet/navigation/mock')
);

// Reanimated (if using)
jest.mock('@lodev09/react-native-true-sheet/reanimated',
  () =>
    require('@lodev09/react-native-true-sheet/reanimated/mock')
);
```

--------------------------------

### Define Sheet with Ref

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/03-methods.mdx

Define a TrueSheet component and provide a ref to access its imperative methods. This setup is common for controlling the sheet's state programmatically.

```tsx
const sheet = useRef<TrueSheet>(null)

return (
  <TrueSheet ref={sheet} detents={['auto', 0.8]}>
    <View />
  </TrueSheet>
)
```

--------------------------------

### Use useFocusEffect for Deep Links (iOS)

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/troubleshooting.md

On iOS, use `useFocusEffect` to present the sheet when the screen gains focus, resolving issues with `initialDetentIndex` not working from deep links on cold starts.

```tsx
import { useFocusEffect } from '@react-navigation/native'

useFocusEffect(
  useCallback(() => {
    sheet.current?.present(1)
  }, [])
)
```

--------------------------------

### Expo Router Integration with TrueSheet Navigator

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/navigation.mdx

Integrate TrueSheet Navigator with Expo Router using `withLayoutContext`. This example shows setting up a basic layout with index and details screens.

```tsx
// app/_layout.tsx
import { withLayoutContext } from 'expo-router';
import {
  createTrueSheetNavigator,
  type TrueSheetNavigationEventMap,
  type TrueSheetNavigationOptions,
  type TrueSheetNavigationState,
} from '@lodev09/react-native-true-sheet/navigation';

type ParamListBase = Record<string, object | undefined>;

const { Navigator } = createTrueSheetNavigator();

const Sheet = withLayoutContext<TrueSheetNavigationOptions,
  typeof Navigator,
  TrueSheetNavigationState<ParamListBase>,
  TrueSheetNavigationEventMap
>(Navigator);

export default function SheetLayout() {
  return (
    <Sheet>
      <Sheet.Screen name="index" />
      <Sheet.Screen
        name="details"
        options={{
          detents: ['auto', 1],
          cornerRadius: 16,
        }}
      />
    </Sheet>
  );
}
```

--------------------------------

### Enable Scrolling Content in TrueSheet

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/scrolling.mdx

Use the `scrollable` prop on `TrueSheet` to enable automatic ScrollView fitting. This example shows a basic setup with a header and a ScrollView.

```tsx
const App = () => {
  const sheet = useRef<TrueSheet>(null)

  return (
    <TrueSheet ref={sheet} scrollable>
      <View>{/* Header content */}</View>
      <ScrollView>
        <View />
      </ScrollView>
    </TrueSheet>
  )
}
```

--------------------------------

### Build Production Version

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/README.md

Generates static content for deployment into the 'build' directory. This can be hosted on any static hosting service.

```bash
yarn build
```

--------------------------------

### Clean Android build

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/migration.mdx

Navigate to the android directory and execute the clean Gradle task.

```sh
cd android
./gradlew clean
cd ..
```

--------------------------------

### Basic TrueSheet Implementation

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/SKILL.md

Demonstrates the simplest way to use TrueSheet with ref-based control. Requires importing `useRef` and `TrueSheet`.

```tsx
import { useRef } from 'react'
import { Button, Text, View } from 'react-native'
import { TrueSheet } from '@lodev09/react-native-true-sheet'

export function App() {
  const sheet = useRef<TrueSheet>(null)

  return (
    <View>
      <Button title="Open" onPress={() => sheet.current?.present()} />
      <TrueSheet ref={sheet} detents={['auto']} cornerRadius={24} grabber>
        <View style={{ padding: 16 }}>
          <Text>Hello from the sheet</Text>
          <Button title="Close" onPress={() => sheet.current?.dismiss()} />
        </View>
      </TrueSheet>
    </View>
  )
}
```

--------------------------------

### Dimming by Detent Index

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/dimming.mdx

Use `dimmedDetentIndex` to specify the detent index at which the sheet should start dimming. This is ignored if `dimmed` is `false`.

```tsx
export const App = () => {
  return (
    <TrueSheet
      detents={['auto', 0.69, 1]}
      dimmedDetentIndex={1} // Dim will start at 69% ✅
    >
      <View />
    </TrueSheet>
  )
}
```

--------------------------------

### Project Structure Overview

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/AGENTS.md

Illustrates the directory layout for the React Native True Sheet library, showing native component specs, TurboModule specs, Reanimated and React Navigation integrations, testing mocks, and platform-specific implementations.

```tree
src/
├── fabric/         # Native component specs (codegen input)
├── specs/          # TurboModule spec
├── reanimated/     # Reanimated integration
├── navigation/     # React Navigation integration
├── mocks/          # Testing mocks
├── __tests__/      # Unit tests
├── TrueSheet.tsx   # Main React component
└── *.web.tsx       # Web implementations

ios/
├── TrueSheetView.mm           # Host view (Fabric component)
├── TrueSheetViewController.mm # Sheet presentation controller
├── TrueSheetModule.mm         # TurboModule
├── TrueSheet*View.mm          # Container/Content/Header/Footer views
├── core/                      # BlurView, DetentCalculator, GrabberView
├── events/                    # Drag, Focus, Lifecycle, State events
└── utils/                     # Blur, Gesture, Layout, Window utilities

android/.../truesheet/
├── TrueSheetView.kt           # Host view
├── TrueSheetViewController.kt # BottomSheet controller
├── TrueSheetModule.kt         # TurboModule
├── TrueSheet*View.kt          # Container/Content/Header/Footer views
├── TrueSheet*ViewManager.kt   # View managers
├── core/                      # BottomSheetView, CoordinatorLayout, etc.
├── events/                    # Drag, Focus, Lifecycle, State events
└── utils/                     # Keyboard, Screen utilities

common/cpp/.../TrueSheetSpec/  # Shared C++ state and shadow nodes
```

--------------------------------

### Clean and reinstall iOS dependencies

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/migration.mdx

Navigate to the ios directory, remove old dependencies and build artifacts, and then reinstall pods.

```sh
cd ios
rm -rf Pods Podfile.lock build
pod install
cd ..
```

--------------------------------

### Web Control with Provider

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/SKILL.md

Illustrates using `TrueSheetProvider` and `useTrueSheet` for hook-based control, essential for web support. The provider is a no-op on native.

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

function Toolbar() {
  const { present, dismiss } = useTrueSheet()
  return <Button title="Open" onPress={() => present('settings')} />
}

export function App() {
  return (
    <TrueSheetProvider>
      <Toolbar />
      <TrueSheet name="settings" detents={[0.5, 1]}>
        <SettingsContent />
      </TrueSheet>
    </TrueSheetProvider>
  )
}
```

--------------------------------

### Publish New Version

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Uses release-it to automate the process of publishing new versions to npm, including version bumping and tag creation.

```sh
yarn release
```

--------------------------------

### React Navigation Integration with TrueSheet

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/advanced-patterns.md

Use createTrueSheetNavigator to integrate TrueSheet as screens within your React Navigation setup. This allows treating sheets as part of the navigation tree.

```tsx
import { createTrueSheetNavigator } from '@lodev09/react-native-true-sheet/navigation'

const Sheet = createTrueSheetNavigator()

function App() {
  return (
    <NavigationContainer>
      <Sheet.Navigator>
        {/* First screen = base content behind the sheet */}
        <Sheet.Screen name="Home" component={HomeScreen} />

        {/* Other screens present as sheets */}
        <Sheet.Screen
          name="Details"
          component={DetailsSheet}
          options={{
            detents: ['auto', 1],
            cornerRadius: 16,
            grabber: true,
          }}
        />
      </Sheet.Navigator>
    </NavigationContainer>
  )
}
```

--------------------------------

### Reanimated Integration for Position Events

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/navigation.mdx

Enable worklet-based position events for smooth UI thread animations by setting `reanimated: true` and providing a `positionChangeHandler`. Ensure `react-native-reanimated` is installed.

```tsx
// In your navigator
<Sheet.Screen
  name="Details"
  component={DetailsSheet}
  options={{
    reanimated: true,
    positionChangeHandler: (payload) => {
      'worklet';
      // Access payload.position, payload.detentIndex, etc.
      console.log(payload.position);
    },
  }}
/>
```

--------------------------------

### Present Sheet with Ref

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/03-methods.mdx

Use the `present` method via a ref to show the sheet. You can optionally specify a detent index and whether the animation should be enabled.

```tsx
await sheet.current?.present()

// Present without animation
await sheet.current?.present(0, false)
```

--------------------------------

### Footer with Safe Area Handling

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/migration.mdx

Example of how to handle the bottom safe area for a footer in a sheet using auto detent. Ensures the footer background extends into the safe area.

```tsx
import { Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const isIPad = Platform.OS === 'ios' && Platform.isPad;

const MyFooter = () => {
  const insets = useSafeAreaInsets();
  const bottomInset = isIPad ? 0 : insets.bottom;

  return (
    <View style={{ paddingBottom: bottomInset, backgroundColor: '#333' }}>
      <View style={{ height: 60, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Footer Content</Text>
      </View>
    </View>
  );
};

// Usage
<TrueSheet detents={['auto']} footer={<MyFooter />}>
  {/* content */}
</TrueSheet>
```

--------------------------------

### Run Unit Tests

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Executes the project's unit tests using Jest.

```sh
yarn test
```

--------------------------------

### Present TrueSheet on Mount

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/SKILL.md

Configure the sheet to present automatically when its content mounts by setting `initialDetentIndex` and `initialDetentAnimated`.

```tsx
<TrueSheet detents={['auto', 1]} initialDetentIndex={0} initialDetentAnimated>
  <WelcomeContent />
</TrueSheet>
```

--------------------------------

### iOS: ScrollView/FlatList within a Container

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/scrolling.mdx

On iOS, `scrollable` pins scroll views. This example demonstrates wrapping a `FlatList` in a container `View` to ensure proper detection within the sheet.

```tsx
<TrueSheet scrollable>
  <View style={{ flex: 1 }}>
    <View>{/* Header content */}</View>
    <FlatList data={data} renderItem={renderItem} />
  </View>
</TrueSheet>
```

--------------------------------

### Basic Sheet Navigator Usage

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/navigation.mdx

Set up a basic Sheet Navigator with a main screen and a screen presented as a sheet. Ensure NavigationContainer is used.

```tsx
import { NavigationContainer } from '@react-navigation/native';
import {
  createTrueSheetNavigator,
  useTrueSheetNavigation,
} from '@lodev09/react-native-true-sheet/navigation';

const Sheet = createTrueSheetNavigator();

function App() {
  return (
    <NavigationContainer>
      <Sheet.Navigator>
        {/* Base screen (first screen is the default) */}
        <Sheet.Screen name="Main" component={MainScreen} />
        {/* Sheet screens */}
        <Sheet.Screen
          name="Details"
          component={DetailsSheet}
          options={{ detents: ['auto', 1], cornerRadius: 16 }}
        />
      </Sheet.Navigator>
    </NavigationContainer>
  );
}
```

--------------------------------

### Programmatic Sheet Resize

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/SKILL.md

Resize the sheet programmatically using the `resize()` method, which accepts a detent index. For example, `resize(2)` targets the third detent in a list of detents.

```tsx
const sheet = useRef<TrueSheet>(null)

// detents={[0.3, 0.6, 1]}
await sheet.current?.resize(2) // expands to full (index 2)
```

--------------------------------

### onMount

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/02-events.mdx

Called when the sheet's content is mounted and ready. The sheet automatically waits for this event before presenting.

```APIDOC
## onMount

Called when the sheet's content is mounted and ready.
The sheet automatically waits for this event before presenting.
```

--------------------------------

### Basic TrueSheet Usage in React Native

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/README.md

Demonstrates how to use the TrueSheet component with imperative methods to present and dismiss the sheet. Ensure the component is imported and a ref is attached to control its lifecycle.

```tsx
import { TrueSheet } from "@lodev09/react-native-true-sheet"

export const App = () => {
  const sheet = useRef<TrueSheet>(null)

  // Present the sheet ✅
  const present = async () => {
    await sheet.current?.present()
    console.log('horray! sheet has been presented 💩')
  }

  // Dismiss the sheet ✅
  const dismiss = async () => {
    await sheet.current?.dismiss()
    console.log('Bye bye 👋')
  }

  return (
    <View>
      <Button onPress={present} title="Present" />
      <TrueSheet
        ref={sheet}
        detents={['auto', 1]}
      >
        <Button onPress={dismiss} title="Dismiss" />
      </TrueSheet>
    </View>
  )
}
```

--------------------------------

### Component Methods: present

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/03-methods.mdx

Presents the sheet. Optionally accepts a detent index and an animated flag. These methods are asynchronous.

```APIDOC
## Component Methods: present

### Description
Presents the sheet. Optionally accepts a detent index and an animated flag.

### Parameters
#### Path Parameters
- **index** (number) - Optional - The detent index to present the sheet at. Defaults to 0.
- **animated** (boolean) - Optional - Whether the presentation should be animated. Defaults to true.

### Request Example
```tsx
await sheet.current?.present()

// Present without animation
await sheet.current?.present(0, false)
```
```

--------------------------------

### iPad Presentation Prop Example

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/migration.mdx

Use the 'presentation' prop to control how the sheet is displayed on iPad. Defaults to 'page' for a large page sheet, or set to 'form' for a centered floating form sheet. Requires iOS 17+.

```tsx
<TrueSheet presentation="page" />
```

--------------------------------

### Run React Native app on iOS

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/migration.mdx

Command to build and run the React Native application on an iOS simulator or device.

```sh
npx react-native run-ios
```

--------------------------------

### Present Bottom Sheet on Mount

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/onmount.mdx

Set the `initialDetentIndex` prop to the desired detent index to present the sheet when it mounts. The `initialDetentAnimated` prop controls whether this initial presentation is animated.

```tsx
const App = () => {
  return (
    <TrueSheet
      detents={['auto', 0.69, 1]}
      initialDetentIndex={1}
      initialDetentAnimated
    >
      <View />
    </TrueSheet>
  )
}
```

--------------------------------

### Resize Bottom Sheet Programmatically

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/resizing.mdx

Use the `resize` method on a sheet's ref to change its detent. This example resizes the sheet to 69% of the screen height. Ensure the sheet ref is correctly assigned and the desired detent is defined in the `detents` prop.

```tsx
const App = () => {
  const sheet = useRef<TrueSheet>(null)

  const resize = async () => {
    // Resize to 69%
    await sheet.current?.resize(1)
    console.log('Yay, we are now at 69% 💦')
  }

  return (
    <TrueSheet name="resizing-sheet" ref={sheet} detents={['auto', 0.69, 1]}>
      <Button onPress={resize} title="Resize" />
    </TrueSheet>
  )
}
```

--------------------------------

### Sizing and Detents

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/configuration.md

Configure the snap points and maximum dimensions for the TrueSheet.

```APIDOC
## Sizing and Detents

### Description
Configure the snap points and maximum dimensions for the TrueSheet.

### Props

- `detents` (SheetDetent[]) - Up to 3 snap heights, sorted smallest → largest. Values: `'auto'` or `0`–`1`.
- `maxContentHeight` (number) - Absolute max height in dp.
- `maxContentWidth` (number) - Max width. On Android/Web defaults to 640dp.
```

--------------------------------

### Changelog Entry Format

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/AGENTS.md

Specifies the format for adding user-facing changes to the `CHANGELOG.md` file. Entries should be categorized into 'New features', 'Bug fixes', or 'Others', and include platform, description, PR number, and author.

```markdown
Format: `- **Platform**: Description. ([#123](https://github.com/lodev09/react-native-true-sheet/pull/123) by [@username](https://github.com/username))`
```

--------------------------------

### Reanimated True Sheet Integration Example

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/migration.mdx

Integrate Reanimated v4 with TrueSheet using dedicated components and hooks. Wrap your app with ReanimatedTrueSheetProvider, use ReanimatedTrueSheet, and access animated values with useReanimatedTrueSheet for custom animations. The onPositionChange event runs on the UI thread (worklet) when using ReanimatedTrueSheet.

```tsx
import {
  ReanimatedTrueSheetProvider,
  ReanimatedTrueSheet,
  useReanimatedTrueSheet,
} from '@lodev09/react-native-true-sheet/reanimated'
import Animated, { useAnimatedStyle, interpolate, Extrapolation } from 'react-native-reanimated'

// 1. Wrap your app with the provider
const App = () => (
  <ReanimatedTrueSheetProvider>
    <YourApp />
  </ReanimatedTrueSheetProvider>
)

// 2. Use ReanimatedTrueSheet instead of TrueSheet
const MySheet = () => (
  <ReanimatedTrueSheet detents={[0.3, 0.6, 1]} initialDetentIndex={1}>
    <Text>Sheet Content</Text>
  </ReanimatedTrueSheet>
)

// 3. Access the sheet's position for custom animations
const MyAnimatedComponent = () => {
  const { animatedPosition, animatedIndex } = useReanimatedTrueSheet()

  const positionStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: -animatedPosition.value }],
  }))

  // Example: Fade in as sheet expands from index 0 to 1
  const opacityStyle = useAnimatedStyle(() => ({
    opacity: interpolate(animatedIndex.value, [0, 1], [0, 1], Extrapolation.CLAMP)
  }))

  return (
    <Animated.View style={[opacityStyle, positionStyle]}>
      <Text>This moves with the sheet</Text>
    </Animated.View>
  )
}
```

--------------------------------

### Present a Sheet Globally

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/global-methods.mdx

Import TrueSheet and use the static `present` method, passing the name of the sheet you wish to display. This allows you to trigger the sheet from any component, regardless of its position in the component tree.

```tsx
import { TrueSheet } from '@lodev09/react-native-true-sheet'

const SomeComponent = () => {
  const presentMySheet = () => {
    TrueSheet.present('my-sheet') // 🎉
  }

  return (
    <Button onPress={presentMySheet} title="Present My Sheet" />
  )
}
```

--------------------------------

### Basic Header Implementation

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/header.mdx

Use the `header` prop to add a simple header view above the scrollable content. The content area height is automatically adjusted.

```tsx
const App = () => {
  return (
    <TrueSheet
      ref={sheet}
      header={
        <View style={styles.header}>
          <Text>My Header</Text>
        </View>
      }
    >
      <ScrollView>
        <View>{/* Your scrollable content */}</View>
      </ScrollView>
    </TrueSheet>
  )
}

const styles = StyleSheet.create({
  header: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
})
```

--------------------------------

### Interaction Settings

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/configuration.md

Control user interaction behaviors like dismissing and dragging.

```APIDOC
## Interaction

### Description
Control user interaction behaviors like dismissing and dragging.

### Props

- `dismissible` (boolean) - Whether the user can swipe to dismiss (default: `true`).
- `draggable` (boolean) - Whether the user can drag to resize (default: `true`).
```

--------------------------------

### Run React Native app on Android

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/migration.mdx

Command to build and run the React Native application on an Android emulator or device.

```sh
npx react-native run-android
```

--------------------------------

### Import TrueSheet Component

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/usage.mdx

Import the TrueSheet component from the library. This is the first step to using the bottom sheet.

```tsx
import { TrueSheet } from "@lodev09/react-native-true-sheet"
```

--------------------------------

### Global Methods for TrueSheet (Native)

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/api.md

Use these methods to control TrueSheet instances by their name on native platforms. They return Promises that resolve upon animation completion.

```tsx
await TrueSheet.present(name: string, index?: number, animated?: boolean)
await TrueSheet.dismiss(name: string, animated?: boolean)
await TrueSheet.dismissStack(name: string, animated?: boolean)
await TrueSheet.resize(name: string, index: number)
await TrueSheet.dismissAll(animated?: boolean)
```

--------------------------------

### Type-Check Files

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Performs type checking on project files using TypeScript.

```sh
yarn typecheck
```

--------------------------------

### Global Methods: present

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/03-methods.mdx

Presents a sheet globally by its name. Optionally accepts a detent index and an animated flag.

```APIDOC
## Global Methods: present

### Description
Presents a sheet globally by its name. Optionally accepts a detent index and an animated flag.

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the sheet to present.
- **index** (number) - Optional - The detent index to present the sheet at. Defaults to 0.
- **animated** (boolean) - Optional - Whether the presentation should be animated. Defaults to true.

### Request Example
```tsx
await TrueSheet.present('my-sheet')

// Present without animation
await TrueSheet.present('my-sheet', 0, false)
```
```

--------------------------------

### Lint Files

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Lints project files using ESLint to enforce code style and identify potential issues.

```sh
yarn lint
```

--------------------------------

### Header with Search Input

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/header.mdx

Implement a search bar within the `header` prop for common search functionality. The `FlatList` content will correctly adjust its height.

```tsx
const App = () => {
  return (
    <TrueSheet
      ref={sheet}
      header={
        <View style={styles.header}>
          <TextInput placeholder="Search..." style={styles.input} />
        </View>
      }
    >
      <FlatList
        data={items}
        renderItem={({ item }) => <ItemRow item={item} />}
      />
    </TrueSheet>
  )
}
```

--------------------------------

### Background Blur Behavior Change

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/migration.mdx

Demonstrates how background blur now applies over the background color in v3, unlike v2 where it would override it. Shows combining background color and blur, or using blur alone.

```tsx
// ❌ v2 - backgroundBlur overrides backgroundColor (backgroundColor is ignored)
<TrueSheet backgroundColor="red" backgroundBlur="light" />

// ✅ v3 - backgroundBlur applies over backgroundColor (red + light blur)
<TrueSheet backgroundColor="red" backgroundBlur="light" />

// If you want only blur without background color:
<TrueSheet backgroundBlur="light" />
```

--------------------------------

### Verify and Fix Code Style

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/CONTRIBUTING.md

Runs TypeScript and ESLint to verify code quality and automatically fix style issues.

```sh
yarn tidy
```

--------------------------------

### Ref Methods

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/api.md

Methods available on a TrueSheet instance. These methods return a Promise that resolves when the animation completes.

```APIDOC
## present

### Description
Show the sheet.

### Signature
`(index?: number, animated?: boolean) => Promise<void>`

### Parameters
- **index** (number) - Optional - Defaults to 0 (first detent).
- **animated** (boolean) - Optional - Whether to animate the presentation.

### Returns
A Promise that resolves when the animation completes.
```

```APIDOC
## dismiss

### Description
Hide the sheet and all sheets stacked on top.

### Signature
`(animated?: boolean) => Promise<void>`

### Parameters
- **animated** (boolean) - Optional - Whether to animate the dismissal.

### Returns
A Promise that resolves when the animation completes.
```

```APIDOC
## dismissStack

### Description
Hide only the sheets stacked on top, keeping the current sheet visible.

### Signature
`(animated?: boolean) => Promise<void>`

### Parameters
- **animated** (boolean) - Optional - Whether to animate the dismissal.

### Returns
A Promise that resolves when the animation completes.
```

```APIDOC
## resize

### Description
Snap to a detent by index.

### Signature
`(index: number) => Promise<void>`

### Parameters
- **index** (number) - Required - The index of the detent to snap to.

### Returns
A Promise that resolves when the animation completes.
```

--------------------------------

### React Navigation Integration

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/advanced-patterns.md

Use `createTrueSheetNavigator()` to treat sheets as screens within your React Navigation tree. This allows for seamless management of sheet states and transitions.

```APIDOC
## React Navigation Integration

### Setup

```tsx
import { createTrueSheetNavigator } from '@lodev09/react-native-true-sheet/navigation'

const Sheet = createTrueSheetNavigator()

function App() {
  return (
    <NavigationContainer>
      <Sheet.Navigator>
        {/* First screen = base content behind the sheet */}
        <Sheet.Screen name="Home" component={HomeScreen} />

        {/* Other screens present as sheets */}
        <Sheet.Screen
          name="Details"
          component={DetailsSheet}
          options={{
            detents: ['auto', 1],
            cornerRadius: 16,
            grabber: true,
          }}
        />
      </Sheet.Navigator>
    </NavigationContainer>
  )
}
```

### Screen Options

All TrueSheet props are available as screen `options`, plus:

| Option | Type | Description |
|--------|------|-------------|
| `detentIndex` | `number` | Initial detent when the sheet presents (default: `0`) |
| `reanimated` | `boolean` | Enable worklet-based position tracking |
| `positionChangeHandler` | `worklet` | Worklet called on position changes (requires `reanimated: true`) |

### `useTrueSheetNavigation()` Hook

```tsx
const navigation = useTrueSheetNavigation()

navigation.resize(1)         // resize to a detent
navigation.goBack()          // dismiss current sheet

// Dynamic options
navigation.setOptions({
  footer: <UpdatedFooter />,
})
```

### Screen Event Listeners

```tsx
navigation.addListener('sheetDidPresent', (e) => {})
navigation.addListener('sheetDetentChange', (e) => {})
```

Available events: `sheetWillPresent`, `sheetDidPresent`, `sheetWillDismiss`, `sheetDidDismiss`, `sheetDetentChange`, `sheetDragBegin`, `sheetDragChange`, `sheetDragEnd`, `sheetPositionChange`.

### Web Caveat

On web, navigation-based sheets need `useFocusEffect` to trigger present/dismiss since the native lifecycle differs.
```

--------------------------------

### Global Methods (Native Only)

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/api.md

Global methods for TrueSheet that are only available on native platforms. They are addressed by name and have the same behavior as ref methods.

```APIDOC
## TrueSheet.present

### Description
Show the sheet identified by name.

### Signature
`(name: string, index?: number, animated?: boolean) => Promise<void>`

### Parameters
- **name** (string) - Required - The name of the sheet to present.
- **index** (number) - Optional - The detent index to present at.
- **animated** (boolean) - Optional - Whether to animate the presentation.

### Returns
A Promise that resolves when the animation completes.
```

```APIDOC
## TrueSheet.dismiss

### Description
Hide the sheet identified by name.

### Signature
`(name: string, animated?: boolean) => Promise<void>`

### Parameters
- **name** (string) - Required - The name of the sheet to dismiss.
- **animated** (boolean) - Optional - Whether to animate the dismissal.

### Returns
A Promise that resolves when the animation completes.
```

```APIDOC
## TrueSheet.dismissStack

### Description
Hide sheets stacked on top of the sheet identified by name.

### Signature
`(name: string, animated?: boolean) => Promise<void>`

### Parameters
- **name** (string) - Required - The name of the sheet whose stacked sheets should be dismissed.
- **animated** (boolean) - Optional - Whether to animate the dismissal.

### Returns
A Promise that resolves when the animation completes.
```

```APIDOC
## TrueSheet.resize

### Description
Snap the sheet identified by name to a specific detent index.

### Signature
`(name: string, index: number) => Promise<void>`

### Parameters
- **name** (string) - Required - The name of the sheet to resize.
- **index** (number) - Required - The detent index to snap to.

### Returns
A Promise that resolves when the animation completes.
```

```APIDOC
## TrueSheet.dismissAll

### Description
Closes every sheet in the current context.

### Signature
`(animated?: boolean) => Promise<void>`

### Parameters
- **animated** (boolean) - Optional - Whether to animate the dismissal.

### Returns
A Promise that resolves when the animation completes.
```

--------------------------------

### Resize Sheet with Ref

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/03-methods.mdx

Programmatically resize the sheet to a specified detent index using the `resize` method via a ref. The sheet must be presented before calling this method.

```tsx
// Resize to 80%
await sheet.current?.resize(1)
```

--------------------------------

### TrueSheet with Fixed Header and Footer

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/SKILL.md

Implement fixed header and footer sections using the `header` and `footer` props. These props render within native container views, simplifying layout management.

```tsx
<TrueSheet
  detents={[0.5, 1]}
  scrollable
  header={
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Title</Text>
    </View>
  }
  footer={<BottomActions />}
>
  <ScrollView>{/* ... */}</ScrollView>
</TrueSheet>
```

--------------------------------

### Global TrueSheet Methods (Native Only)

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/SKILL.md

These methods are available globally on the TrueSheet object for native platforms.

```APIDOC
## TrueSheet.present(name, index?, animated?)

### Description
Presents a sheet by its registered name.

### Parameters
- **name** (string) - Required - The registered name of the sheet.
- **index** (number) - Optional - The index of the detent to snap to.
- **animated** (boolean) - Optional - Whether to animate the presentation.
```

```APIDOC
## TrueSheet.dismiss(name, animated?)

### Description
Dismisses a sheet by its registered name.

### Parameters
- **name** (string) - Required - The registered name of the sheet.
- **animated** (boolean) - Optional - Whether to animate the dismissal.
```

```APIDOC
## TrueSheet.dismissStack(name, animated?)

### Description
Dismisses sheets stacked on top of a specific sheet.

### Parameters
- **name** (string) - Required - The registered name of the sheet.
- **animated** (boolean) - Optional - Whether to animate the dismissal.
```

```APIDOC
## TrueSheet.resize(name, index)

### Description
Resizes a sheet to a specific detent by index.

### Parameters
- **name** (string) - Required - The registered name of the sheet.
- **index** (number) - Required - The index of the detent to snap to.
```

```APIDOC
## TrueSheet.dismissAll(animated?)

### Description
Dismisses all currently presented sheets.

### Parameters
- **animated** (boolean) - Optional - Whether to animate the dismissal.
```

--------------------------------

### BlurOptions

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/04-types.mdx

Provides options to customize the background blur effect when `backgroundBlur` is enabled.

```APIDOC
## BlurOptions

### Description
Provides options to customize the background blur effect when `backgroundBlur` is enabled.

### Properties

| Property | Type | Description | Default |
| - | - | - | - |
| `intensity` | `number` | The intensity of the blur effect (0-100). | _system default_ |
| `interaction` | `boolean` | Enables or disables user interaction on the blur view. Disabling can help with visual artifacts on iOS 18+. | `true` |
```

--------------------------------

### Reanimated Integration

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/advanced-patterns.md

Enable advanced animations and gesture handling with Reanimated by integrating `ReanimatedTrueSheetProvider` and `ReanimatedTrueSheet`.

```APIDOC
## Reanimated Integration

Requires `react-native-reanimated` >=4 and `react-native-worklets` (mandatory dependency of Reanimated 4+). Both packages are optional TrueSheet peer dependencies — you only need them if you use TrueSheet's Reanimated features.

### Provider Setup

```tsx
import { ReanimatedTrueSheetProvider } from '@lodev09/react-native-true-sheet/reanimated'

function App() {
  return (
    <ReanimatedTrueSheetProvider>
      <YourApp />
    </ReanimatedTrueSheetProvider>
  )
}
```

### Using `ReanimatedTrueSheet`

```tsx
import { ReanimatedTrueSheet } from '@lodev09/react-native-true-sheet/reanimated'

<ReanimatedTrueSheet ref={sheetRef} detents={[0.3, 0.6, 1]}>
  <Content />
</ReanimatedTrueSheet>
```

### Animated Values

Access shared values from anywhere inside the provider:

```tsx
import { useReanimatedTrueSheet } from '@lodev09/react-native-true-sheet/reanimated'

function AnimatedBackdrop() {
  const { animatedPosition, animatedIndex, animatedDetent } = useReanimatedTrueSheet()

  const style = useAnimatedStyle(() => ({
    opacity: interpolate(animatedIndex.value, [0, 1], [0, 0.5], Extrapolation.CLAMP),
  }))

  return <Animated.View style={[StyleSheet.absoluteFill, style]} />
}
```

| Value | Type | Description |
|-------|------|-------------|
| `animatedPosition` | `SharedValue<number>` | Y position relative to screen top |
| `animatedIndex` | `SharedValue<number>` | Continuous float (0.5 = between detent 0 and 1) |
| `animatedDetent` | `SharedValue<number>` | Current detent value (0–1) |
```

--------------------------------

### Optimize Footer with ReactElement

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/guides/footer.mdx

For better performance, use a `ReactElement` directly for the footer instead of a component reference. This avoids unnecessary re-renders.

```tsx
const App = () => {
  return (
    <TrueSheet
      ref={sheet}
      footer={
        <View>
          <Text>My Foot-er is more awesome.</Text>
        </View>
      }
    >
      <View />
    </TrueSheet>
  )
}
```

--------------------------------

### Header and Footer

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/configuration.md

Add fixed header and footer elements to the TrueSheet.

```APIDOC
## Header and Footer

### Description
Add fixed header and footer elements to the TrueSheet.

### Props

- `header` (ReactElement) - Fixed header rendered above content in a native container. Height is auto-deducted from available space.
- `headerStyle` (ViewStyle) - Style for header container.
- `footer` (ReactElement | ComponentType) - Fixed footer below content. Prefer passing an element over a component for perf.
- `footerStyle` (ViewStyle) - Style for footer container.
```

--------------------------------

### Dimming Overlay

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/configuration.md

Configure the dimming overlay that appears behind the sheet.

```APIDOC
## Dimming

### Description
Configure the dimming overlay that appears behind the sheet.

### Props

- `dimmed` (boolean) - Show background dim overlay (default: `true`).
- `dimmedDetentIndex` (number) - Detent index at which dimming activates. Set to `1` to keep background interactive at the first detent (default: `0`).
```

--------------------------------

### TrueSheet Provider for Web

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/skills/truesheet-usage/references/advanced-patterns.md

On web platforms, TrueSheet requires the TrueSheetProvider to be set up. This provider is a pass-through on native platforms but is essential for web functionality.

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

function App() {
  return (
    <TrueSheetProvider>
      <YourApp />
    </TrueSheetProvider>
  )
}
```

--------------------------------

### onWillPresent

Source: https://github.com/lodev09/react-native-true-sheet/blob/main/docs/versioned_docs/version-3.11.0/reference/02-events.mdx

Comes with [`DetentInfoEventPayload`](types#detentinfoeventpayload). This is called when the sheet is about to be presented.

```APIDOC
## onWillPresent

Comes with [`DetentInfoEventPayload`](types#detentinfoeventpayload).

This is called when the sheet is about to be presented.
```