Modal and alert styling matches platform conventions

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.

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

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' },
]);

• ID: mobile-ux-patterns.platform-conventions.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:

  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' },
  ]);