Scrolling Content

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 to reference the scrollable component, allowing iOS to handle it automatically.

This works for FlatList as well.

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.

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

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