Twilio android ref fix

README.md

@@ -168,7 +168,7 @@ dependencies {
     .....
     .....
     .....
-    implementation project(':react-native-twilio-video-webrtc')
+    implementation(project(':react-native-twilio-video-webrtc'))
 }
 ```
 
@@ -177,8 +177,8 @@ You will also need to update this file so that you compile with java 8 features:
 ```
 android {
     compileOptions {
-        sourceCompatibility 1.8
-        targetCompatibility 1.8
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
     }
 }
 ```
@@ -200,6 +200,25 @@ Then update the `getPackages()` method:
     }
 ```
 
+If your React Native project uses Kotlin for the `MainApplication`, follow these steps to manually add the `TwilioPackage`.
+
+
+At the top of your `MainApplication.kt` file, add:
+
+```kotlin
+import com.twiliorn.library.TwilioPackage
+```
+Now update the `getPackages()` method by adding:
+```kotlin
+override val reactNativeHost: ReactNativeHost =
+      object : DefaultReactNativeHost(this) {
+        override fun getPackages(): List<ReactPackage> =
+            PackageList(this).packages.apply {
+              ...
+              add(TwilioPackage())
+            }
+```
+
 ### Permissions
 
 For most applications, you'll want to add camera and audio permissions to your `AndroidManifest.xml` file:

src/TwilioVideo.android.js

@@ -170,6 +170,12 @@ const nativeEvents = {
 };
 
 class CustomTwilioVideoView extends Component {
+  constructor(props) {
+    super(props);
+    // Use createRef instead of string ref to fix warning
+    this.videoViewRef = React.createRef();
+  }
+
   connect({
     roomName,
     accessToken,
@@ -271,7 +277,7 @@ class CustomTwilioVideoView extends Component {
     switch (Platform.OS) {
       case "android":
         UIManager.dispatchViewManagerCommand(
-          findNodeHandle(this.refs.videoView),
+          findNodeHandle(this.videoViewRef.current),
           event,
           args
         );
@@ -320,7 +326,7 @@ class CustomTwilioVideoView extends Component {
   render() {
     return (
       <NativeCustomTwilioVideoView
-        ref="videoView"
+        ref={this.videoViewRef}
         {...this.props}
         {...this.buildNativeEventWrappers()}
       />