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

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.

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

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.

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

  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