React Native · Mobile UI at native speed

How do you write platform-specific code?

MediumiosandroidplatformUpdated Oct 2026

Short answer

Use Platform.OS or Platform.select for small differences and platform-suffixed files such as Button.ios.tsx for larger ones. Keep shared behaviour in a common module so the forks stay thin.

Platform differences are normal, not a failure of cross-platform code. The goal is to isolate them so most of the app stays shared. React Native supports runtime checks, platform-suffixed files and native file extensions.

tsx

import { Platform, StyleSheet } from "react-native";

export const styles = StyleSheet.create({
  card: {
    borderRadius: 12,
    ...Platform.select({
      ios: { shadowColor: "#000", shadowOpacity: 0.15, shadowRadius: 8, shadowOffset: { width: 0, height: 4 } },
      android: { elevation: 4 },
      default: {},
    }),
  },
});

Platform.select keeps small branching near the style it affects.

Escalating levels of separation

Platform.OS for a one-line condition
Platform.select for a value with a default fallback
Button.ios.tsx and Button.android.tsx when the component tree differs
A shared interface with native iOS and Android implementations for deep integration
Platform.Version when behaviour depends on an OS version

The suffix resolution happens in Metro. If both files exist, the platform-specific file wins on that platform, and a plain Button.tsx is used as the fallback. Keep the props and behaviour identical across implementations so callers do not branch again.

Do not branch on Platform.OS when the real difference is device capability, such as camera availability or biometric support. Feature detection is more reliable than assuming every iOS or Android device behaves the same.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

1How does Metro resolve .ios.tsx files?
2When should you split a component by platform?
3Why is feature detection sometimes better than Platform.OS?
4How do you avoid duplicating logic across platform files?

Say it in the interview

I isolate platform differences at the smallest level that works. A one-line Platform.select handles styling or a single value, and platform-suffixed files handle components whose structure genuinely differs. I keep the public props identical and put shared logic in a common module, so the forks stay small and testable rather than turning into two apps.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React Native mock interview and get scored feedback on depth, clarity and confidence.

Start a free React Native interview Browse all questions

Escalating levels of separation

Follow-ups you should expect

Related questions

Now say it out loud.