In this lesson, you will learn how React Native uses file extensions to automatically serve the correct interface components to either iOS or Android devices.
The Power of File Suffixes
In React Native, you often want your app to look or behave differently depending on the platform it is running on. Instead of writing complex if/else logic inside a single file, React Native allows you to create separate files for each platform.
When you import a component, the React Native packager (the tool that bundles your code) looks for specific file suffixes: .ios.js or .android.js.
How Resolution Works
Imagine you have a complex button that needs to behave differently on each OS. You can create three files in your project directory:
MyButton.js(The default fallback)MyButton.ios.js(The version specifically for iOS)MyButton.android.js(The version specifically for Android)
When you write import MyButton from './MyButton'; in your main application code, you don’t need to specify the platform. The packager automatically detects the current operating system. If you are building for an iPhone, the packager will skip MyButton.js and MyButton.android.js and inject the code from MyButton.ios.js instead.
Why This Matters
This approach keeps your codebase clean and modular. By using this resolution strategy, you avoid "spaghetti code"—the practice of cluttering your logic with platform checks like Platform.OS === 'ios'. Because the resolution happens at the bundling stage, the device only receives the specific code it needs, which keeps your application bundle efficient and maintainable.
This mechanism is the foundation for creating a single codebase that feels native to every platform it touches. By naming your files correctly, the system handles the heavy lifting of UI differentiation automatically before your code even reaches the JavaScript engine.
Key Takeaway: React Native resolves platform-specific components by searching for .ios or .android file extensions during the bundling process, allowing you to swap implementations seamlessly without manual logic checks.