React Native and JUCE: Part 3 — adding a custom view

We need to create a basic React Native app in which to show our Component as a custom view.

Barebones React Native app

This is a suggested folder structure, based on the RNN example app. Under ReactNative create both index.ios.js and index.android.js. In both those files put:

import App from './Source/App';
const app = new App();

Create a Source folder under ReactNative. Copy the following code into Source/App.js:

All being well we should now be able to fire up both Xcode and Android Studio, build and run our app and see it running on both platforms.

Now its time to bring our JUCE app into the picture. Since we’ve prepared the custom views already, we can now use our ReactJuceView component: