How can I add one kind of React Native to an existing Android application?

Question

I am working on a large existing Android and iOs project, and my team would like to accept the reaction in their native language. First, we would like to implement a single function in RN, since we do not have the ability to transfer the entire project in one go.

I managed to add the RN view successfully, both from the local node server and from the JS package file located in the resource folder, but it is a bit hacked. I know this is supported on iOS, but I could not find anything in the documentation regarding integration with an existing Android project. Here's the gist of what I came up with:

public class ReactNativeView extends FrameLayout { private static final String COMPONENT_NAME = "AwesomeProject"; // Path of our RN module relative to project root private static final String MODULE_NAME = "react-sources/index.android" public ReactNativeView(Context Context) { super(context); } @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); ReactInstanceManager.Builder builder = ReactInstanceManager.builder() .setApplication(AppDelegate.sharedApplication()) .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.BEFORE_RESUME); if (BuildConfig.USE_RN_LOCAL_SERVER) { // Set module name to be loaded from local node server builder.setJSMainModuleName(MODULE_NAME); } else { Uri uri = AssetsManager.getInstance().getJsBundleUri(); // Load bundled jsBundle builder.setJSBundleFile(uri.getPath()); } ReactInstanceManager reactInstanceManager = builder.build(); MainActivity mainActivity = MainActivity.getMainActivity(); setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); ReactRootView reactRootView = new ReactRootView(AppDelegate.sharedApplication().getTopActivity()); // Is it really necessary to call 'startReactApplication' each time we want to render a react component? reactRootView.startReactApplication(reactInstanceManager, COMPONENT_NAME, null); addView(reactRootView); // After the view is added to the hierarchy we call the manager 'onResume' function // to show the react view reactInstanceManager.onResume(mainActivity, mainActivity); // <-- What kind of sorcery is this?! } } 

And I also added a variable to BuildConfig that determines which JS package to use:

 buildTypes { debug { buildConfigField "boolean", "USE_RN_LOCAL_SERVER", "true" // load from local server } release { minifyEnabled true proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' buildConfigField "boolean", "USE_RN_LOCAL_SERVER", "false" } } 

This is a complete hack. Calling startReactApplication when what I'm actually doing, just adding a view to the screen seems awkward. Am I missing an API or is this a script not yet supported?

Answer 1

Have you checked the RN white paper on this?

It shows you how to clear the RN representation inside a Java-encoded Java application.

Answer 2

Thus, it is obvious that calling startReactApplication is really the right way. If someone is interested in a more complete and organized solution, you can take a look at react-native-navigation .