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.

For the complete documentation index, see llms.txt. Use this file to discover all available pages.

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 src/app directory

Metro bundler's platform-specific extensions (for example, .android.tsx, .ios.tsx, .native.tsx, or .web.tsx) are supported in the src/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 src/app directory

You can create platform-specific files with extensions (for example, .android.tsx, .ios.tsx, .native.tsx, or .web.tsx) outside the src/app directory and use them from within the src/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 src/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 src/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>
  );
}