File extension

Learn platform-specific files with .ios.js and .android.js.

File extension

React Native automatically picks platform-specific files by looking at file extensions. If you have two files Button.ios.js and Button.android.js, when you write import Button from './Button' React Native knows which platform it is on and loads the right file.

You do not write the extension in the import path; the base name ./Button is enough. This method is useful when you need to write completely different components for the two platforms. Each file must export the same interface.

Exercise Your turn: import a platform file

Import MyButton from the path './MyButton' (without extension). Use it inside a <View> as <MyButton title="Click" />.

Show example solution

import MyButton from './MyButton';
import { View } from 'react-native';

function Screen() {
  return (
    <View>
      <MyButton title="Click" />
    </View>
  );
}

Common interface

When using the file extension method both files must export the same interface. That is, Button.ios.js and Button.android.js both export a component with the same name. This way the importing side does not need to know which file is loaded.

The two files can have different implementations: the iOS version might use TouchableOpacity and the Android version TouchableNativeFeedback. What matters is that both accept the same props and show the same behavior. This hides the platform difference from the user.

Test yourself

When is the Button.ios.js file loaded?
```
import Button from './Button';
```
- Only on iOS
- Only on Android
- On the web
- Always
Show answer

Only on iOS — The .ios.js extension is loaded only on iOS.

Fill in the blank: import without extension

import { Button } from ____;

Show answer

import { Button } from './Button';

Match: extension and platform

.ios.js

iOS file
.android.js

Android file
.js

common file

Next lesson: Platform-specific components

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies