[router] add platform extension docs #27409
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This comment was marked as outdated.
This comment was marked as outdated.
EvanBacon
reviewed
Mar 12, 2024
Co-authored-by: Evan Bacon <bacon@expo.io>
| @@ -3,6 +3,8 @@ title: Platform-specific Modules | |||
| description: Learn how to switch modules based on the platform in Expo Router. | |||
| --- | |||
|
|
|||
| > **warning** Platform specific extensions were added in Expo Router 3.x.x. This guide is only needed if you are using an older version of Expo Router. | |||
There was a problem hiding this comment.
Suggested change
| > **warning** Platform specific extensions were added in Expo Router 3.x.x. This guide is only needed if you are using an older version of Expo Router. | |
| > **warning** Platform specific extensions were added in Expo Router `3.x.x`. Follow this guide only if you are using an older version of Expo Router. |
| > Platform extensions (for example, **.ios.js**, **.native.ts**) are not supported in the **app** directory. See [Platform-specific modules](/router/advanced/platform-specific-modules), for more information. | ||
| ## Platform specific extensions | ||
|
|
||
| > **warning** Platform-specific extensions were added in Expo Router 3.x.x. If you are using an older version, please see [Platform-specific modules](/router/advanced/platform-specific-modules), for more information. |
There was a problem hiding this comment.
Suggested change
| > **warning** Platform-specific extensions were added in Expo Router 3.x.x. If you are using an older version, please see [Platform-specific modules](/router/advanced/platform-specific-modules), for more information. | |
| > **warning** Platform-specific extensions were added in Expo Router `3.x.x`. If you are using an older version of the library, follow instructions from [Platform-specific modules](/router/advanced/platform-specific-modules). |
|
|
||
| Metro bundler's platform-specific extensions (for example, **.ios.js** or **.native.ts**) 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: |
There was a problem hiding this comment.
Suggested change
| Consider the following project: | |
| Consider the following project structure: |
| ]} | ||
| /> | ||
|
|
||
| In this project, the **\_layout.web.js** file is used as a layout on the web and **\_layout.js** is used on all other platform. The **index.js** file is used as the home page for all platforms. The **about.web.js** file is used as the about page for the web and **about.js** file is used on all other platforms. |
There was a problem hiding this comment.
Suggested change
| In this project, the **\_layout.web.js** file is used as a layout on the web and **\_layout.js** is used on all other platform. The **index.js** file is used as the home page for all platforms. The **about.web.js** file is used as the about page for the web and **about.js** file is used on all other platforms. | |
| In the above file structure: | |
| - **\_layout.web.js** file is used as a layout on the web and **\_layout.js** is used on all other platforms. | |
| - **index.js** file is used as the home page for all platforms. | |
| - **about.web.js** file is used as the about page for the web, and the **about.js** file is used on all other platforms. |
There's a lot going on in the above paragraph, let's convert it to a list of items. Plus, also fix a couple typos.
| @@ -104,6 +104,8 @@ Deploy the website and server to a [hosting provider](#deployment) to access the | |||
|
|
|||
| </Step> | |||
|
|
|||
| > **warning** API routes filenames cannot have platform specific extensions. For example, `hello+api.web.ts` will not work. | |||
There was a problem hiding this comment.
Suggested change
| > **warning** API routes filenames cannot have platform specific extensions. For example, `hello+api.web.ts` will not work. | |
| > **warning** API route filenames cannot have platform-specific extensions. For example, **hello+api.web.ts** will not work. |
|
|
||
| In this project, the **\_layout.web.js** file is used as a layout on the web and **\_layout.js** is used on all other platform. The **index.js** file is used as the home page for all platforms. The **about.web.js** file is used as the about page for the web and **about.js** file is used on all other platforms. | ||
|
|
||
| > **info** Always provide a file without a platform extension to ensure every platform has a default implementation. |
There was a problem hiding this comment.
Suggested change
| > **info** Always provide a file without a platform extension to ensure every platform has a default implementation. | |
| > **info** Providing a route file without a platform-specific extension is required to ensure every platform has a default implementation. |
Since in the first paragraph we say this is requirement for Metro bundler to recognize a platform specific extension only if non-platform specific extension exits, let's say it like that here. Since this is a callout, we can be authoritative and clear about this.
Also, what does "default implementation" mean here? is it the layout? or the home screen?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why
Add docs for #27408. Version numbers are placeholder values
How
Test Plan
Checklist
npx expo prebuild& EAS Build (eg: updated a module plugin).