Expo Docs MCP Server

--- 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. --- 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 > **warning** 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](#platform-module). 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: 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: 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. ```tsx app/about.tsx ``` ## 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 app/_layout.tsx if (Platform.OS === 'web') { // Use a basic custom layout on web. return ( <div style={{ flex: 1 }}> <header> Home Settings </header> </div> ); } // Use a native bottom tabs layout on native platforms. return ( ); } ```