Chapter 2 · Practice 4 of 5
Keep platform differences small and explicit
Why it matters
iOS and Android differ in navigation patterns, shadows, fonts and permissions. Handle those differences in a few clear places rather than sprinkling Platform.OS === 'ios' checks across every screen.
| Size of difference | Tool |
|---|---|
| One style value | Platform.select({ ios: ..., android: ... }) |
| A whole component | Button.ios.tsx and Button.android.tsx files |
| A native capability | A small module with one interface for both |
Test every screen on both platforms before merging. A layout that looks right on the simulator you happen to use is not done.
Do
- Use platform file extensions when the two versions really differ
Avoid
- Nested platform checks inside JSX across many components