# Modal and alert styling matches platform conventions

- **Pattern:** `ab-001970` (`mobile-ux-patterns.platform-conventions.modal-alert-style`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001970
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001970)

## Why it matters

iOS users expect modals to slide up as a sheet with a dismissible drag handle — a centered Material dialog on iOS feels foreign and users miss the close button. On Android, a slide-up sheet where a centered dialog is expected looks like a bug. Using `Alert.alert()` for simple confirmations inherits the correct system styling for free; building custom-styled replacements almost always gets the platform convention wrong.

## Severity rationale

Low because modals still work, but the wrong presentation style undermines the native feel throughout the app.

## Remediation

Set `presentationStyle` per platform on every `Modal`, and use the native `Alert.alert()` for any confirm/cancel dialog instead of a custom component:

```tsx
import { Modal, Alert, Platform } from 'react-native';
<Modal visible={visible} presentationStyle={Platform.OS === 'ios' ? 'pageSheet' : 'overFullScreen'}>{/* content */}</Modal>
Alert.alert('Delete?', 'This cannot be undone.', [
  { text: 'Cancel', style: 'cancel' },
  { text: 'Delete', style: 'destructive' },
]);
```

## Detection

- **ID:** `modal-alert-style`
- **Severity:** `low`
- **What to look for:** List all Modal and Alert usages in the app. For each, check the `presentationStyle` (iOS) and animation type. Verify that iOS modals use `pageSheet` or `formSheet` presentation and Android uses appropriate centered or full-screen styles.
- **Pass criteria:** At least 100% of modals use platform-appropriate presentation styles. iOS modals use `pageSheet`, `formSheet`, or slide-up presentation. Android modals use centered or bottom-sheet style. Native `Alert.alert()` is used for simple dialogs (not custom styled replacements).
- **Fail criteria:** Modals are styled identically across both platforms with no `presentationStyle` differentiation, or modals use inappropriate styles for the platform (e.g., centered dialog on iOS where bottom-sheet is expected).
- **Skip (N/A) when:** App has no modals, alerts, or dialog components.
- **Detail on fail:** Quote the actual presentationStyle or lack thereof. `"Modal is center-screen with Material Design styling on iOS where bottom-sheet is more natural."` or `"Alert component is used but styled with custom CSS instead of native platform look."`
- **Remediation:** Use platform-specific modal presentation:

  ```tsx
  import { Modal, Alert } from 'react-native';

  // Modal with platform-appropriate presentation
  <Modal visible={visible} presentationStyle={Platform.OS === 'ios' ? 'pageSheet' : 'overFullScreen'}>
    {/* Content */}
  </Modal>

  // Use native Alert (platform-specific styling automatic)
  Alert.alert('Title', 'Message', [
    { text: 'Cancel', style: 'cancel' },
    { text: 'OK', style: 'default' },
  ]);
  ```

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001970