chore(example): bump react-native & expo version (#4500)

examples/bare/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

examples/bare/android/gradlew

@@ -15,6 +15,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+# SPDX-License-Identifier: Apache-2.0
+#
 
 ##############################################################################
 #
@@ -84,7 +86,8 @@ done
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
 # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum

examples/bare/android/gradlew.bat

@@ -13,6 +13,8 @@
 @rem See the License for the specific language governing permissions and
 @rem limitations under the License.
 @rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
 
 @if "%DEBUG%"=="" @echo off
 @rem ##########################################################################

examples/bare/package.json

@@ -18,32 +18,32 @@
     "windows": "react-native run-windows --sln windows/BareExample.sln"
   },
   "dependencies": {
-    "@callstack/react-native-visionos": "^0.73.0",
+    "@callstack/react-native-visionos": "^0.78.0",
-    "@react-native-picker/picker": "2.8.1",
+    "@react-native-picker/picker": "2.11.0",
-    "react": "18.2.0",
+    "react": "19.0.0",
-    "react-native": "0.73.2",
+    "react-native": "^0.78.0",
     "react-native-video": "link:../..",
-    "react-native-windows": "^0.73.0"
+    "react-native-windows": "^0.78.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@expo/config-plugins": "^8.0.10",
-    "@react-native/babel-preset": "0.73.19",
+    "@react-native/babel-preset": "^0.78.0",
     "@react-native/eslint-config": "0.73.2",
-    "@react-native/metro-config": "0.73.3",
+    "@react-native/metro-config": "^0.78.0",
     "@react-native/typescript-config": "0.73.1",
     "@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",
+    "jest": "^29.2.1",
     "patch-package": "^8.0.0",
     "prettier": "2.8.8",
-    "react-native-test-app": "^3.10.14",
+    "react-native-test-app": "^4.1.4",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "19.0.0",
     "typescript": "5.0.4"
   },
   "engines": {

examples/expo/android/app/src/main/java/com/anonymous/ExpoExample/MainActivity.kt

@@ -1,4 +1,5 @@
 package com.anonymous.ExpoExample
+import expo.modules.splashscreen.SplashScreenManager
 
 import android.os.Build
 import android.os.Bundle
@@ -15,7 +16,10 @@ class MainActivity : ReactActivity() {
     // Set the theme to AppTheme BEFORE onCreate to support
     // coloring the background, status bar, and navigation bar.
     // This is required for expo-splash-screen.
-    setTheme(R.style.AppTheme);
+    // setTheme(R.style.AppTheme);
+    // @generated begin expo-splashscreen - expo prebuild (DO NOT MODIFY) sync-f3ff59a738c56c9a6119210cb55f0b613eb8b6af
+    SplashScreenManager.registerOnActivity(this)
+    // @generated end expo-splashscreen
     super.onCreate(null)
   }
 

examples/expo/android/app/src/main/res/values/styles.xml

@@ -11,7 +11,9 @@
     <item name="android:textColorHint">#c8c8c8</item>
     <item name="android:textColor">@android:color/black</item>
   </style>
-  <style name="Theme.App.SplashScreen" parent="AppTheme">
+  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
-    <item name="android:windowBackground">@drawable/splashscreen</item>
+    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
+    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
+    <item name="postSplashScreenTheme">@style/AppTheme</item>
   </style>
 </resources>

examples/expo/android/build.gradle

@@ -6,9 +6,9 @@ buildscript {
         minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '24')
         compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '35')
         targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '35')
-        kotlinVersion = findProperty('android.kotlinVersion') ?: '1.9.24'
+        kotlinVersion = findProperty('android.kotlinVersion') ?: '2.0.21'
 
-        ndkVersion = "26.1.10909125"
+        ndkVersion = "27.1.12297006"
     }
     repositories {
         google()

examples/expo/android/gradle.properties

@@ -35,7 +35,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=true
+newArchEnabled=false
 
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.

examples/expo/ios/ExpoExample.xcodeproj/project.pbxproj

@@ -357,11 +357,11 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = com.anonymous.ExpoExample;
-				PRODUCT_NAME = ExpoExample;
+				PRODUCT_NAME = "ExpoExample";
 				SWIFT_OBJC_BRIDGING_HEADER = "ExpoExample/ExpoExample-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = 1;
+				TARGETED_DEVICE_FAMILY = "1";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -385,10 +385,10 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.anonymous.ExpoExample;
-				PRODUCT_NAME = ExpoExample;
+				PRODUCT_NAME = "ExpoExample";
 				SWIFT_OBJC_BRIDGING_HEADER = "ExpoExample/ExpoExample-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = 1;
+				TARGETED_DEVICE_FAMILY = "1";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;

examples/expo/ios/ExpoExample/Images.xcassets/SplashScreenBackground.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors": [
+    {
+      "color": {
+        "components": {
+          "alpha": "1.000",
+          "blue": "1.00000000000000",
+          "green": "1.00000000000000",
+          "red": "1.00000000000000"
+        },
+        "color-space": "srgb"
+      },
+      "idiom": "universal"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "expo"
+  }
+}

