Merge branch 'main' into marklawlor/router/fix-navigation-target

.github/workflows/docs.yml

@@ -62,7 +62,7 @@ jobs:
             sleep 1
           done
           yarn test-links http://127.0.0.1:8000
-        timeout-minutes: 1
+        timeout-minutes: 3
       - name: 🚀 Deploy Docs website
         if: ${{ github.event.ref == 'refs/heads/main' }}
         run: ./deploy.sh

docs/components/base/code.tsx

@@ -21,7 +21,7 @@ const { default: testTippy } = tippy;
 // Read more: https://github.com/FormidableLabs/prism-react-renderer#custom-language-support
 async function initPrism() {
   (typeof global !== 'undefined' ? global : window).Prism = Prism;
-  await import('prismjs/components/prism-bash' as Language);
+  await import('~/ui/components/Snippet/prism-bash' as Language);
   await import('prismjs/components/prism-diff' as Language);
   await import('prismjs/components/prism-groovy' as Language);
   await import('prismjs/components/prism-ini' as Language);
@@ -171,7 +171,6 @@ export function Code({ className, children }: React.PropsWithChildren<Props>) {
 
   // Allow for code blocks without a language.
   if (lang) {
-    // sh isn't supported, use sh to match js, and ts
     if (lang in remapLanguages) {
       lang = remapLanguages[lang];
     }

docs/package.json

@@ -101,7 +101,7 @@
     "postcss": "^8.4.33",
     "postcss-import": "^16.0.0",
     "prettier": "^3.1.1",
-    "puppeteer": "^21.4.0",
+    "puppeteer": "^22.4.1",
     "react-test-renderer": "^18.2.0",
     "rehype-slug": "^6.0.0",
     "remark-cli": "^12.0.0",

docs/pages/bare/installing-expo-modules.mdx

@@ -39,7 +39,7 @@ To install and use Expo modules, the easiest way to get up and running is with t
 
 The following instructions apply to installing the latest version of Expo modules in React Native 0.73.
 
-<InstallSection packageName="expo" cmd={['npm install expo']} hideBareInstructions />
+<InstallSection packageName="expo" cmd={['$ npm install expo']} hideBareInstructions />
 
 Once installation is complete, apply the changes from the following diffs to configure Expo modules in your project. This is expected to take about five minutes, and you may need to adapt it slightly depending on how customized your project is.
 

docs/pages/bare/using-expo-cli.mdx

@@ -14,7 +14,7 @@ To migrate from `npx react-native init` to Expo CLI, you'll need to install the
 
 In most cases, executing the following command in a project directory to install the package is all you need to do:
 
-<Terminal cmd={['npx install-expo-modules@latest']} />
+<Terminal cmd={['$ npx install-expo-modules@latest']} />
 
 For a detailed installation guide, see [Install Expo modules](/bare/installing-expo-modules).
 
@@ -51,7 +51,7 @@ Windows and macOS. If building for these platforms, you can utilize Expo CLI for
 
 After installing the `expo` package, you can use the following commands which are alternatives to `npx react-native run-android` and `npx react-native run-ios`:
 
-<Terminal cmd={['# for Android', 'npx expo run:android', '', '# for iOS', 'npx expo run:ios']} />
+<Terminal cmd={['# for Android', '$ npx expo run:android', '', '# for iOS', '$ npx expo run:ios']} />
 
 When building your project, you can choose a device or simulator by using the `--device` flag. This also applies to any iOS device that is connected to your computer.
 

docs/pages/build-reference/local-builds.mdx

@@ -8,7 +8,11 @@ import { Terminal } from '~/ui/components/Snippet';
 You can run the same build process that we run on the EAS Build servers directly on your machine with the `--local` flag.
 
 <Terminal
-  cmd={['eas build --platform android --local', '# or', 'eas build --platform ios --local']}
+  cmd={[
+    '$ eas build --platform android --local',
+    '# or',
+    '$ eas build --platform ios --local'
+  ]}
 />
 
 > **Note:** If you use [Continuous Native Generation](/workflow/continuous-native-generation), you can run [prebuild](/workflow/prebuild) to generate your **android** and **ios** directories and then proceed to open the projects in the respective IDEs. Further, you can build them just like any native project. It's not necessary to run `eas build --local`. However, it handles more of the build process for you &mdash; see [Use cases for local builds](#use-cases-for-local-builds).

docs/pages/deploy/instant-updates.mdx

@@ -66,7 +66,7 @@ To publish an update to the build, run the following command:
 
 <Terminal
   cmd={[
-    '$ eas update --branch [branch] --message [message]',
+    '# eas update --branch [branch] --message [message]',
     '',
     '# Example',
     '$ eas update --branch preview --message "Updating the app"',

docs/pages/develop/user-interface/color-themes.mdx

@@ -35,7 +35,7 @@ The app will default to the light style if this property is absent. Here is an e
 
 In development builds, you'll need to install the native package [`expo-system-ui`](/versions/latest/sdk/system-ui/#installation). Otherwise, the `userInterfaceStyle` property is ignored. You can also use the following command to check if the project is misconfigured:
 
-<Terminal cmd={['npx expo config --type introspect']} />
+<Terminal cmd={['$ npx expo config --type introspect']} />
 
 If the project is misconfigured, you'll see a warning as shown below:
 

docs/pages/eas-update/code-signing.mdx

@@ -21,7 +21,7 @@ Generate a private key and corresponding code signing certificate for your app:
 
 <Terminal
   cmd={[
-    'npx expo-updates codesigning:generate \\',
+    '$ npx expo-updates codesigning:generate \\',
     '  --key-output-directory keys \\',
     '  --certificate-output-directory certs \\',
     '  --certificate-validity-duration-years 10 \\',
@@ -42,14 +42,9 @@ Generate a private key and corresponding code signing certificate for your app:
 
 Configure your app's builds to use code signing:
 
-<Terminal
-  cmd={[
-    'npx expo-updates codesigning:configure \\',
-    '  --certificate-input-directory certs \\',
-    '  --key-input-directory keys',
-  ]}
-  cmdCopy="npx expo-updates codesigning:configure --certificate-input-directory certs --key-input-directory keys"
-/>
+<Terminal cmd={[
+  '$ npx expo-updates codesigning:configure --certificate-input-directory certs --key-input-directory keys',
+]} />
 
 After this step, create a new build with a new runtime version. The code signing certificate will be embedded in this new build.
 
@@ -59,7 +54,7 @@ After this step, create a new build with a new runtime version. The code signing
 
 Publish a signed update for your app:
 
-<Terminal cmd={['eas update --private-key-path keys/private-key.pem']} />
+<Terminal cmd={['$ eas update --private-key-path keys/private-key.pem']} />
 
 During `eas update`, the EAS CLI automatically detects that code signing is configured for your app. It then verifies the integrity of the update and creates a digital signature using your private key. This process is performed locally so that your private key never leaves your machine. The generated signature is automatically sent to EAS to store alongside the update.
 

docs/pages/eas-update/codepush.mdx

@@ -52,7 +52,7 @@ Ensure that your project has an `app.json` file with an `expo` object. If you do
 
 Install the `expo` package by running the command:
 
-<Terminal cmd={['npx install-expo-modules@latest']} />
+<Terminal cmd={['$ npx install-expo-modules@latest']} />
 
 If the command fails, refer to the ["Installing Expo modules" guide](/bare/installing-expo-modules/#manual-installation).
 

docs/pages/eas-update/debug-advanced.mdx

@@ -53,24 +53,20 @@ If our project does not have **android** or **ios** directories, we can make com
 
 In each, we expect to see configuration for the EAS Update URL and the runtime version. Here are the properties we'd expect to see in each file:
 
-**AndroidManifest.xml**
-
-```xml
-...
+```xml AndroidManifest.xml
+<!-- @hide ... --><!-- @end -->
 <meta-data android:name="expo.modules.updates.EXPO_RUNTIME_VERSION" android:value="your-runtime-version-here"/>
 <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://u.expo.dev/your-project-id-here"/>
-...
+<!-- @hide ... --><!-- @end -->
 ```
 
-**Expo.plist**
-
-```xml
-...
+```xml Expo.plist
+<!-- @hide ... --><!-- @end -->
 <key>EXUpdatesRuntimeVersion</key>
 <string>your-runtime-version-here</string>
 <key>EXUpdatesURL</key>
 <string>https://u.expo.dev/your-project-id-here</string>
-...
+<!-- @hide ... --><!-- @end -->
 ```
 
 ### Configuration without EAS Build
@@ -95,9 +91,8 @@ We'd expect the page to display the same channel name that our build has. If it'
   cmd={[
     '# eas channel:create [channel-name]',
     '',
-    '',
     '# Example',
-    'eas channel:create production',
+    '$ eas channel:create production',
   ]}
 />
 
@@ -119,9 +114,8 @@ If the channel is not linked to the branch we expect, we can change the link wit
   cmd={[
     '# eas channel:edit [channel-name] --branch [branch-name]',
     '',
-    '',
     '# Example',
-    'eas channel:edit production --branch release-1.0',
+    '$ eas channel:edit production --branch release-1.0',
   ]}
 />
 
@@ -184,7 +178,7 @@ Here are the steps for inspecting an iOS Simulator build on macOS:
 Inside the **Expo.plist** file, we expect to see the following configurations:
 
 ```xml
-...
+<!-- @hide ... --><!-- @end -->
 <key>EXUpdatesRequestHeaders</key>
 <dict>
   <key>expo-channel-name</key>
@@ -194,7 +188,7 @@ Inside the **Expo.plist** file, we expect to see the following configurations:
 <string>your-runtime-version</string>
 <key>EXUpdatesURL</key>
 <string>https://u.expo.dev/your-project-id</string>
-...
+<!-- @hide ... --><!-- @end -->
 ```
 
 ### Inspecting manifests manually
@@ -250,11 +244,9 @@ We also provide a [step-by-step guide to try out EAS Update quickly](/eas-update
 - Reinstall pods with `npx pod-install`. The `expo-updates` podspec now detects this environment variable, and makes changes so that the debug code that would normally load from the Metro packager is bypassed, and the app is built with the EXUpdates bundle and other dependencies needed to load updates from EAS.
 - [Ensure the desired channel is set in our **Expo.plist**](/eas-update/updating-your-app/#configuring-the-channel-manually)
 - Modify the application Xcode project file to force bundling of the application JavaScript for both release and debug builds:
-
-```
-sed -i '' 's/SKIP_BUNDLING/FORCE_BUNDLING/g;' ios/&lt;project name&gt;.xcodeproj/project.pbxproj
-```
-
+  ```sh
+  sed -i '' 's/SKIP_BUNDLING/FORCE_BUNDLING/g;' ios/&lt;project name&gt;.xcodeproj/project.pbxproj
+  ```
 - Execute a [debug build](/debugging/runtime-issues/#native-debugging) of the app with Xcode or from the command line.
 
 #### Android local builds
@@ -326,10 +318,8 @@ If "update 2" turned out to be a bad update, we can re-publish "update 1" with a
 <Terminal
   cmd={[
     '# eas update:republish --group [update-group-id]',
-    '',
     '# eas update:republish --branch [branch-name]',
     '',
-    '',
     '# Example',
     '$ eas update:republish --group abc1',
     '$ eas update:republish --branch production',
@@ -338,14 +328,15 @@ If "update 2" turned out to be a bad update, we can re-publish "update 1" with a
 
 The example command above would result in a branch that now appears like this:
 
-```bash
-branch: "production"
-updates: [
-  update 3 (id: def3) "updates color"  // re-publish of update 1 (id: abc1)
-  update 2 (id: xyz2) "fixes typo"     // bad update
-  update 1 (id: abc1) "updates color"  // good update
-]
-```
+<Terminal cmd={[
+  'branch: "production"',
+  'updates: [',
+  '  update 3 (id: def3) "updates color"  // re-publish of update 1 (id: abc1)',
+  '  update 2 (id: xyz2) "fixes typo"     // bad update',
+  '  update 1 (id: abc1) "updates color"  // good update',
+  ']'
+]} />
+
 
 Since "update 3" is now the most recent update on the "production" branch, all users who query for an update in the future will receive "update 3" instead of the bad update, "update 2".
 

docs/pages/eas-update/debug.mdx

@@ -128,9 +128,8 @@ If the channel is not mapped to the branch we expect, we can change the link wit
   cmd={[
     '# eas channel:edit [channel-name] --branch [branch-name]',
     '',
-    '',
     '# Example',
-    'eas channel:edit production --branch release-1.0',
+    '$ eas channel:edit production --branch release-1.0',
   ]}
 />
 

docs/pages/eas-update/environment-variables.mdx

@@ -94,7 +94,7 @@ export default () => ({
 
 Then, to set the `API_URL` environment variable during development, you can prepend the variables before running `npx expo start` as shown below:
 
-<Terminal cmd={['API_URL="http://localhost:3000" expo start']} />
+<Terminal cmd={['$ API_URL="http://localhost:3000" expo start']} />
 
 The command sets the `API_URL` to `"http://localhost:3000"`. Then, the [`expo-constants`](/versions/latest/sdk/constants/#installation) library provides the `Constants.expoConfig.extra.API_URL` property to access it inside a project.
 

docs/pages/eas-update/getting-started.mdx

@@ -111,7 +111,7 @@ To publish an update to the build, run the following command:
 
 <Terminal
   cmd={[
-    '$ eas update --branch [branch] --message [message]',
+    '# eas update --branch [branch] --message [message]',
     '',
     '# Example',
     '$ eas update --branch preview --message "Updating the app"',

docs/pages/eas-update/migrate-from-classic-updates.mdx

@@ -98,7 +98,6 @@ After making a change to your project locally, you're ready to publish an update
     '$ eas update --channel [channel-name] --message [message]',
     '',
     '# Example',
-    '',
     '$ eas update --channel production --message "Fixes typo"',
   ]}
   cmdCopy="eas update --channel [channel-name] --message [message]"

docs/pages/eas-update/rollbacks.mdx

@@ -16,7 +16,7 @@ There are two types of rollbacks supported by EAS Update:
 
 To start a rollback, ensure you have EAS CLI version `5.9.0` or above installed. Then, run the following command:
 
-<Terminal cmd={['eas update:rollback']} />
+<Terminal cmd={['$ eas update:rollback']} />
 
 In the terminal, an interactive guide will assist you in selecting the type of rollback and doing the rollback.
 

docs/pages/eas-update/rollouts.mdx

@@ -13,7 +13,7 @@ Rollouts incrementally deploy updates on a new branch to a specific channel. Wit
 
 To start a rollout, ensure you have EAS CLI version `4.0.0` or above installed. Then, run the following command:
 
-<Terminal cmd={['eas channel:rollout']} />
+<Terminal cmd={['$ eas channel:rollout']} />
 
 In the terminal, an interactive guide will assist you in selecting a channel, choosing a branch for the rollout, and setting the percentage of users for the rollout. To increase or decrease the rollout amount, run the command again and choose the `Edit` option to adjust the rollout percentage.
 

docs/pages/get-started/expo-go.mdx

@@ -78,7 +78,7 @@ To run it on an emulator or a simulator, see [Android emulators](/workflow/andro
 <Step label="1">If installed, remove Expo Go from your device or simulator.</Step>
 <Step label="2">
   Start the development server:
-  <Terminal cmd={['npx expo start']} />
+  <Terminal cmd={['$ npx expo start']} />
 </Step>
 <Step label="3">
   Press <kbd>a</kbd> or <kbd>i</kbd> to run your app on Android or iOS. This will download and

docs/pages/guides/building-for-tv.mdx

@@ -109,7 +109,7 @@ In **package.json**, modify the `react-native` dependency to use the TV repo, an
 
 ## Add the TV config plugin
 
-<Terminal cmd={['npx expo install --dev @react-native-tvos/config-tv']} />
+<Terminal cmd={['$ npx expo install --dev @react-native-tvos/config-tv']} />
 
 When installed, the plugin will modify the project for TV when either:
 
@@ -130,10 +130,10 @@ Verify that this plugin appears in **app.json**:
 
 <Terminal cmd={[
   '# See all Expo CLI and config plugin debug information',
-  'export DEBUG=expo:*',
+  '$ export DEBUG=expo:*',
   '',
   '# See only debug information for the TV plugin',
-  'export DEBUG=expo:react-native-tvos:config-tv']}
+  '$ export DEBUG=expo:react-native-tvos:config-tv']}
 />
 
 </Step>
@@ -144,7 +144,7 @@ Verify that this plugin appears in **app.json**:
 
 Set the `EXPO_TV` environment variable, and run prebuild to make the TV modifications to the project.
 
-<Terminal cmd={['export EXPO_TV=1', 'npx expo prebuild --clean']} />
+<Terminal cmd={['$ export EXPO_TV=1', '$ npx expo prebuild --clean']} />
 
 > **Note**: The `--clean` argument is recommended, and is required if you have existing Android and iOS directories in the project.
 
@@ -156,7 +156,7 @@ Set the `EXPO_TV` environment variable, and run prebuild to make the TV modifica
 
 Start an Android TV emulator and use the following command to start the app on the emulator:
 
-<Terminal cmd={['npx expo run:android']} />
+<Terminal cmd={['$ npx expo run:android']} />
 
 </Step>
 <Step label="5">
@@ -165,7 +165,7 @@ Start an Android TV emulator and use the following command to start the app on t
 
 Run the following command to build and run the app on an Apple TV simulator:
 
-<Terminal cmd={['npx expo run:ios']} />
+<Terminal cmd={['$ npx expo run:ios']} />
 
 </Step>
 <Step label="6">
@@ -174,7 +174,7 @@ Run the following command to build and run the app on an Apple TV simulator:
 
 You can revert the changes for TV and go back to phone development by unsetting `EXPO_TV` and running prebuild again:
 
-<Terminal cmd={['unset EXPO_TV', 'npx expo prebuild --clean']} />
+<Terminal cmd={['$ unset EXPO_TV', '$ npx expo prebuild --clean']} />
 
 </Step>