Skip to main content
Version: Next 🚧

Migrate from @expo/react-native-action-sheet

Keep calling a function: useActionSheet has the same name and returns show, which opens ActionSheet. Each action carries its own onPress, so there are no indexes to match up. Render the returned actionSheet once in the component, and remove <ActionSheetProvider> from your app root.

- import { useActionSheet } from '@expo/react-native-action-sheet';
+ import { useActionSheet } from '@elik56a/react-native-pickers';

- const { showActionSheetWithOptions } = useActionSheet();
+ const { show, actionSheet } = useActionSheet();
const openMenu = () =>
- showActionSheetWithOptions(
- { options: ['Share', 'Delete', 'Cancel'], destructiveButtonIndex: 1, cancelButtonIndex: 2, title: 'Photo' },
- (index) => {
- if (index === 0) share();
- if (index === 1) remove();
- }
- );
+ show({
+ title: 'Photo',
+ actions: [
+ { label: 'Share', onPress: share },
+ { label: 'Delete', destructive: true, onPress: remove },
+ ],
+ });

return (
<>
<Button title="Photo options" onPress={openMenu} />
+ {actionSheet}
</>
);

Prefer state? <ActionSheet visible={open} onClose={() => setOpen(false)} actions={…} /> takes the same props.

@expo/react-native-action-sheetReact Native Pickers
showActionSheetWithOptions(options, callback)show(options) from useActionSheet, or <ActionSheet visible>
optionsactions: { label, onPress } each
callback(index)each action's onPress, run after the sheet closes
cancelButtonIndexshowCancel and cancelLabel; Cancel isn't one of the actions
destructiveButtonIndexdestructive: true on the action
disabledButtonIndicesdisabled: true on the action
title / messagetitle / message
iconsicon on the action
cancelButtonTintColorstyles={{ cancelLabel: { color } }}
tintColor / destructiveColortheme={{ colors: { primary, danger } }}
textStyle / titleTextStyle / messageTextStylestyles={{ actionLabel, title, message }}
containerStylestyles={{ group }} (iOS) or sheetProps={{ styles: { sheet } }}
showSeparators / separatorStyleseparators come with the iOS design; styles={{ action }}
userInterfaceStylePickersProvider colorScheme
anchor (iPad popover)—

On iOS, @expo/react-native-action-sheet shows the system ActionSheetIOS, and on Android and the web its own JavaScript sheet. ActionSheet draws the iOS design on iOS and Material on Android, so each platform still looks like itself, and you can set one design for all of them.

See all migration guides for other libraries.