Migrate from react-native-actions-sheet
react-native-actions-sheet needs Reanimated, Worklets, Gesture Handler and Safe Area Context installed next to it. React Native Pickers' sheets use React Native core only, so there's nothing else to install or keep in step.
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.
Code changes​
- 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>
Props​
| 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.