Dynamically compiling and running a react-native app inside another

I only know 2 ways to do that but neither is exactly what you are asking for.

1 - Make all Apps in React Native and put all inside. Then, depending to the server, you will show X apps.

2 - Using Linking from React-Native. I have created an app that 1 of the features is to link it with another app I created. When I click the button it tries to open it if the app is installed in the device, else, the app store / google play will be opened showing the app to download.

That's the way to use Linking: https://facebook.github.io/react-native/docs/linking

I know that it isn't what you are asking for but I don't think that what you are asking would be possible at all.


This is possible partially via CodePush:

  • Create multiple CodePush environments for different apps. (APP1 APP2 etc)
  • When you boot up your app, make an API call to fetch app list and corresponding code push deployment key.
  • on button click codepush.sync(deployment_key) → restart app and then jump directly to your app (maybe store the app name in AsyncStorage and jump directly to it via navigation)

However, the caveat might be a dealbreaker:

  • your app will be reloaded after selecting the app
  • major react version upgrade(native java/oc changes) would require store release as it can't be handled over JS (might not be dealbreaker)

There is also a better way:

  • create one single container app and one CodePush environment
  • have a central configuration like [{app:"A1", version: 2.0.0}, {app: "A2", version: 1.2.0}]
  • all other apps A1, A2, A3 expose objects which can be exposed as plugin to container app.
  • Your CI handles building the app dynamically form the multiple repository (or better - multiple npm packages generated by different repos) and pushes the JS to CodePush server.
  • it adds all apps from the configuration (bash script to yarn add A1, yarn add a2, yarn add a3) to the container,
  • your app reads the configuration and loads the A1 A2 etc.
  • CD creates new CodePush releases.

This is repeated whenever the central configuration changes (say after A1 publishes npm package they update the central configuration).

It solves the problem of restart as you've all bundles build in to one.

CodePush: https://learn.microsoft.com/en-us/appcenter/distribution/codepush/react-native#dynamic-deployment-assignment

Or go you might want to through expo's code https://github.com/expo/expo/blob/d56076241cef55b0a93a5c0bb8dc690270e42dcb/home/screens/QRCodeScreen.android.js#L89