# Platform-specific styles are applied (iOS subtle, Android material)

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

## Why it matters

Material elevation shadows and ripple effects on iOS look foreign — users immediately read the app as cross-platform slop. iOS expects flat text buttons with subtle borders; Android expects filled buttons with elevation. Apple's HIG and Material Design 3 are explicit about these patterns, and mismatched styling is one of the top three signals App Store reviewers use to flag low-quality cross-platform apps during manual review.

## Severity rationale

High because mismatched platform styling immediately signals a cheap port and hurts review scores and approval rates.

## Remediation

Branch styles with `Platform.select()` or move the component into `.ios.tsx` / `.android.tsx` variants:

```tsx
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  button: {
    padding: 12,
    ...Platform.select({
      ios: { backgroundColor: 'transparent', borderRadius: 8 },
      android: { backgroundColor: '#2196F3', elevation: 3, borderRadius: 4 },
    }),
  },
});
```

Apply the same split to cards, dividers, and navigation headers.

## Detection

- **ID:** `platform-styles`
- **Severity:** `high`
- **What to look for:** Count all instances of `Platform.OS` checks or `Platform.select()` calls in the codebase. Count `.ios.tsx` and `.android.tsx` file variants. Examine whether buttons, cards, and navigation elements follow platform conventions.
- **Pass criteria:** At least 3 components or style objects use `Platform.OS` or `Platform.select()` to differentiate iOS and Android styling, OR the app uses platform-specific file variants (`.ios.tsx` / `.android.tsx`). iOS components use subtle styling (minimal borders, text buttons), Android components use Material Design patterns (elevation shadows, ripple effects).
- **Fail criteria:** No `Platform.OS` or `Platform.select()` usage detected anywhere in styling code. All platforms use identical one-size-fits-all styling with no platform-specific visual treatments.
- **Skip (N/A) when:** App targets a single platform only (iOS-only or Android-only, confirmed by `app.json` platforms array or build configuration).
- **Detail on fail:** Quote the actual style objects found. `"All buttons use Material Design style (elevation, ripple) on iOS where subtle text buttons are expected."` or `"No platform-specific styling detected — buttons look out of place on both platforms."`
- **Remediation:** Use Platform module to apply platform-specific styles:

  ```tsx
  import { Platform, StyleSheet } from 'react-native';

  const styles = StyleSheet.create({
    button: {
      padding: 12,
      ...Platform.select({
        ios: {
          backgroundColor: 'transparent',
          borderRadius: 8,
        },
        android: {
          backgroundColor: '#2196F3',
          borderRadius: 4,
          elevation: 3,
        },
      }),
    },
  });
  ```

  Or use platform-specific file extensions:

  ```
  Button.ios.tsx  // iOS-specific button component
  Button.android.tsx  // Android-specific button component
  Button.tsx  // Fallback/shared
  ```

Taxons: user-experience

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