Warning: Component "CustomTwilioVideoView" contains the string ref "videoView".

[rickyyancormc]

Steps to reproduce

1. Install the dependency
2. Run the application on android device or emulator

Expected behaviour

Run without warning message

Actual behaviour

You get the following warning message: warning: Component "CustomTwilioVideoView" contains the string ref "videoView". Support for string refs will be removed in a future major release. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://react.dev/link/strict-mode-string-ref

Environment

• Node.js version: v18.20.4
• React Native version: 0.75.3
• React Native platform + platform version: Android API_35

react-native-twilio-video-webrtc

Version: eact-native-twilio-video-webrtc@npm:3.2.1

[Rdevs]

Facing the same issue. Please fix this.

[ejuarezokit]

Facing same problem

[darpsoft]

The problem is somewhat simple to solve, just use createRef. Here I save you the trouble of changing it.

diff --git a/node_modules/react-native-twilio-video-webrtc/src/TwilioVideo.android.js b/node_modules/react-native-twilio-video-webrtc/src/TwilioVideo.android.js
index 4e40bf4..8c203fb 100644
--- a/node_modules/react-native-twilio-video-webrtc/src/TwilioVideo.android.js
+++ b/node_modules/react-native-twilio-video-webrtc/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()}
       />

[feng-yu-healthbank]

Facing the same issue. Please fix this.

[george-eucare]

same issue.

[feng-yu-healthbank]

Finally the warning has become an error on RN 0.79. It's time to fix it. Please don't leave the pull requests open for so long.