chore(example): add more platforms and fix metro resolve

example/.gitignore

@@ -0,0 +1,16 @@
+*.binlog
+*.hprof
+*.xcworkspace/
+*.zip
+.DS_Store
+.gradle/
+.idea/
+.vs/
+.xcode.env
+Pods/
+build/
+dist/*
+!dist/.gitignore
+local.properties
+msbuild.binlog
+node_modules/

example/android/gradle.properties

@@ -25,7 +25,7 @@ org.gradle.jvmargs=-Xmx2g -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryEr
 # https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
 # Automatically convert third-party libraries to use AndroidX
-android.enableJetifier=false
+android.enableJetifier=true
 # Jetifier randomly fails on these libraries
 android.jetifier.ignorelist=hermes-android,react-android
 
@@ -40,8 +40,8 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
 # Note that this is incompatible with web debugging.
-newArchEnabled=true
-bridgelessEnabled=true
+#newArchEnabled=true
+#bridgelessEnabled=true
 
 # Uncomment the line below to build React Native from source.
 #react.buildFromSource=true

example/index.js

@@ -1,3 +1,7 @@
+/**
+ * @format
+ */
+
 import { AppRegistry } from 'react-native';
 import App from './src/App';
 import { name as appName } from './app.json';

example/metro.config.js

@@ -1,18 +1,20 @@
+const { makeMetroConfig } = require('@rnx-kit/metro-config');
+
 const path = require('path');
-const { getDefaultConfig } = require('@react-native/metro-config');
-const { getConfig } = require('react-native-builder-bob/metro-config');
-const pkg = require('../package.json');
 
-const root = path.resolve(__dirname, '..');
-
-/**
- * Metro configuration
- * https://facebook.github.io/metro/docs/configuration
- *
- * @type {import('metro-config').MetroConfig}
- */
-module.exports = getConfig(getDefaultConfig(__dirname), {
-  root,
-  pkg,
-  project: __dirname,
+module.exports = makeMetroConfig({
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: false,
+      },
+    }),
+  },
+  // Resolve modules from the root of the monorepo
+  resolver: {
+    extraNodeModules: ['../node_modules'],
+  },
+  // Watch the root of the monorepo (local react-native-video files)
+  watchFolders: [path.resolve(__dirname, '..')],
 });

example/package.json

