TWVideoModule broken in RN Bridgeless mode

[jjPlusPlus]

Issue Description

Using new React Native architecture breaks underlying Twilio video module. I am able to run this package for now by disabling the new architecture in my React Native project.

Steps to reproduce

• Spin up a new Expo / React Native project. Expo v52+ and React Native v74+.
• Install react-native-twilio-video-webrtc lib
• follow configuration docs for Expo (add/configure expo-build-properties, run prebuild + development build, OR set up EAS.)
• Configure example component from this repo (also get valid token from Twilio)
• Run application

Expected behaviour

Example application should run; more specifically, twilioRef.current.connect({ accessToken: token}) should run without issue.

This should work with the "new architecture" for React Native enabled.

Actual behaviour

(NOBRIDGE) LOG [Error: TWVideoModule.connect(): Error while converting JavaScript argument 2 to Objective C type BOOL. Objective C type BOOL is unsupported.]

Environment

Node.js version: v20.0.0 React Native (version 0.76.7) built with Expo (version ^52.0.37) Prebuild + development build using Expo App Services

[kdarwishTCE]

Any solution for this yet ?

[gsbernstein]

I'm getting this as well.

[avirageorge31]

I'm also getting the same issue. Has anyone found a solution yet

[gsbernstein]

Based off of this similar issue on a different package, I made a patch file for patch-package that seems to work.

react-native-twilio-video-webrtc+3.2.1.patch

I'll raise a PR as well.

[george-eucare]

same issue

[pierroo]

twilio is also breaking on my end with the new architecture, but on android.

you guys are also facing the same issue?

Warning: Error: Expected ref to be a function, an object returned by React.createRef(), or undefined/null.

it had been working for months until I upgraded RN to 0.79.3 and new arch enabled.

if anyone found a solution / patch, that would be a life saver :)

[george-eucare]

twilio is also breaking on my end with the new architecture, but on android.

you guys are also facing the same issue?

Warning: Error: Expected ref to be a function, an object returned by React.createRef(), or undefined/null.

it had been working for months until I upgraded RN to 0.79.3 and new arch enabled.

if anyone found a solution / patch, that would be a life saver :)

same error message on android, but it succeeded after I accepted camera and microphone permissions.

[VasantHugar]

Based off of this similar issue on a different package, I made a patch file for patch-package that seems to work.

react-native-twilio-video-webrtc+3.2.1.patch

I'll raise a PR as well.

This worked!

[VasantHugar]

Here's the Android Fix for the error Expected ref to be a function, an object returned by React.createRef(), or undefined/null

In file node_modules/react-native-twilio-video-webrtc/src/TwilioVideo.android.js Replace String Ref with React.createRef()

Here’s final code:

class CustomTwilioVideoView extends Component {
  constructor(props) {
    super(props);
    this.videoViewRef = React.createRef(); // Create a ref using React.createRef()
  }

  runCommand(event, args) {
    switch (Platform.OS) {
      case "android":
        if (this.videoViewRef.current) {
          UIManager.dispatchViewManagerCommand(
            findNodeHandle(this.videoViewRef.current),
            event,
            args
          );
        } else {
          console.error("VideoView ref is null");
        }
        break;
      default:
        break;
    }
  }

  render() {
    return (
      <NativeCustomTwilioVideoView
        ref={this.videoViewRef} // Assign the ref object
        {...this.props}
        {...this.buildNativeEventWrappers()}
      />
    );
  }
}

[WarraichUmer95]

Here's the Android Fix for the error Expected ref to be a function, an object returned by React.createRef(), or undefined/null

In file node_modules/react-native-twilio-video-webrtc/src/TwilioVideo.android.js Replace String Ref with React.createRef()

Here’s final code:

class CustomTwilioVideoView extends Component { constructor(props) { super(props); this.videoViewRef = React.createRef(); // Create a ref using React.createRef() }

runCommand(event, args) { switch (Platform.OS) { case "android": if (this.videoViewRef.current) { UIManager.dispatchViewManagerCommand( findNodeHandle(this.videoViewRef.current), event, args ); } else { console.error("VideoView ref is null"); } break; default: break; } }

render() { return ( <NativeCustomTwilioVideoView ref={this.videoViewRef} // Assign the ref object {...this.props} {...this.buildNativeEventWrappers()} /> ); } }

This works for Android perfectly.