Expo-video is not working with react-native-zoom-us

[adsalihac]

expo-video - 2.0.1 Utilizing Media3 for Video Playback

Platform - Android only , iOS is working fine.

def androidxMedia3Version = "1.4.0"
implementation "androidx.media3:media3-session:${androidxMedia3Version}"
implementation "androidx.media3:media3-exoplayer:${androidxMedia3Version}"
implementation "androidx.media3:media3-exoplayer-dash:${androidxMedia3Version}"
implementation "androidx.media3:media3-exoplayer-hls:${androidxMedia3Version}"
implementation "androidx.media3:media3-ui:${androidxMedia3Version}"
implementation "androidx.media3:media3-datasource-okhttp:${androidxMedia3Version}"

Testing

• If removed react-native-zoom-us , player is working fine.
• If add zoom module , video player audio is working fine.

The following code is not functioning with Expo-Video.
https://github.com/mieszko4/react-native-zoom-us/blob/master/docs/TROUBLESHOOTING.md

The media3 version issue has been resolved, and the player is functioning as intended.

`def androidxMedia3Version = "1.4.1"`
implementation "androidx.media3:media3-ui:${androidxMedia3Version}" 

This module is affecting the video player and zoom module.

However, after this, the zoom initial loading screen is a white screen.

I have blocked this case. The react-native-video library lacks certain features, necessitating the use of expo-video instead.

[adsalihac]

Any idea about this problem @mieszko4

[mieszko4]

Related: #372

[mieszko4]

@adsalihac Could you try with 12.0.0 - it uses android meeting SDK@6.4.10 - so maybe the issue is gone.

[AlexSoong980830]

@mieszko4 Can the react-native-zoom-us compatible with react-native-video in android? I have used react-native-zoom-us 12.0.0 and used react-native-video 6.17.0, the react-native-video is using androidx.media3.exoplayer in this version.

I have tested if removed react-native-video, zoom is fine in android. If added react-native-video, user get a blank page on Android while waiting for the host.

I have searched #372 #373, the only solution is change react-native-video to expo-video. But we don't want to change it, can react-native-zoom-us compatible with react-native-video?

[adsalihac]

i just solved android zoom blank screen issue using this.

Using Expo

const { withAppBuildGradle } = require('@expo/config-plugins');

