---
title: Scrolling Content
description: Handle scrolling content within the bottom sheet.
keywords: [bottom sheet scrolling, bottom sheet scrollview, bottom sheet flatlist]
---

Scrolling content within the sheet requires some special configuration on both iOS and Android. Let's admit, some things just don't work out of the box.

Follow the guide below so you can scroll your content using `TrueSheet`.

## How?

### IOS

On iOS, use [`scrollRef`](/reference/props#scrollref) to reference the scrollable component, allowing iOS to handle it automatically.

This works for `FlatList` as well.

```tsx {6-7}
const App = () => {
  const sheet = useRef<TrueSheet>(null)
  const scrollview = useRef<ScrollView>(null)

  return (
    <TrueSheet ref={sheet} scrollRef={scrollview}>
      <ScrollView ref={scrollview} nestedScrollEnabled>
        <View />
      </ScrollView>
    </TrueSheet>
  )
}
```

### Android

On Android, `nestedScrollEnabled` needs to be enabled so that scrolling works when the sheet is expanded to its `maxHeight`.

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

  return (
    <TrueSheet ref={sheet}>
      <ScrollView nestedScrollEnabled>
        <View />
      </ScrollView>
    </TrueSheet>
  )
}
```
