Add react-native-web support (#3958)

Co-authored-by: Kamil Moskała <91079590+moskalakamil@users.noreply.github.com>

examples/README.md

@@ -6,7 +6,7 @@ This directory contains examples for `react-native-video` - this is a guide that
 
 - **[`bare`](#bare)** - Main example ([react-native-test-app](https://github.com/microsoft/react-native-test-app) - bare react-native app) that you can run on: iOS, Android, Windows, visionOS
 
-- **[`expo`](#expo)** - Expo example that you can run on: iOS, Android, tvOS, web (support coming soon)
+- **[`expo`](#expo)** - Expo example that you can run on: iOS, Android, tvOS, web
 
 ### Updating Examples Content
 
@@ -151,7 +151,9 @@ cd examples/expo && yarn install
 > Setup for android is not complete yet. Please use bare app for android testing.
 
     - For Web:
-      Support for web is coming soon.
+      ```bash
+      yarn web
+      ```
 
 If Metro Bundler is not running (or it did not start), you can start it by running:
 

examples/bare/src/constants/general.ts

@@ -78,6 +78,14 @@ export const srcAllPlatformList = [
     description: 'another bunny (can be saved)',
     uri: 'https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4',
     headers: {referer: 'www.github.com', 'User-Agent': 'react.native.video'},
+    metadata: {
+      title: 'Custom Title',
+      subtitle: 'Custom Subtitle',
+      artist: 'Custom Artist',
+      description: 'Custom Description',
+      imageUri:
+        'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png',
+    },
   },
   {
     description: 'sintel with subtitles',

examples/bare/src/styles.tsx

@@ -1,4 +1,4 @@
-import {StyleSheet} from 'react-native';
+import {Platform, StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
   container: {
@@ -63,6 +63,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     overflow: 'hidden',
     paddingBottom: 10,
+    paddingTop: Platform.OS === 'web' ? 25 : 0,
   },
   rateControl: {
     flex: 1,
@@ -146,7 +147,7 @@ const styles = StyleSheet.create({
   },
   picker: {
     flex: 1,
-    color: 'white',
+    color: Platform.OS === 'web' ? 'black' : 'white',
     flexDirection: 'row',
     justifyContent: 'center',
     width: 100,

examples/expo/package.json

@@ -15,13 +15,15 @@
     "update-src": "echo 'Updating src from ../bare/src' && rm -r ./src && cp -r ../bare/src ./src && echo 'Updated src from ../bare/src'"
   },
   "dependencies": {
+    "@expo/metro-runtime": "^3.2.3",
     "@react-native-picker/picker": "2.8.1",
     "expo": "~51.0.31",
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "npm:react-native-tvos@~0.74.5-0"
+    "react-native": "npm:react-native-tvos@~0.74.5-0",
+    "react-native-web": "^0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",

examples/expo/src/constants/general.ts

@@ -78,6 +78,14 @@ export const srcAllPlatformList = [
     description: 'another bunny (can be saved)',
     uri: 'https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4',
     headers: {referer: 'www.github.com', 'User-Agent': 'react.native.video'},
+    metadata: {
+      title: 'Custom Title',
+      subtitle: 'Custom Subtitle',
+      artist: 'Custom Artist',
+      description: 'Custom Description',
+      imageUri:
+        'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png',
+    },
   },
   {
     description: 'sintel with subtitles',

examples/expo/src/styles.tsx

@@ -1,4 +1,4 @@
-import {StyleSheet} from 'react-native';
+import {Platform, StyleSheet} from 'react-native';
 
 const styles = StyleSheet.create({
   container: {
@@ -63,6 +63,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     overflow: 'hidden',
     paddingBottom: 10,
+    paddingTop: Platform.OS === 'web' ? 25 : 0,
   },
   rateControl: {
     flex: 1,
@@ -146,7 +147,7 @@ const styles = StyleSheet.create({
   },
   picker: {
     flex: 1,
-    color: 'white',
+    color: Platform.OS === 'web' ? 'black' : 'white',
     flexDirection: 'row',
     justifyContent: 'center',
     width: 100,