React Native: Platform-Specific Code

WHY IT EXISTS Building a cross-platform app means reusing as much code as possible. However, platform conventions, design guidelines, or available APIs often differ between iOS and Android. Platform-specific code allows you to handle these differences gracefully within a single codebase.

THE MENTAL MODEL Think of it as a fork in the road inside your shared code. For a small detour, like applying a different color or padding, you use a simple switch: the Platform module. For taking a completely different route, like rendering a different component entirely, you use a separate map: platform-specific file extensions.

HOW IT WORKS React Native provides two primary methods. First, the Platform module. You can check Platform.OS, which returns 'ios' or 'android', for simple conditional logic. For more structured choices, Platform.select takes an object with ios and android keys and returns the value for the current platform. This is great for styles. You can also check Platform.Version for OS-specific workarounds, noting it returns the API level for Android and a version string for iOS.

Second, platform-specific file extensions. When logic becomes too complex for inline checks, you can split files. If you create MyComponent.ios.js and MyComponent.android.js, React Native's bundler automatically imports the correct one when you write import MyComponent from './MyComponent'. This keeps platform-divergent code clean and separated.

WHEN TO USE IT Use the Platform module for small, inline differences like adjusting styles, setting a configuration flag, or handling a minor API variance. Use file extensions (.ios.js, .android.js) when a component's structure, behavior, or dependencies are fundamentally different between platforms.

WHEN NOT TO USE IT The main footgun is choosing the wrong tool. Don't create separate files just to change a single style property; that's overkill. Conversely, don't cram complex, multi-level conditional rendering into a giant Platform.select statement. If your select is returning entire component definitions, it's a strong signal you should be using separate files instead.

ONE CANONICAL EXAMPLE A common use case is defining styles. Using StyleSheet.create, you can spread the result of a Platform.select call. This allows you to define a red backgroundColor for iOS and a green one for Android, while other styles in the same object, like flex: 1, are applied to both platforms without duplication.