@@ -4,28 +4,44 @@
   "private": true,
   "scripts": {
     "android": "react-native run-android",
-    "build:android": "npm run mkdist && react-native bundle --entry-file index.js --platform android --dev true --bundle-output dist/main.android.jsbundle --assets-dest dist && react-native build-android --extra-params \"--no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a\"",
-    "build:ios": "npm run mkdist && react-native bundle --entry-file index.js --platform ios --dev true --bundle-output dist/main.ios.jsbundle --assets-dest dist && react-native build-ios --scheme VideoExample --mode Debug --extra-params \"-sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO\"",
+    "build:android": "npm run mkdist && react-native bundle --entry-file index.js --platform android --dev true --bundle-output dist/main.android.jsbundle --assets-dest dist/res",
+    "build:ios": "npm run mkdist && react-native bundle --entry-file index.js --platform ios --dev true --bundle-output dist/main.ios.jsbundle --assets-dest dist",
+    "build:visionos": "npm run mkdist && react-native bundle --entry-file index.js --platform ios --dev true --bundle-output dist/main.visionos.jsbundle --assets-dest dist",
+    "build:windows": "npm run mkdist && react-native bundle --entry-file index.js --platform windows --dev true --bundle-output dist/main.windows.bundle --assets-dest dist",
     "ios": "react-native run-ios",
+    "lint": "eslint .",
     "mkdist": "node -e \"require('node:fs').mkdirSync('dist', { recursive: true, mode: 0o755 })\"",
-    "start": "react-native start"
+    "start": "react-native start",
+    "test": "jest",
+    "visionos": "react-native run-visionos",
+    "windows": "react-native run-windows --sln windows/VideoExample.sln"
   },
   "dependencies": {
+    "@callstack/react-native-visionos": "^0.75.0",
     "react": "18.3.1",
-    "react-native": "0.75.4",
-    "react-native-nitro-modules": "^0.13.0"
+    "react-native": "0.75.3",
+    "react-native-windows": "^0.75.0",
     "react-native-nitro-modules": ">=0.15.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
-    "@react-native/babel-preset": "0.75.4",
-    "@react-native/metro-config": "0.75.4",
-    "@react-native/typescript-config": "0.75.4",
-    "@rnx-kit/metro-config": "^2.0.0",
+    "@react-native/babel-preset": "0.75.3",
+    "@react-native/eslint-config": "0.75.3",
+    "@react-native/metro-config": "0.75.3",
     "react-native-builder-bob": "^0.30.2",
-    "react-native-test-app": "^3.10.14"
+    "@react-native/typescript-config": "0.75.3",
+    "@rnx-kit/metro-config": "^2.0.0",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.6.3",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "2.8.8",
+    "react-native-test-app": "^3.10.22",
+    "react-test-renderer": "18.3.1",
+    "typescript": "5.0.4"
   },
   "engines": {
     "node": ">=18"

example/react-native.config.js

@@ -1,17 +1,28 @@
 const path = require('path');
 const pkg = require('../package.json');
-const { configureProjects } = require('react-native-test-app');
+
+const project = (() => {
+  try {
+    const { configureProjects } = require('react-native-test-app');
+    return configureProjects({
+      android: {
+        sourceDir: 'android',
+      },
+      ios: {
+        sourceDir: 'ios',
+      },
+      windows: {
+        sourceDir: 'windows',
+        solutionFile: 'windows/VideoExample.sln',
+      },
+    });
+  } catch (_) {
+    return undefined;
+  }
+})();
 
 module.exports = {
-  project: configureProjects({
-    android: {
-      sourceDir: 'android',
-    },
-    ios: {
-      sourceDir: 'ios',
-      automaticPodsInstallation: true,
-    },
-  }),
+  ...(project ? { project } : undefined),
   dependencies: {
     [pkg.name]: {
       root: path.join(__dirname, '..'),

example/src/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Platform, StyleSheet, View } from 'react-native';
+import { Button, Dimensions, Platform, StyleSheet, View } from 'react-native';
 import { VideoView, createPlayer } from 'react-native-video';
 
 const player = createPlayer('https://www.w3schools.com/html/mov_bbb.mp4');
@@ -22,11 +22,13 @@ export default function App() {
 
   return (
     <View style={styles.container}>
-      <VideoView player={player} style={styles.box} />
-      {/* Two VideoViews with same player are supported not supported on Android */}
-      {Platform.OS === 'ios' && show && (
+      <View style={styles.videoContainer}>
         <VideoView player={player} style={styles.box} />
-      )}
+        {/* Two VideoViews with same player are supported not supported on Android */}
+        {Platform.OS === 'ios' && show && (
+          <VideoView player={player} style={styles.box} />
+        )}
+      </View>
       <Button title="Play" onPress={play} />
       <Button title="Pause" onPress={pause} />
       <Button title="Seek to 3sec" onPress={seek} />
@@ -41,6 +43,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'flex-start',
   },
+  videoContainer: {
+    flexDirection: Dimensions.get('window').width > 700 ? 'row' : 'column',
+    gap: 20,
+  },
   box: {
     width: 300,
     height: 300,

example/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@react-native/typescript-config/tsconfig.json"
+}

example/visionos/Podfile

@@ -0,0 +1,9 @@
+ws_dir = Pathname.new(__dir__)
+ws_dir = ws_dir.parent until
+  File.exist?("#{ws_dir}/node_modules/react-native-test-app/visionos/test_app.rb") ||
+  ws_dir.expand_path.to_s == '/'
+require "#{ws_dir}/node_modules/react-native-test-app/visionos/test_app.rb"
+
+workspace 'VideoExample.xcworkspace'
+
+use_test_app!

example/windows/.gitignore

@@ -0,0 +1,33 @@
+.vs/
+
+# User-specific files
+*.suo
+*.user
+*.sln.docstates
+
+# Build results
+ARM64/
+AppPackages/
+[Bb]in/
+[Dd]ebug/
+[Dd]ebugPublic/
+[Oo]bj/
+[Rr]elease/
+[Rr]eleases/
+bld/
+build/
+x64/
+x86/
+
+# NuGet Packages Directory
+packages/
+
+**/Generated Files/**
+*.binlog
+*.hprof
+*.sln
+ExperimentalFeatures.props
+NuGet.Config
+dist/
+msbuild.binlog
+node_modules/