ActionSheetIOS

ActionSheetIOS

An action sheet is iOS's menu of choices sliding up from the bottom, the platform's way to confirm a destructive action. ActionSheetIOS.showActionSheetWithOptions(options, callback) takes the button titles in options, plus cancelButtonIndex, destructiveButtonIndex (drawn in red), title, message, disabledButtonIndices, tintColor and, on iPad, an anchor view; the callback receives the chosen index. showShareActionSheetWithOptions() opens the iOS share sheet and dismissActionSheet() closes the topmost sheet. BookNest confirms removing a cart item with it on iOS and with the Alert of Alert elsewhere:

src/ios/confirmRemove.ts: an action sheet on iOS, an Alert on Android (iOS branch not run here)TypeScript

export function confirmRemove(title: string, remove: () => void) {
  if (Platform.OS === 'ios') {
    ActionSheetIOS.showActionSheetWithOptions(
      { title, options: ['Cancel', 'Remove from cart'],
        cancelButtonIndex: 0, destructiveButtonIndex: 1 },
      (index) => { if (index === 1) remove(); },
    );
  } else {
    Alert.alert(title, 'Remove this book from your cart?', [
      { text: 'Cancel', style: 'cancel' },
      { text: 'Remove', onPress: remove },
    ]);
  }
}

The guard matters. Called unguarded on Android, as IosOnly.tsx does, it throws, because the native module does not exist:

Output of 137

 LOG  ActionSheetIOS threw: ActionSheetManager doesn't exist

For one API on both platforms, @expo/react-native-action-sheet (https://github.com/expo/react-native-action-sheet 1,576 ) (MIT) uses the native sheet on iOS and draws a matching JavaScript sheet on Android.

MENU