Load react native components dynamically from a url

Question

Is it possible to use load and cache remote react native components on the fly in react native?

We want to be able to build and deploy parts of the UI coupled with their respective back-end microservices so that we can configure what clients use what component/back-end combo centrally.

Answer 1

Open your ios project in xcode, and check out AppDelegate.m.

NSURL *jsCodeLocation;
#ifdef DEBUG
    /**
     * Loading JavaScript code - uncomment the one you want.
     *
     * OPTION 1
     * Load from development server. Start the server from the repository root:
     *
     * $ npm start
     *
     * To run on device, change `localhost` to the IP address of your computer
     * (you can get this by typing `ifconfig` into the terminal and selecting the
     * `inet` value under `en0:`) and make sure your computer and iOS device are
     * on the same Wi-Fi network.
     */
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/compiled/src/index.ios.bundle?platform=ios&dev=true"];
  #else
    /**
     * OPTION 2
     * Load from pre-bundled file on disk. The static bundle is automatically
     * generated by the "Bundle React Native code and images" build step when
     * running the project on an actual device or running the project on the
     * simulator in the "Release" build configuration.
     */
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  #endif

As you see, it already supports loading the bundle either remotely and locally. Loading it remotely is definitely not recommended in production for performance reasons.

You can check out tools like www.apphub.io and CodePush . They help you push out updates dynamically.

Although none of the alternatives solves the problem asked here: How to load single components dynamically. As you are free to load and evaluate resources remotely in JS, and only need to return valid JSX that uses valid react native components, it is definitely not impossible!