---
modificationDate: February 26, 2026
title: Platform-specific extensions and module
description: Learn how to switch modules based on the platform in Expo Router using platform-specific extensions and Platform module from React Native.
---

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/router/advanced/platform-specific-modules/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/router/advanced/platform-specific-modules/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map.

You are here: Guides > Expo Router > Advanced
Pages in this section:
- [Platform-specific extensions and module](https://docs.expo.dev/router/advanced/platform-specific-modules.md) (this page)
- [Customizing links](https://docs.expo.dev/router/advanced/native-intent.md)
- [Settings](https://docs.expo.dev/router/advanced/router-settings.md)
- [Apple Handoff](https://docs.expo.dev/router/advanced/apple-handoff.md)
- [Custom tabs](https://docs.expo.dev/router/advanced/custom-tabs.md)
- [Custom navigators](https://docs.expo.dev/router/advanced/custom-navigators.md)
- [Stack Toolbar](https://docs.expo.dev/router/advanced/stack-toolbar.md)
- [Zoom transition](https://docs.expo.dev/router/advanced/zoom-transition.md)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL.

# 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](/router/advanced/platform-specific-modules.md#platform-module).

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:

`src`

 `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 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:

`src`

 `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 **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.

```tsx
export { default } from '@/components/about';
```

## Platform module

You 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.

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