# App follows platform design guidelines

- **Pattern:** `ab-001947` (`mobile-store-readiness.store-compliance.design-guidelines-followed`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001947
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001947)

## Why it matters

Apple's Human Interface Guidelines (apple-hig) and Google's Material Design 3 (material-design-3) are not style suggestions — Apple explicitly lists "non-standard navigation or interface" as a rejection reason in App Store Review Guideline 4.2. An Android app using iOS-style navigation (e.g., iOS-mimicking bottom tab bars styled with sharp corners and no ripple effects) will be flagged by Play reviewers as a port that hasn't been adapted for the platform. Beyond rejection risk, users on both platforms have muscle memory for platform navigation conventions — a custom navigation implementation that breaks back-swipe on iOS or back-button behavior on Android produces negative reviews and uninstalls that are directly traceable to this design failure.

## Severity rationale

High because Apple's guideline 4.2 explicitly cites non-standard navigation as a rejection reason, and platform-alien navigation patterns produce measurable user abandonment and negative reviews.

## Remediation

Install and use `@react-navigation/native` with platform-appropriate navigators — `native-stack` for iOS push navigation, `bottom-tabs` for tab bars, `drawer` for Android side navigation patterns.

```bash
npm install @react-navigation/native @react-navigation/native-stack \
  @react-navigation/bottom-tabs react-native-screens \
  react-native-safe-area-context
```

For Android-specific Material Design components, use `react-native-paper` which implements Material Design 3 tokens including ripple effects, elevation shadows, and color roles. Never substitute a custom `TouchableOpacity` grid for a platform tab bar — the OS accessibility layer and gesture recognizers expect the standard native components. Test navigation on physical devices on both platforms before submission.

## Detection

- **ID:** `design-guidelines-followed`
- **Severity:** `high`
- **What to look for:** Review app screens for compliance with iOS Human Interface Guidelines and Android Material Design (or Material You for newer Android). Count all platform-standard UI libraries in package.json dependencies. Check for: iOS uses system navigation patterns (tab bars, navigation stacks, not custom bottom menu), buttons use native iOS styling, text sizes are readable. Android uses Material Design components, color scheme, and layouts; respects system font size preferences. Check for consistent navigation, appropriate use of system dialogs, and native look-and-feel.
- **Pass criteria:** App appears to follow platform guidelines — navigation patterns are native, typography is consistent with platform standards, and at least 1 platform-standard UI library (react-native-screens, react-native-paper, @react-navigation) is used. Buttons and controls look and behave natively.
- **Fail criteria:** App uses non-native navigation patterns, has obviously styled-down buttons that don't match platform conventions, or mixes iOS and Android UI styles inappropriately. No platform-standard navigation library found.
- **Skip (N/A) when:** Never — design consistency with platform guidelines is critical for app store approval.
- **Detail on fail:** `"App uses a custom bottom tab bar that mimics iOS style on Android — should use Android Material Design navigation"` or `"Button text is too small, doesn't meet iOS Human Interface Guidelines minimum size"`
- **Remediation:** App stores and users expect apps to follow platform conventions. Comply:
  1. **For iOS:** Use UIKit or SwiftUI native components; follow iOS Human Interface Guidelines for spacing, typography, colors
  2. **For Android:** Use Material Design 3 (Material You) components; follow Material Design guidelines
  3. For React Native / Expo, install platform-standard navigation in package.json:
     ```bash
     npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context
     ```
  4. Test on actual devices to verify native appearance
  5. Review official guidelines:
     - iOS: https://developer.apple.com/design/human-interface-guidelines
     - Android: https://m3.material.io/

## External references

- external apple-hig — https://developer.apple.com/design/human-interface-guidelines/
- external material-design-3 — https://m3.material.io/

Taxons: regulatory-conformance

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