Platform Specific Styling
Android and iOS have different design conventions, and React Native provides the Platform module to apply platform-specific styles and behavior when needed.
Using Platform.OS
The Platform.OS property returns either "ios" or "android", allowing you to conditionally apply different values.
Using Platform.select
Platform.select provides a cleaner syntax for defining platform-specific values directly within an object.
Platform-Specific File Extensions
React Native also supports creating separate files for each platform using .ios.js and .android.js extensions, automatically selecting the correct file at build time.
Handling Shadows Across Platforms
Since iOS uses shadow properties and Android uses elevation for shadows, Platform.select is commonly used to apply the correct shadow implementation for each platform.
Common Platform Differences to Handle
- Status bar height and safe area insets
- Shadow rendering (shadow properties vs elevation)
- Default font families and text rendering
- Button and touchable feedback styles
Conclusion
Handling platform-specific styling ensures your React Native app feels native and polished on both Android and iOS. Using Platform.OS, Platform.select, and platform-specific file extensions gives you full control over these differences.
