docs(expo): add documentation on extra setup for Expo web

doublesymmetry · Nov 7, 2024 · 0399512 · 0399512
1 parent aaa0d5c
commit 0399512
Showing 1 changed file with 40 additions and 4 deletions.
diff --git a/docs/docs/basics/installation.mdx b/docs/docs/basics/installation.mdx
@@ -48,7 +48,11 @@ iOS requires a few extra steps that are _not_ required for Android/Web.
 
 ### Enable Swift Modules
 
-Because the iOS module uses Swift, if the user is using a standard react-native application they'll need to add support for Swift in the project. This can be easily by adding a swift file to the Xcode project -- could be called `dummy.swift` and saying yes when prompted if you'd like to generate a bridging header.
+Because the iOS module uses Swift, if the user is using a standard react-native
+application they'll need to add support for Swift in the project. This can be
+easily by adding a swift file to the Xcode project -- could be called
+`dummy.swift` and saying yes when prompted if you'd like to generate a bridging
+header.
 
 ![Importing Swift](https://i.imgur.com/CBqBcWs.png)
 
@@ -95,13 +99,45 @@ if you're using HLS streams with MPEG2-TS content.
   </TabItem>
 </Tabs>
 
+## Expo Web
+
+Expo web [does not currently support dynamic imports](https://github.com/doublesymmetry/react-native-track-player/pull/2299#issuecomment-2462566794)
+which are leveraged in the web package to support SSR. If you'd like to use the
+web version via Expo the recommendation is to:
+
+### 1. Install `@expo/metro-runtime`
+
+<Tabs groupId="pkg">
+  <TabItem value="npm" label="NPM" default>
+
+    npm install --save @expo/metro-runtime
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+    yarn add @expo/metro-runtime
+
+  </TabItem>
+</Tabs>
+
+### 2. Import `@expo/metro-runtime` in your App root
+
+```tsx
+// App.tsx
+import '@expo/metro-runtime';
+...
+```
+
 ## Expo
 
-You can now use React Native Track Player with Expo. 
+You can now use React Native Track Player with Expo.
 
-Please be aware that while many people are using React Native Track Player with Expo successfully, the current maintainers of this project do not use Expo and their ability to resolve issues involving Expo is limited.
+Please be aware that while many people are using React Native Track Player with
+Expo successfully, the current maintainers of this project do not use Expo and
+their ability to resolve issues involving Expo is limited.
 
-To get started, create a [custom development client](https://docs.expo.dev/clients/getting-started/) for your Expo app and then install React Native Track Player.
+To get started, create a [custom development client](https://docs.expo.dev/clients/getting-started/)
+for your Expo app and then install React Native Track Player.
 
 Here is the configuration required for audio playback in background: