> For the complete documentation index, see [llms.txt](https://the-sheet.gitbook.io/the-sheet-v2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-sheet.gitbook.io/the-sheet-v2/docs/getting-started/quick-start-kit.md).

# Quick Start Kit

## Installation

First, you need to determine which version of React Native Reanimated you are using (Refer to [Compatibility](/the-sheet-v2/docs/getting-started/compatibility.md) for more details)

Then, you can install the corresponding version of our library

For example, if you are using Reanimated v4, you would install v2 of our library like this:

```bash
npm install @the-sheet/the-sheet@2.0.23
```

Required peer dependencies:

* `react-native-reanimated`
* `react-native-gesture-handler`
* `react-native-safe-area-context`

### Optional dependencies

`@the-sheet/universe-portal`: Install if you need portal features and don't have a library of your own yet

* What are React Portals? <https://www.w3schools.com/react/react\\_portals.asp>

***

`@the-sheet/embedded-stack-navigator`: Install if you want a navigator to work within the bottom sheet

***

`@shopify/flash-list`: Install if you want to use `BottomSheetFlashList` for performant lists with the bottom sheet

### 🧪 Experimental

While the library is stable enough for use, it is currently in a rapid experimentation phase regarding its API

* I recommend pinning a specific version for your projects

## Sample code snippet

* Check out full examples and test cases: [Example Expo App](/the-sheet-v2/apps/example-expo.md)

### Wrap your app with necessary providers

NOTE: Ignore portals if you don't use them

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import {
  SheetStackProvider,
  SheetKeyboardProvider,
  BottomSheetRegistryProvider,
} from '@the-sheet/the-sheet'
import { PortalHost, PortalProvider } from '@the-sheet/universe-portal'

export default function App() {
  return (
    <SafeAreaProvider>
      <SheetKeyboardProvider
        androidWindowSoftInputMode={/* Your app's Android window soft input mode */}
      >
        <SheetStackProvider debug>
          <PortalProvider>
            <BottomSheetRegistryProvider>
              <GestureHandlerRootView>
                {/* Your app content */}
                <PortalHost name="root" debug />
              </GestureHandlerRootView>
            </BottomSheetRegistryProvider>
          </PortalProvider>
        </SheetStackProvider>
      </SheetKeyboardProvider>
    </SafeAreaProvider>
  )
}
```

### Use only components you need for your use case

In this sample, we create a simple bottom sheet with:

* Dynamic sizing
* Backdrop
* Handle
* Static content that is aware of pan gesture (using `BottomSheetView`)

When you drag the handle or the content, the sheet will follow your finger

```tsx
import { Fragment, useState } from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'
import {
  Backdrop,
  BottomSheet,
  BottomSheetHandle,
  BottomSheetPresenter,
  BottomSheetProvider,
  BottomSheetView,
  SheetStackItem,
} from '@the-sheet/the-sheet'
import { Portal } from '@the-sheet/universe-portal'

export default function ExampleBottomSheetView() {
  const [isOpenA, setIsOpenA] = useState(false)

  const renderContent = () => {
    return (
      <Fragment>
        {Array.from({ length: 20 }).map((_, index) => (
          <Text key={index}>Item {index + 1}</Text>
        ))}
      </Fragment>
    )
  }

  return (
    <View style={styles.root}>
      <Text style={styles.header}>Example Bottom Sheet View</Text>

      <Button title="Open Sheet A" onPress={() => setIsOpenA(true)} />

      <Portal hostName="root">
        <SheetStackItem
          isOpen={isOpenA}
          close={() => setIsOpenA(false)}
          waitForFullyExit
          testID="sheetA"
        >
          <Backdrop />

          <BottomSheetPresenter>
            <BottomSheetProvider>
              <BottomSheet>
                <BottomSheetHandle />

                <BottomSheetView>
                  <Text>Sheet A</Text>
                  <Button
                    title="Close Sheet A"
                    onPress={() => setIsOpenA(false)}
                  />
                  {renderContent()}
                </BottomSheetView>
              </BottomSheet>
            </BottomSheetProvider>
          </BottomSheetPresenter>
        </SheetStackItem>
      </Portal>
    </View>
  )
}

// Styles

const styles = StyleSheet.create({
  header: {
    fontSize: 20,
    fontWeight: '500',
  },
  root: {
    flex: 1,
    gap: 8,
    padding: 16,
  },
})
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://the-sheet.gitbook.io/the-sheet-v2/docs/getting-started/quick-start-kit.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.