Refactored react-native tutorial

openvidu-react-native/App.js

@@ -1,11 +1,3 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
 import React, { Component } from 'react';
 import {
     Platform,
@@ -20,11 +12,10 @@ import {
     Image,
     PermissionsAndroid,
 } from 'react-native';
-
-import { OpenVidu } from 'openvidu-browser';
-import { RTCView } from './node_modules/openvidu-browser/node_modules/react-native-webrtc';
 import axios from 'axios';
 
+import { OpenViduReactNativeAdapter, OpenVidu, RTCView, StreamManager } from 'openvidu-react-native-adapter';
+
 const OPENVIDU_SERVER_URL = 'https://demos.openvidu.io';
 const OPENVIDU_SERVER_SECRET = 'MY_SECRET';
 
@@ -34,8 +25,11 @@ export default class App extends Component<Props> {
     constructor(props) {
         super(props);
 
+        const openViduReact = new OpenViduReactNativeAdapter();
+        openViduReact.initialize();
+
         this.state = {
-            mySessionId: 'SessionA',
+            mySessionId: 'testReact',
             myUserName: 'Participant' + Math.floor(Math.random() * 100),
             session: undefined,
             mainStreamManager: undefined,
@@ -48,10 +42,12 @@ export default class App extends Component<Props> {
         };
     }
 
-    componentDidMount() {}
+    componentDidMount() {
+       //this.joinSession();
+    }
 
     componentWillUnmount() {
-        //this.leaveSession();
+        this.leaveSession();
     }
 
     async checkAndroidPermissions() {
@@ -113,13 +109,11 @@ export default class App extends Component<Props> {
                 // --- 3) Specify the actions when events take place in the session ---
 
                 // On every new Stream received...
-                mySession.on('streamCreated', (event) => {
+                mySession.on('streamCreated', async (event) => {
                     // Subscribe to the Stream to receive it. Second parameter is undefined
                     // so OpenVidu doesn't create an HTML video by its own
-                    const subscriber = mySession.subscribe(event.stream, undefined);
+                    const subscriber = await mySession.subscribeAsync(event.stream, undefined);
-
+                    var subscribers = Array.from(this.state.subscribers);
-                    var subscribers = this.state.subscribers;
-
                     subscribers.push(subscriber);
                     // Update the state with the new subscribers
                     this.setState({
@@ -131,7 +125,7 @@ export default class App extends Component<Props> {
                 mySession.on('streamDestroyed', (event) => {
                     event.preventDefault();
                     // Remove the stream from 'subscribers' array
-                    this.deleteSubscriber(event.stream.streamManager);
+                    this.deleteSubscriber(event.stream);
                 });
 
                 // --- 4) Connect to the session with a valid user token ---
@@ -190,17 +184,15 @@ export default class App extends Component<Props> {
         return '';
     }
 
-    deleteSubscriber(streamManager) {
+    deleteSubscriber(stream) {
-        setTimeout(() => {
+        var subscribers = Array.from(this.state.subscribers);
-            let subscribers = this.state.subscribers;
+        const index = subscribers.indexOf(stream.streamManager, 0);
-            const index = subscribers.indexOf(streamManager, 0);
+        if (index > -1) {
-            if (index > -1) {
+            subscribers.splice(index, 1);
-                subscribers.splice(index, 1);
+            this.setState({
-                this.setState({
+                subscribers: subscribers,
-                    subscribers: subscribers,
+            });
-                });
+        }
-            }
-        });
     }
 
     leaveSession() {
@@ -367,23 +359,17 @@ export default class App extends Component<Props> {
 
                 <View style={[styles.container, { flexDirection: 'row', flexWrap: 'wrap' }]}>
                     {this.state.subscribers.map((item, index) => {
-                        if (!!item) {
+                        return(
-                            return (
+                            <View key={index}>
-                                <View key={index}>
+                                <Text>{this.getNicknameTag(item.stream)}</Text>
-                                    <Text>{this.getNicknameTag(item.stream)}</Text>
+                                <RTCView
-                                    <RTCView
+                                    zOrder={0}
-                                        zOrder={0}
+                                    objectFit="cover"
-                                        objectFit="cover"
+                                    style={styles.remoteView}
-                                        style={styles.remoteView}
+                                    streamURL={item.stream.getMediaStream().toURL()}
-                                        ref={(rtcVideo) => {
+                                />
-                                            if (!!rtcVideo) {
+                            </View>
-                                                item.addVideoElement(rtcVideo);
+                        );
-                                            }
-                                        }}
-                                    />
-                                </View>
-                            );
-                        }
                     })}
                 </View>
             </ScrollView>

openvidu-react-native/android/app/build.gradle

@@ -178,12 +178,10 @@ android {
     }
 
     packagingOptions {
-        pickFirst '**/armeabi-v7a/libc++_shared.so'
+        pickFirst "lib/armeabi-v7a/libc++_shared.so"
-        pickFirst '**/x86/libc++_shared.so'
+        pickFirst "lib/arm64-v8a/libc++_shared.so"
-        pickFirst '**/arm64-v8a/libc++_shared.so'
+        pickFirst "lib/x86/libc++_shared.so"
-        pickFirst '**/x86_64/libc++_shared.so'
+        pickFirst "lib/x86_64/libc++_shared.so"
-        pickFirst '**/x86/libjsc.so'
-        pickFirst '**/armeabi-v7a/libjsc.so'
     }
 }
 
@@ -191,9 +189,10 @@ dependencies {
     implementation project(':WebRTCModule')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.facebook.react:react-native:+"  // From node_modules
+    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
 
     if (enableHermes) {
-      def hermesPath = "../../node_modules/hermesvm/android/";
+        def hermesPath = "../../node_modules/hermes-engine/android/";
       debugImplementation files(hermesPath + "hermes-debug.aar")
       releaseImplementation files(hermesPath + "hermes-release.aar")
     } else {

openvidu-react-native/android/app/src/main/AndroidManifest.xml

@@ -22,7 +22,8 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+        android:launchMode="singleTask"
         android:windowSoftInputMode="adjustResize">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

openvidu-react-native/android/app/src/main/java/com/openvidu_react_native/MainApplication.java

@@ -1,11 +1,9 @@
 package com.openvidu_react_native;
 
 import android.app.Application;
-import android.util.Log;
 
 import com.facebook.react.PackageList;
-import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
+
-import com.facebook.react.bridge.JavaScriptExecutorFactory;
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

openvidu-react-native/android/build.gradle

@@ -3,17 +3,16 @@
 buildscript {
     ext {
         buildToolsVersion = "28.0.3"
-        minSdkVersion = 16
+        minSdkVersion = 24
         compileSdkVersion = 28
         targetSdkVersion = 28
-        supportLibVersion = "28.0.0"
     }
     repositories {
         google()
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.4.1")
+        classpath("com.android.tools.build:gradle:3.5.2")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -34,5 +33,6 @@ allprojects {
 
         google()
         jcenter()
+        maven { url 'https://www.jitpack.io' }
     }
 }

openvidu-react-native/android/gradle.properties

@@ -17,5 +17,9 @@
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
 android.enableJetifier=true

openvidu-react-native/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

openvidu-react-native/android/gradlew

@@ -126,7 +126,7 @@ if $darwin; then
 fi
 
 # For Cygwin, switch paths to Windows format before running java
-if $cygwin ; then
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
     JAVACMD=`cygpath --unix "$JAVACMD"`

openvidu-react-native/android/gradlew.bat

@@ -5,7 +5,7 @@
 @rem you may not use this file except in compliance with the License.
 @rem You may obtain a copy of the License at
 @rem
-@rem      http://www.apache.org/licenses/LICENSE-2.0
+@rem      https://www.apache.org/licenses/LICENSE-2.0
 @rem
 @rem Unless required by applicable law or agreed to in writing, software
 @rem distributed under the License is distributed on an "AS IS" BASIS,
@@ -97,4 +97,4 @@ exit /b 1
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal
 
-:omega
+:omega

openvidu-react-native/android/settings.gradle

@@ -1,4 +1,4 @@
 rootProject.name = 'openvidu_react_native'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':WebRTCModule', ':app'
-project(':WebRTCModule').projectDir = new File(rootProject.projectDir, '../node_modules/openvidu-browser/node_modules/react-native-webrtc/android')
+project(':WebRTCModule').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')

openvidu-react-native/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "axios": "0.19.2",
-    "openvidu-browser": "2.14.0",
+    "openvidu-react-native-adapter": "file:openvidu-react-native-adapter-2.14.0.tgz",
     "react": "16.13.1",
     "react-native": "0.62.2"
   },