React-native inside a Fragment

Question

How to Start react-native inside of a fragment? While putting react-native inside Fragment, onCreateView function is unable to return View from mReactRootView.

Answer 1

There are libraries available that handle this for you.

One that I use is react-native-android-fragment

As per the instructions on the linked GitHub repository:

1. Add the following line to your build.gradle compile 'com.github.hudl:react-native-android-fragment:v0.43.2'.

e.g.

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

dependencies {
  // Version will correspond to its dependnecy on React Native
  compile 'com.github.hudl:react-native-android-fragment:v0.43.2'
}

2. Build you react code into the fragment

   Fragment reactFragment = new ReactFragment.Builder() .setComponentName("HelloWorld") .setLaunchOptions(launchOptions) // A Bundle of launch options .build();

3. Place the Fragment in a FrameLayout that you would have in your XML layout file. In my case, the FrameLayout ID is react_holder.

   getSupportFragmentManager() .beginTransaction() .add(R.id.react_holder, reactFragment) .commit();