1

I have created a react-native application, which on a button press will load an Android Native Module. When called, the native module will start an Android activity which makes use of the Presentation class (along with https://github.com/commonsguy/cwac-presentation) to control a 2nd monitor display (chromecast, miracast, etc). I have got this all working great.

The next stage was to use the native module to display a react-native view onto the 2nd monitor, and I was able to achieve this using ReactRootView and ReactInstanceManager (https://facebook.github.io/react-native/docs/integration-with-existing-apps). The Android native module loads the react-native view from the root react-native application.

mReactRootView = new ReactRootView(activity);
mReactInstanceManager = ReactInstanceManager.builder().setApplication(activity.getApplication())
                .setCurrentActivity(activity).setBundleAssetName("index.android.bundle").setJSMainModulePath("index")
                .addPackage(new MainReactPackage()).setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED).build();

group.addView(mReactRootView);
mReactRootView.startReactApplication(mReactInstanceManager, "JsPresentationView", getLaunchOptions());

(Where "JsPresentationView" is the name of the react-native view to be displayed)

While the react-native view is displayed on the Presentation screen, there is an Android view displayed on the mobile screen. This uses RCTDeviceEventEmitter to send events to the react-native timer. E.G. to play/pause the timer view:

ReactInstanceManager displayInstanceManager = reactFragmentPresentation.getInstanceManager();

ReactContext displayContext = displayInstanceManager.getCurrentReactContext();

displayContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("TogglePlayback",
                    displayParams);

(Where 'TogglePlayback' is the name of the event to be fired to react-native view)

The issue I have found is trying to access react-native libraries, imported to the root react-native application, from the react-native view loaded by ReactRootView. I can access the main react-native library for the main react-native functionality, but any other import is always returned as null. For example, I am trying to use 'react-native-audio-toolkit' to play music through the react-native view on the 2nd screen display.

import { Player } from "react-native-audio-toolkit";

Throws this error: react-native error screen. As the react-native view had access to the main react-native library, I was beginning to think that these issues are being caused by my build.gradle in my native-module:

buildscript {
    repositories {
        jcenter()
        google()
        maven {
            url "http://repo.commonsware.com"
        }
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

apply plugin: 'com.android.library'

android {
    compileSdkVersion 28

    buildToolsVersion "28.0.3"

    defaultConfig {
        minSdkVersion 23
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
    }
    lintOptions {
        abortOnError false
    }
    compileOptions {
        targetCompatibility JavaVersion.VERSION_1_8
        sourceCompatibility JavaVersion.VERSION_1_8
    }
}


repositories {
    mavenCentral()
    google()
    jcenter()
    maven {
        url "http://repo.commonsware.com"
    }
    maven {
        url "$rootDir/../example/node_modules/react-native/android"
    }
    maven {
        url "$rootDir/../example/node_modules/react-native-audio-toolkit/android"
    }
    maven {
        url 'https://maven.google.com/'
        name 'Google'
    }
}

dependencies {
    implementation 'com.facebook.react:react-native:+'
    implementation 'com.commonsware.cwac:layouts:0.4.4'
    implementation 'com.commonsware.cwac:presentation:0.5.3'
    implementation 'com.google.android.exoplayer:exoplayer-core:2.9.0'
    implementation fileTree(dir: "libs", include: ["*.jar"])
}

allprojects {
    repositories {
        maven {
            url "$rootDir/../example/node_modules/react-native/android"
        }
        maven {
            url "$rootDir/../example/node_modules/react-native-audio-toolkit/android"
        }
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
}
subprojects {
    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion 28
                buildToolsVersion "28.0.3"
            }
        }
    }
}

(Example directory above is the location of the react-native application which will import the native-module from the $rootDir)

I tried many different updates to the build.gradle to include the react-native-audio-toolkit library, but I am unsure if this is the real root of the issue. Does anyone know if I am missing anything from the build.gradle above to forward the react-native libraries to the presented react-native view? Or if what I am trying to achieve is even possible?

I believe I could get round the issue by separating the react-native presentation view into its own react-native project - but I would like to keep this in the same project if possible.

0 Answers0