Platform-specific styles are applied (iOS subtle, Android material)
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:
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.
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Mobile UX Patterns Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from mobile-ux-patterns·automated