const withExoPlayer = (config) => {
  return withAppBuildGradle(config, (config) => {
    if (config.modResults.contents) {
      const gradleContent = config.modResults.contents;

      // Add android configuration block for version resolution
      if (!gradleContent.includes('android {')) {
        config.modResults.contents = gradleContent.replace(
          /apply plugin: "com\.android\.application"/,
          `apply plugin: "com.android.application"

android {
    configurations.all {
        resolutionStrategy {
            // Force consistent Media3 version across all dependencies
            def forcedMedia3Version = "1.4.1"
            force "androidx.media3:media3-common:${forcedMedia3Version}"
            force "androidx.media3:media3-session:${forcedMedia3Version}"
            force "androidx.media3:media3-exoplayer:${forcedMedia3Version}"
            force "androidx.media3:media3-exoplayer-dash:${forcedMedia3Version}"
            force "androidx.media3:media3-exoplayer-hls:${forcedMedia3Version}"
            force "androidx.media3:media3-ui:${forcedMedia3Version}"
            force "androidx.media3:media3-datasource-okhttp:${forcedMedia3Version}"
        }
    }
}`
        );
      }

      // Update dependencies block with Media3 dependencies
      config.modResults.contents = gradleContent.replace(
        /dependencies\s*{/,
        `dependencies {
          // Define Media3 version
          def androidxMedia3Version = "1.4.1"
          implementation 'us.zoom.meetingsdk:zoomsdk:6.4.10'
          implementation "androidx.media3:media3-common:1.4.1"
          implementation "androidx.media3:media3-session:1.4.1"
          implementation "androidx.media3:media3-exoplayer:1.4.1"

          // Media3 extension modules
          implementation "androidx.media3:media3-exoplayer-dash:1.4.1"
          implementation "androidx.media3:media3-exoplayer-hls:1.4.1"
          implementation "androidx.media3:media3-ui:1.4.1"
          implementation "androidx.media3:media3-datasource-okhttp:1.4.1"

          // Handle potential conflicts with other libraries
        //   implementation (project(':expo-video')) {
        //       exclude group: 'com.google.android.exoplayer'
        //       exclude group: 'androidx.media3'
        //   }

          // If using Zoom, exclude its media player dependencies
        //   implementation (project(':react-native-zoom-us')) {
        //       exclude group: 'androidx.media3'
        //   }
        `
      );
    }

    return config;
  });
};

module.exports = withExoPlayer;

app.config file
plugins: ['./plugins/withAndroidDependencies' ],

Packages

"react-native": "0.79.6",
 "expo": "~53.0.23",
 "@zoom/meetingsdk-react-native": "6.4.10",

In React Native

open android/app/build.gradle

dependencies {
          // Define Media3 version
          def androidxMedia3Version = "1.4.1"
          implementation 'us.zoom.meetingsdk:zoomsdk:6.4.10'
          implementation "androidx.media3:media3-common:1.4.1"
          implementation "androidx.media3:media3-session:1.4.1"
          implementation "androidx.media3:media3-exoplayer:1.4.1"

          // Media3 extension modules
          implementation "androidx.media3:media3-exoplayer-dash:1.4.1"
          implementation "androidx.media3:media3-exoplayer-hls:1.4.1"
          implementation "androidx.media3:media3-ui:1.4.1"
          implementation "androidx.media3:media3-datasource-okhttp:1.4.1"
}

[adsalihac]

i just solved android zoom blank screen issue using this.

Using Expo

const { withAppBuildGradle } = require('@expo/config-plugins');

const withExoPlayer = (config) => {
  return withAppBuildGradle(config, (config) => {
    if (config.modResults.contents) {
      const gradleContent = config.modResults.contents;

      // Add android configuration block for version resolution
      if (!gradleContent.includes('android {')) {
        config.modResults.contents = gradleContent.replace(
          /apply plugin: "com\.android\.application"/,
          `apply plugin: "com.android.application"

android {
    configurations.all {
        resolutionStrategy {
            // Force consistent Media3 version across all dependencies
            def forcedMedia3Version = "1.4.1"
            force "androidx.media3:media3-common:${forcedMedia3Version}"
            force "androidx.media3:media3-session:${forcedMedia3Version}"
            force "androidx.media3:media3-exoplayer:${forcedMedia3Version}"
            force "androidx.media3:media3-exoplayer-dash:${forcedMedia3Version}"
            force "androidx.media3:media3-exoplayer-hls:${forcedMedia3Version}"
            force "androidx.media3:media3-ui:${forcedMedia3Version}"
            force "androidx.media3:media3-datasource-okhttp:${forcedMedia3Version}"
        }
    }
}`
        );
      }

      // Update dependencies block with Media3 dependencies
      config.modResults.contents = gradleContent.replace(
        /dependencies\s*{/,
        `dependencies {
          // Define Media3 version
          def androidxMedia3Version = "1.4.1"
          implementation 'us.zoom.meetingsdk:zoomsdk:6.4.10'
          implementation "androidx.media3:media3-common:1.4.1"
          implementation "androidx.media3:media3-session:1.4.1"
          implementation "androidx.media3:media3-exoplayer:1.4.1"

          // Media3 extension modules
          implementation "androidx.media3:media3-exoplayer-dash:1.4.1"
          implementation "androidx.media3:media3-exoplayer-hls:1.4.1"
          implementation "androidx.media3:media3-ui:1.4.1"
          implementation "androidx.media3:media3-datasource-okhttp:1.4.1"

          // Handle potential conflicts with other libraries
        //   implementation (project(':expo-video')) {
        //       exclude group: 'com.google.android.exoplayer'
        //       exclude group: 'androidx.media3'
        //   }

          // If using Zoom, exclude its media player dependencies
        //   implementation (project(':react-native-zoom-us')) {
        //       exclude group: 'androidx.media3'
        //   }
        `
      );
    }

    return config;
  });
};

module.exports = withExoPlayer;

app.config file plugins: ['./plugins/withAndroidDependencies' ],

Packages

"react-native": "0.79.6",
 "expo": "~53.0.23",
 "@zoom/meetingsdk-react-native": "6.4.10",

In React Native

open android/app/build.gradle

dependencies {
          // Define Media3 version
          def androidxMedia3Version = "1.4.1"
          implementation 'us.zoom.meetingsdk:zoomsdk:6.4.10'
          implementation "androidx.media3:media3-common:1.4.1"
          implementation "androidx.media3:media3-session:1.4.1"
          implementation "androidx.media3:media3-exoplayer:1.4.1"

          // Media3 extension modules
          implementation "androidx.media3:media3-exoplayer-dash:1.4.1"
          implementation "androidx.media3:media3-exoplayer-hls:1.4.1"
          implementation "androidx.media3:media3-ui:1.4.1"
          implementation "androidx.media3:media3-datasource-okhttp:1.4.1"
}

Exo player version is compare to inside expo video or react native video package and update in above code

[AlexSoong980830]

I am using react-native, but no expo. And I added this android/app/build.gradle and still not work. And My package is using react-native-zoom-us but not using @zoom/meetingsdk

dependencies {
          // Define Media3 version
          def androidxMedia3Version = "1.4.1"
          implementation "androidx.media3:media3-common:1.4.1"
          implementation "androidx.media3:media3-session:1.4.1"
          implementation "androidx.media3:media3-exoplayer:1.4.1"

          // Media3 extension modules
          implementation "androidx.media3:media3-exoplayer-dash:1.4.1"
          implementation "androidx.media3:media3-exoplayer-hls:1.4.1"
          implementation "androidx.media3:media3-ui:1.4.1"
          implementation "androidx.media3:media3-datasource-okhttp:1.4.1"
}

[mieszko4]

@adsalihac Is this an issue for you with react-native-zoom-us@15.0.0?

Note that issue with react-native-video was resolved in newest version - see #395 (comment)

[mieszko4]

Actually, it says that Expo is currently not supported. on their official React Native SDK (https://developers.zoom.us/docs/meeting-sdk/react-native/get-started/).
Hence, I do not think we can easily fix that until they figure this out.

Currently installing expo with react-native-zoom-us@16.1.0 will cause fatal error when just joinning the meeting:

kotlin.reflect.jvm.internal.KotlinReflectionInternalError: Function 'onRenderHandleChanged' (JVM signature: onRenderHandleChanged(J)V) not resolved in class us.zoom.component.features.joinflow.avpreview.ZmAVPreviewBizHandler: no members found

which may be related to kotlin version mismatch.

Related: https://devforum.zoom.us/t/crash-when-joining-meeting-after-updating-android-meeting-sdk-from-version-6-1-1-to-version-6-6-0/137632/6

[wilkinson4]

Actually, it says that Expo is currently not supported. on their official React Native SDK (https://developers.zoom.us/docs/meeting-sdk/react-native/get-started/). Hence, I do not think we can easily fix that until they figure this out.

Currently installing expo with react-native-zoom-us@16.1.0 will cause fatal error when just joinning the meeting:

kotlin.reflect.jvm.internal.KotlinReflectionInternalError: Function 'onRenderHandleChanged' (JVM signature: onRenderHandleChanged(J)V) not resolved in class us.zoom.component.features.joinflow.avpreview.ZmAVPreviewBizHandler: no members found

which may be related to kotlin version mismatch.

Related: https://devforum.zoom.us/t/crash-when-joining-meeting-after-updating-android-meeting-sdk-from-version-6-1-1-to-version-6-6-0/137632/6

After reading through these posts I remembered that I have a branch locally where I'm running the official Zoom Android SDK version 6.4.10 and the expo sdk 52 where everything is compiling and working fine. That made me wonder, do we need to change a kotlin version in this library's code. Maybe here?

[wilkinson4]

Nvm, I tried adding the following changes to this library, but no success 😦. My assumption is that the Android Meeting SDK, possibly versions 6.5 and up, added a 1.x Kotlin API's in the ZmAVPreviewBizHandler that aren't supported in Kotlin 2.x. I've been using this RN wrapper lib with expo for over a year now with no expo-related issues 🤷 . Seems like the dev team at Zoom is on it though 🤞

diff --git a/android/build.gradle b/android/build.gradle
index 1c8cbb5..bcbb688 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -12,7 +12,7 @@ buildscript {
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.1.3'
+        classpath 'com.android.tools.build:gradle:8.2.2'
     }
 }
 
@@ -67,9 +67,6 @@ dependencies.add("implementation", libraries.lottie)
 dependencies.add("implementation", libraries.supportWindow)
 dependencies.add("implementation", libraries.windowJava)
 
-dependencies.add("implementation", libraries.jetbrainskotlin)
-dependencies.add("implementation", libraries.kotlinStdlibJdk)
-
 dependencies.add("implementation", libraries.kotlinxCoroutinesAndroid)
 dependencies.add("implementation", libraries.kotlinxCoroutinesCore)
 dependencies.add("implementation", libraries.androidxCoreKtx)
diff --git a/android/zoom-meeting-sdk-versions.gradle b/android/zoom-meeting-sdk-versions.gradle
index ce7c798..665a9f1 100644
--- a/android/zoom-meeting-sdk-versions.gradle
+++ b/android/zoom-meeting-sdk-versions.gradle
@@ -79,7 +79,7 @@ ext.libs = [
         archCoreVersion: '2.2.0',
         multidexVersion: '2.0.1',
         scaleImageViewVersion: '3.10.0',
-        kotlinVersion: '1.9.23',
+        kotlinVersion: '2.0.21',
         securityCryptoVersion: '1.1.0-alpha05',
         cryptoTinkVersion: '1.7.0',
         androidxCoreVersion: '1.13.0',
@@ -127,7 +127,7 @@ ext.libs = [
         javapoetVersion: '1.13.0',
         mediaVersion: '1.4.3',
         supportWindowVersion: '1.1.0',
-        kotlinParcelizeVersion: '1.9.23',
+        kotlinParcelizeVersion: '2.0.21',
         composeUITestVersion: '1.8.3',
         composeUIToolingVersion: '1.8.3',
         coilGifVersion: '2.3.0',
@@ -295,4 +295,4 @@ ext.libraries = [
         composeUITest: "androidx.compose.ui:ui-test:${libs.composeUITestVersion}",
         composeUITooling: "androidx.compose.ui:ui-tooling:${libs.composeUIToolingVersion}",
         coilGif: "io.coil-kt:coil-gif:${libs.coilGifVersion}",
-]
\ No newline at end of file
+]

[mieszko4]

Thnx @wilkinson4 for checking this out.

Seems like the dev team at Zoom is on it though 🤞

Recently Android Zoom Meeting SDK@6.6.10 was released but they are still on kotlin@1.9.23. Hopefully in the next version they will upgrade kotlin.

After reading through these posts I remembered that I have a branch locally where I'm running the official Zoom Android SDK version 6.4.10 and the expo sdk 52 where everything is compiling and working fine

Which RN do you use?

Based on RN upgrade-helper there is the following RN<->kotlin relation (minor/major versions):

• rn@0.73.0 -> kotlin@1.8.0 (first time usage of kotlin)
• rn@0.74.0 -> kotlin@1.9.22
• rn@0.77.0 -> kotlin@2.0.21
• rn@0.80.0 -> kotlin@2.1.20

[wilkinson4]

I'm using RN 0.77.2