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

[itz-Me-Pj]

Update the documentation as per new react native architecture 0.79+. And resolve the ref bug for new react native architecture. I am facing this issue while integration of twilio video in my react native application.

[ketul54]

update TwilioVideo.android.js

/**

• Component to orchestrate the Twilio Video connection and the various video
• views.
• Authors:
• Ralph Pina slycoder@gmail.com
• Jonathan Chang slycoder@gmail.com
  */

import {
Platform,
UIManager,
View,
findNodeHandle,
requireNativeComponent,
} from "react-native";
import React, { Component } from "react";
import PropTypes from "prop-types";

const propTypes = {
...View.propTypes,
onCameraSwitched: PropTypes.func,
onVideoChanged: PropTypes.func,
onAudioChanged: PropTypes.func,
onRoomDidConnect: PropTypes.func,
onRoomDidFailToConnect: PropTypes.func,
onRoomDidDisconnect: PropTypes.func,
onParticipantAddedDataTrack: PropTypes.func,
onParticipantRemovedDataTrack: PropTypes.func,
onDataTrackMessageReceived: PropTypes.func,
onParticipantAddedVideoTrack: PropTypes.func,
onParticipantRemovedVideoTrack: PropTypes.func,
onParticipantAddedAudioTrack: PropTypes.func,
onParticipantRemovedAudioTrack: PropTypes.func,
onRoomParticipantDidConnect: PropTypes.func,
onRoomParticipantDidDisconnect: PropTypes.func,
onParticipantEnabledVideoTrack: PropTypes.func,
onParticipantDisabledVideoTrack: PropTypes.func,
onParticipantEnabledAudioTrack: PropTypes.func,
onParticipantDisabledAudioTrack: PropTypes.func,
onStatsReceived: PropTypes.func,
onNetworkQualityLevelsChanged: PropTypes.func,
onDominantSpeakerDidChange: PropTypes.func,
onLocalParticipantSupportedCodecs: PropTypes.func,
};

const nativeEvents = {
connectToRoom: 1,
disconnect: 2,
switchCamera: 3,
toggleVideo: 4,
toggleSound: 5,
getStats: 6,
disableOpenSLES: 7,
toggleSoundSetup: 8,
toggleRemoteSound: 9,
releaseResource: 10,
toggleBluetoothHeadset: 11,
sendString: 12,
publishVideo: 13,
publishAudio: 14,
setRemoteAudioPlayback: 15,
};

class CustomTwilioVideoView extends Component {
constructor(props) {
super(props);
this.videoViewRef = React.createRef();
}

connect({
roomName,
accessToken,
cameraType = "front",
enableAudio = true,
enableVideo = true,
enableRemoteAudio = true,
enableNetworkQualityReporting = false,
dominantSpeakerEnabled = false,
maintainVideoTrackInBackground = false,
encodingParameters = {},
}) {
this.runCommand(nativeEvents.connectToRoom, [
roomName,
accessToken,
enableAudio,
enableVideo,
enableRemoteAudio,
enableNetworkQualityReporting,
dominantSpeakerEnabled,
maintainVideoTrackInBackground,
cameraType,
encodingParameters,
]);
}

sendString(message) {
this.runCommand(nativeEvents.sendString, [message]);
}

publishLocalAudio() {
this.runCommand(nativeEvents.publishAudio, [true]);
}

publishLocalVideo() {
this.runCommand(nativeEvents.publishVideo, [true]);
}

unpublishLocalAudio() {
this.runCommand(nativeEvents.publishAudio, [false]);
}

unpublishLocalVideo() {
this.runCommand(nativeEvents.publishVideo, [false]);
}

disconnect() {
this.runCommand(nativeEvents.disconnect, []);
}

componentWillUnmount() {
this.runCommand(nativeEvents.releaseResource, []);
}

flipCamera() {
this.runCommand(nativeEvents.switchCamera, []);
}

setLocalVideoEnabled(enabled) {
this.runCommand(nativeEvents.toggleVideo, [enabled]);
return Promise.resolve(enabled);
}

setLocalAudioEnabled(enabled) {
this.runCommand(nativeEvents.toggleSound, [enabled]);
return Promise.resolve(enabled);
}

setRemoteAudioEnabled(enabled) {
this.runCommand(nativeEvents.toggleRemoteSound, [enabled]);
return Promise.resolve(enabled);
}

setBluetoothHeadsetConnected(enabled) {
this.runCommand(nativeEvents.toggleBluetoothHeadset, [enabled]);
return Promise.resolve(enabled);
}

setRemoteAudioPlayback({ participantSid, enabled }) {
this.runCommand(nativeEvents.setRemoteAudioPlayback, [
participantSid,
enabled,
]);
}

getStats() {
this.runCommand(nativeEvents.getStats, []);
}

disableOpenSLES() {
this.runCommand(nativeEvents.disableOpenSLES, []);
}

toggleSoundSetup(speaker) {
this.runCommand(nativeEvents.toggleSoundSetup, [speaker]);
}

runCommand(event, args) {
if (Platform.OS === "android" && this.videoViewRef.current) {
UIManager.dispatchViewManagerCommand(
findNodeHandle(this.videoViewRef.current),
event,
args
);
}
}

buildNativeEventWrappers() {
return [
"onCameraSwitched",
"onVideoChanged",
"onAudioChanged",
"onRoomDidConnect",
"onRoomDidFailToConnect",
"onRoomDidDisconnect",
"onParticipantAddedDataTrack",
"onParticipantRemovedDataTrack",
"onDataTrackMessageReceived",
"onParticipantAddedVideoTrack",
"onParticipantRemovedVideoTrack",
"onParticipantAddedAudioTrack",
"onParticipantRemovedAudioTrack",
"onRoomParticipantDidConnect",
"onRoomParticipantDidDisconnect",
"onParticipantEnabledVideoTrack",
"onParticipantDisabledVideoTrack",
"onParticipantEnabledAudioTrack",
"onParticipantDisabledAudioTrack",
"onStatsReceived",
"onNetworkQualityLevelsChanged",
"onDominantSpeakerDidChange",
"onLocalParticipantSupportedCodecs",
].reduce((wrappedEvents, eventName) => {
if (this.props[eventName]) {
return {
...wrappedEvents,
[eventName]: (data) => this.propseventName,
};
}
return wrappedEvents;
}, {});
}

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

CustomTwilioVideoView.propTypes = propTypes;

const NativeCustomTwilioVideoView = requireNativeComponent("RNCustomTwilioVideoView");

module.exports = CustomTwilioVideoView;

[ilialezhnev]

For RN 0.80.1 I have also added

...
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
...

and replace

...View.propTypes,

to

...ViewPropTypes,

[ilialezhnev]

and one more improvement

          [eventName]: (event) => {
            if (this.props[eventName]) {
              this.props[eventName](event.nativeEvent || event);
            }
          },

[itz-Me-Pj]

Hi guys, I only incorporated the changes that were breaking the library. I could incorporate your changes in the PR as well during the weekend but the concern is that will they ever get merged.
CC: @slycoder

[David-Val03]

I just incorporated your changes locally and it works, thanks a lot you saved me so much trouble