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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.