examples/expo/ios/Podfile.properties.json

@@ -1,5 +1,6 @@
 {
   "expo.jsEngine": "hermes",
   "EX_DEV_CLIENT_NETWORK_INSPECTOR": "true",
-  "ios.deploymentTarget": "15.1"
+  "ios.deploymentTarget": "15.1",
+  "newArchEnabled": "false"
 }

examples/expo/package.json

@@ -18,21 +18,23 @@
   "dependencies": {
     "@expo/metro-runtime": "~4.0.0",
     "@react-native-picker/picker": "2.9.0",
-    "expo": "^52.0.7",
+    "expo": "^52.0.0",
     "expo-splash-screen": "~0.29.10",
     "expo-status-bar": "~2.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "npm:react-native-tvos@0.76.2-0",
+    "react-native": "npm:react-native-tvos@0.77.2-0",
     "react-native-web": "^0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
+    "@expo/config-plugins": "^9.0.9",
     "@react-native-community/cli": "15.0.1",
     "@react-native-community/cli-platform-android": "15.0.1",
     "@react-native-community/cli-platform-ios": "15.0.1",
+    "@react-native-tvos/config-tv": "^0.0.10",
     "@react-native/babel-preset": "0.76.3",
     "@react-native/eslint-config": "0.76.3",
     "@react-native/metro-config": "0.76.3",
@@ -40,13 +42,11 @@
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
+    "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
     "react-test-renderer": "18.3.1",
-    "@expo/config-plugins": "^9.0.9",
-    "@react-native-tvos/config-tv": "^0.0.10",
-    "babel-plugin-module-resolver": "^5.0.2",
     "typescript": "~5.3.3"
   },
   "expo": {

package.json

@@ -12,17 +12,13 @@
         "type": "git",
         "url": "git@github.com:TheWidlarzGroup/react-native-video.git"
     },
-    "resolutions": {
-        "@types/react": "~18.0.0"
-    },
     "devDependencies": {
         "@expo/config-plugins": "^8.0.5",
         "@jamesacarr/eslint-formatter-github-actions": "^0.2.0",
         "@react-native/eslint-config": "^0.72.2",
         "@release-it/conventional-changelog": "^7.0.2",
         "@types/jest": "^28.1.2",
-        "@types/react": "~18.0.0",
+        "@types/react": "~19.0.0",
-        "@types/react-native": "0.72.3",
         "@typescript-eslint/eslint-plugin": "^6.7.4",
         "eslint": "^8.19.0",
         "eslint-plugin-jest": "^27.4.2",
@@ -30,12 +26,11 @@
         "jest": "^29.7.0",
         "prettier": "^2.4.1",
         "react": "18.2.0",
-        "react-native": "0.73.2",
+        "react-native": "0.78.2",
         "react-native-windows": "^0.61.0-0",
         "release-it": "^16.2.1",
         "typescript": "5.1.6"
     },
-    "dependencies": {},
     "peerDependencies": {
         "react": "*",
         "react-native": "*"

src/Video.web.tsx

@@ -4,10 +4,10 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
-  type RefObject,
   useState,
+  type RefObject,
 } from 'react';
-import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
+import type {ReactVideoProps, VideoMetadata, VideoRef} from './types';
 
 // stolen from https://stackoverflow.com/a/77278013/21726244
 const isDeepEqual = <T,>(a: T, b: T): boolean => {
@@ -54,7 +54,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
     },
     ref,
   ) => {
-    const nativeRef = useRef<HTMLVideoElement>(null);
+    const nativeRef = useRef<HTMLVideoElement | null>(null);
 
     const isSeeking = useRef(false);
     const seek = useCallback(
@@ -426,10 +426,10 @@ const videoStyle = {
 
 const useMediaSession = (
   metadata: VideoMetadata | undefined,
-  nativeRef: RefObject<HTMLVideoElement>,
+  nativeRef: RefObject<HTMLVideoElement | null>,
   showNotification: boolean,
 ) => {
-  const isPlaying = !nativeRef.current?.paused ?? false;
+  const isPlaying = nativeRef.current ? nativeRef.current.paused : false;
   const progress = nativeRef.current?.currentTime ?? 0;
   const duration = Number.isFinite(nativeRef.current?.duration)
     ? nativeRef.current?.duration

src/types/video-ref.ts

@@ -21,5 +21,5 @@ export interface VideoRef {
   setSource: (source?: ReactVideoSource) => void;
   enterPictureInPicture: () => void;
   exitPictureInPicture: () => void;
-  nativeHtmlVideoRef?: RefObject<HTMLVideoElement>; // web only
+  nativeHtmlVideoRef?: RefObject<HTMLVideoElement | null>; // web only
 }