[Android][React Native0.76] Duplicate Video Tracks After App Switch During Call

[george-eucare]

Issue Description

After upgrading React Native from version 0.72 to 0.76.9 (newArchEnabled), I encountered several Android-specific issues. Fortunately, thanks to the helpful discussions and contributions from the community, I was able to resolve them successfully.

Thanks to the contributors of the following issues:

Issue #758 – Comment on view-related crash PR #767 – Fixes for React Native 0.76 compatibility

Here is patch info:

diff --git a/android/build.gradle b/android/build.gradle
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -1,9 +1,9 @@
 apply plugin: 'com.android.library'
 
-def DEFAULT_COMPILE_SDK_VERSION             = 30
-def DEFAULT_BUILD_TOOLS_VERSION             = "27.0.3"
-def DEFAULT_TARGET_SDK_VERSION              = 30
-def DEFAULT_ANDROID_SUPPORT_VERSION         = "27.1.0"
+def DEFAULT_COMPILE_SDK_VERSION             = 33
+def DEFAULT_BUILD_TOOLS_VERSION             = "33.0.2"
+def DEFAULT_TARGET_SDK_VERSION              = 33
+// def DEFAULT_ANDROID_SUPPORT_VERSION         = "27.1.0"
 def DEFAULT_ANDROID_MIN_SDK_VERSION         = 21
 
 android {
@@ -47,10 +47,16 @@ android {
 }
 
 dependencies {
-    def androidSupportVersion = rootProject.hasProperty("androidSupportVersion")  ? rootProject.androidSupportVersion : DEFAULT_ANDROID_SUPPORT_VERSION
+    // def androidSupportVersion = rootProject.hasProperty("androidSupportVersion")  ? rootProject.androidSupportVersion : DEFAULT_ANDROID_SUPPORT_VERSION
 
     implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation "com.android.support:appcompat-v7:$androidSupportVersion"
+    // implementation "com.android.support:appcompat-v7:$androidSupportVersion"
+
+    // Use AndroidX libraries
+    implementation "androidx.appcompat:appcompat:1.6.1"
+    implementation "androidx.core:core:1.13.1"
+
+    // Include Twilio Video SDK
     implementation "com.twilio:video-android:7.6.1"
     implementation "com.facebook.react:react-native:+"  // From node_modules
 }

diff --git a/src/TwilioVideo.android.js b/src/TwilioVideo.android.js
--- a/src/TwilioVideo.android.js
+++ b/src/TwilioVideo.android.js
@@ -14,7 +14,7 @@ import {
   findNodeHandle,
   requireNativeComponent,
 } from "react-native";
-import React, { Component } from "react";
+import React, { Component, createRef } from "react";
 
 import PropTypes from "prop-types";
 
@@ -170,6 +170,7 @@ const nativeEvents = {
 };
 
 class CustomTwilioVideoView extends Component {
+  videoViewRef = createRef();
   connect({
     roomName,
     accessToken,
@@ -271,7 +272,7 @@ class CustomTwilioVideoView extends Component {
     switch (Platform.OS) {
       case "android":
         UIManager.dispatchViewManagerCommand(
-          findNodeHandle(this.refs.videoView),
+          findNodeHandle(this.videoViewRef.current),
           event,
           args
         );
@@ -320,7 +321,7 @@ class CustomTwilioVideoView extends Component {
   render() {
     return (
       <NativeCustomTwilioVideoView
-        ref="videoView"
+        ref={this.videoViewRef}
         {...this.props}
         {...this.buildNativeEventWrappers()}
       />

However, there's still one issue that persists on Android:

When a user is in a video call and quickly switches to another app and back, a new video track is added on the Participant side, while the previous video track remains active — resulting in duplicate tracks.

This behavior did not occur before the upgrade. In previous versions, switching apps would properly remove the existing video track on the Participant side, and the track would be re-added upon returning to the app.

Steps to Reproduce

1. Start a video call.
2. switch to another app.
3. Quickly return to the app.
4. Observe the video tracks on the Participant side.

Actual Behaviour

• A new video track is added every time the user switches away and back quickly.

• Old video tracks remain and are not removed.

• Results in duplicate (or accumulating) video tracks on the Participant side.

Expected Behaviour (Prior to Upgrade)

• Upon switching away from the app, the current video track is removed.

• When the user returns to the app, a new video track is added, replacing the old one.

• Only one active video track is present at any time.

Environment

React Native version: 0.76.9

Node.js version: v22.16.0

Platform: Android