Platform-specific extensions and module

Learn how to switch modules based on the platform in Expo Router using platform-specific extensions and Platform module from React Native.

While building your app, you may want to show specific content based on the current platform. Platform-specific extensions and Platform module can make the experience more native to a given platform. The following sections describe the ways you can achieve this with Expo Router.

Platform-specific extensions

Platform-specific extensions were added in Expo Router 3.5.x. If you are using an older version of the library, follow instructions from Platform-specific modules.

There are two ways to use platform-specific extensions:

Within app directory

Metro bundler's platform-specific extensions (for example, .android.tsx, .ios.tsx, .native.tsx, or .web.tsx) are supported in the app directory only if a non-platform version also exists. This ensures that routes are universal across platforms for deep linking.

Consider the following project structure:

In the above file structure:

• _layout.web.tsx file is used as a layout on the web and _layout.tsx is used on all other platforms.
• index.tsx file is used as the home page for all platforms.
• about.web.tsx file is used as the about page for the web, and the about.tsx file is used on all other platforms.

Outside app directory

You can create platform-specific files with extensions (for example, .android.tsx, .ios.tsx, .native.tsx, or .web.tsx) outside the app directory and use them from within the app directory.

Consider the following project structure:

In the above file structure, 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 component as a screen in the app directory.

export { default } from '../components/about';

Platform module

You can use the Platform 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.

import { Platform } from 'react-native';
import { Link, Slot, Tabs } from 'expo-router';

export default function Layout() {
  if (Platform.OS === 'web') {
    // Use a basic custom layout on web.
    return (
      <div style={{ flex: 1 }}>
        <header>
          <Link href="/">Home</Link>
          <Link href="/settings">Settings</Link>
        </header>
        <Slot />
      </div>
    );
  }
  // Use a native bottom tabs layout on native platforms.
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home' }} />
      <Tabs.Screen name="settings" options={{ title: 'Settings' }} />
    </Tabs>
  );
}