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 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>
  );
}