`Scrolling`

Using ScrollView or FlatList inside a action sheet can become tricky because you have to handle gestures along with scrolling at the same time. You can import ScrollView and FlatList from the library to have scrolling and gestures work nicely together.

import ActionSheet, {ScrollView, FlatList} from 'react-native-actions-sheet';
 
const ExampleSheet = () => {
  return (
    <ActionSheet>
      <ScrollView />
    </ActionSheet>
  );
};

Scrolling with other Scrollable components

If you have a scrollable component such as WebView or a DatePicker, you can use the useScrollHandlers hook and NativeViewGestureHandler to enable scrolling inside the View.

import {ScrollView} from 'react-native';
import ActionSheet, {useScrollHandlers} from 'react-native-actions-sheet';
import {NativeViewGestureHandler} from 'react-native-gesture-handler';
 
const Sheet = () => {
  const handlers = useScrollHandlers();
  return (
    <ActionSheet>
      <NativeViewGestureHandler
        simultaneousHandlers={handlers.simultaneousHandlers}>
        <ScrollView {...handlers}></ScrollView>
      </NativeViewGestureHandler>
    </ActionSheet>
  );
};

Last updated on January 29, 2024