Version: Next 🚧

Migrate from `react-native-actions-sheet`

Despite its name, react-native-actions-sheet is a bottom sheet for any content. Your own content moves to BottomSheet. A sheet that only lists actions (Share, Edit, Delete) is shorter as an ActionSheet.

- import ActionSheet, { type ActionSheetRef } from 'react-native-actions-sheet';
+ import { BottomSheet } from '@elik56a/react-native-pickers';

- const ref = useRef<ActionSheetRef>(null);
- ref.current?.show();
+ const [open, setOpen] = useState(false);
+ setOpen(true);

- <ActionSheet ref={ref} gestureEnabled onClose={onClose}>
+ <BottomSheet visible={open} onClose={() => setOpen(false)} onClosed={onClose}>
    <Filters />
- </ActionSheet>
+ </BottomSheet>

react-native-actions-sheet	React Native Pickers
`ref.show()` / `ref.hide()`	`visible`, set to `false` in `onClose`
`SheetManager.show(id, { payload })` / `registerSheet`	render the sheet where you use it, pass the payload as props
`gestureEnabled`	`enableSwipeToClose` (default `true`)
`closeOnTouchBackdrop`	`closeOnBackdropPress`
`closeOnPressBack`	`onClose` is called on Android Back
`snapPoints={[50, 100]}`	`height={0.5}` and `expandedHeight={1}`
`onOpen` / `onClose`	`onOpened` / `onClosed`, after the animation
`containerStyle`	`styles={{ sheet }}`
`indicatorStyle`	`styles={{ handle }}`
`CustomHeaderComponent` / `headerAlwaysVisible`	`title`, `headerLeft`, `headerRight`
`keyboardHandlerEnabled`	built in
`ScrollView` / `FlatList` from the library	React Native's own, with a fixed `height`
`isModal={false}` (no backdrop, taps pass through)	—
`useSheetRouter` (pages inside one sheet)	—

See all migration guides for other libraries.