1---
2title: Platform-specific Modules
3description: Learn how to switch modules based on the platform in Expo Router.
4---
5
6import { FileTree } from '~/ui/components/FileTree';
7import { BoxLink } from '~/ui/components/BoxLink';
8import { BookOpen02Icon } from '@expo/styleguide-icons';
9
10While building your app, you may want to show specific content based on the current platform. Platform-specific modules can make the experience more native to a given platform. The following sections describe the ways you can achieve this with Expo Router.
11
12## Platform module
13
14You can use the [`Platform`](https://reactnative.dev/docs/platform-specific-code#platform-module) module from React Native to detect the current platform and render the appropriate content based on the result. For example, you can render a `Tabs` layout on native and a custom layout on the web.
15
16```jsx app/_layout.js
17import { Platform } from 'react-native';
18import { Link, Slot, Tabs } from 'expo-router';
19
20export default function Layout() {
21  if (Platform.OS === 'web') {
22    // Use a basic custom layout on web.
23    return (
24      <div style={{ flex: 1 }}>
25        <header>
26          <Link href="/">Home</Link>
27          <Link href="/settings">Settings</Link>
28        </header>
29        <Slot />
30      </div>
31    );
32  }
33  // Use a native bottom tabs layout on native platforms.
34  return (
35    <Tabs>
36      <Tabs.Screen name="index" options={{ title: 'Home' }} />
37      <Tabs.Screen name="settings" options={{ title: 'Settings' }} />
38    </Tabs>
39  );
40}
41```
42
43## Platform specific extensions
44
45Metro bundler's platform-specific extensions (for example, **.ios.js** or **.native.ts**) are not supported in the **app** directory. This ensures that routes are universal across platforms for deep linking. However, you can create platform-specific files outside the **app** directory and use them from within the **app** directory.
46
47Consider the following project:
48
49<FileTree
50  files={[
51    'app/_layout.js',
52    'app/index.js',
53    'app/about.js',
54    'components/about.js',
55    'components/about.ios.js',
56    'components/about.web.js',
57  ]}
58/>
59
60For example, the designs require you to build different `about` screens for each platform. In that case, you can create a component for each platform in the **components** directory using platform extensions. When imported, Metro will ensure the correct component version is used based on the current platform. You can then re-export the the component as a screen in the **app** directory.
61
62```js app/about.js
63export { default } from '../components/about';
64```
65
66> **info** **Best practice:** Always provide a file without a platform extension to ensure every platform has a default implementation.
67
68## Next steps
69
70<BoxLink
71  title="Shared routes"
72  Icon={BookOpen02Icon}
73  description="Learn how to define shared routes or use arrays to use the same route multiple times with different layouts using Expo Router."
74  href="/router/advanced/shared-routes/"
75/>
76