Source: https://docs.expo.dev/router/advanced/platform-specific-modules

Hide navigation

Ctrl K

Home Guides EAS Reference Learn

Archive Expo Snack Discord and Forums Newsletter

Platform-specific extensions and module

Edit page

Copy page

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

Edit page

Copy page

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:

app

_layout.tsx

_layout.web.tsx

index.tsx

about.tsx

about.web.tsx

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:

app

_layout.tsx

index.tsx

about.tsx

components

about.tsx

about.ios.tsx

about.web.tsx

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.

app/about.tsx

Copy

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.

app/_layout.tsx

Copy

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