platform-specific-modules

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Platform-specific extensions require non-platform version in src/app

Metro bundler's platform-specific extensions (such as .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 requirement ensures that routes are universal across platforms for deep linking purposes.

Platform-specific extensions in src/app directory example

In a project with _layout.tsx, _layout.web.tsx, index.tsx, about.tsx, and about.web.tsx: _layout.web.tsx is used as the layout on web and _layout.tsx is used on all other platforms; index.tsx is used as the home page for all platforms; about.web.tsx is used as the about page on web, and about.tsx is used on all other platforms.

Platform-specific modules outside src/app directory

You can create platform-specific files with extensions (.android.tsx, .ios.tsx, .native.tsx, or .web.tsx) outside the src/app directory in component directories. Metro will ensure the correct component version is used based on the current platform when imported. You can then re-export the component as a screen in the src/app directory.

Platform-specific extensions added in Expo Router 3.5.x

Platform-specific extensions were added in Expo Router version 3.5.x. If using an older version of the library, use the Platform module approach instead.

Using Platform module to detect platform

You can use the Platform module from React Native to detect the current platform and render appropriate content. For example, you can check Platform.OS === 'web' to render a Tabs layout on native platforms and a custom layout on the web.

Platform module layout example with tabs on native and custom on web

Example showing Platform.OS detection in src/app/_layout.tsx: if Platform.OS === 'web', render a custom div-based layout with header navigation links; otherwise, render a native bottom tabs layout using Tabs component from expo-router with index and settings screens.

Platform-specific extensions supported extension formats

Platform-specific extensions supported by Metro bundler include: .android.tsx, .ios.tsx, .native.tsx, and .web.tsx.

Default template uses platform-specific tabs

The default template uses two different tab implementations depending on the platform. On Android and iOS, tabs are rendered using native tabs, which use the platform's built-in tab bar. On web, tabs are rendered using custom tabs from expo-router/ui. This is achieved through platform-specific file extensions: app-tabs.native.tsx for Android and iOS, and app-tabs.tsx for web. Native platforms have a system tab bar with expected behaviors like scroll-to-top on tap and native animations, while web requires a custom-styled tab bar for typical website navigation patterns.

Platform-specific tabs using file extensions

Use platform-specific file extensions (.native.tsx and .tsx) to provide different tab implementations for native and web. The root layout renders a single tab component, and Expo's module resolution automatically picks the correct file based on the platform. On Android and iOS, use native tabs. On web, use custom tabs from expo-router/ui.

Give your agent this brain