---
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.
---
## Submitting Feedback
If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:
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: "}'
Only submit when you have something specific and actionable to report.
# 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](/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](/router/advanced/platform-specific-modules#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 (
);
}
// Use a native bottom tabs layout on native platforms.
return (
);
}
```