title: Can a ReactRootView be nested (android)
body: <p>I have an android application built already that I would like to use React Native in.  It's a large application and I don't want to migrate everything at once.  For example, my toolbar code is a bit complex and I'd like to leave it native for now.  So my layout looks something like this:</p>
  
  <pre><code>&lt;RelativeLayout
      android:id="@+id/relative_layout"
      android:background="@color/background_color"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"&gt;
  
      &lt;android.support.v7.widget.Toolbar
          android:id="@+id/action_bar"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentTop="true"/&gt;
  
      &lt;com.facebook.react.ReactRootView
          android:id="@+id/react_root"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/&gt;
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>And in onCreate() instead of creating a new ReactRootView I'm doing this:</p>
  
  <pre><code>mReactRootView = (ReactRootView) findViewById(R.id.react_root);
  ... // Other init
  setContentView(mReactRootView);
  </code></pre>
  
  <p>However, I'm getting an error on setContentView(mReactRootView):</p>
  
  <pre><code>java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
  </code></pre>
  
  <p>This leads me to believe I cannot nest a React<strong>Root</strong>View inside other views.  How would I go about keeping my current Toolbar implementation, but still using React Native for the rest of the page?  I know this exists: <a href="https://facebook.github.io/react-native/docs/native-components-android.html" rel="nofollow">https://facebook.github.io/react-native/docs/native-components-android.html</a>  Is bridging to the native component my only option?</p>
  
  <p><strong>Edit</strong>: Followed Konstantin's suggestion below and here is what I have:</p>
  
  <p>ReactFragment.java</p>
  
  <pre><code>public class ReactFragment extends Fragment implements DefaultHardwareBackBtnHandler {
      ViewGroup group = (ViewGroup) inflater.inflate(R.layout.react_fragment, container, false);
      activity = getActivity();
  
      mReactRootView = new ReactRootView(activity);
      mReactInstanceManager = ReactInstanceManager.builder()
              .setApplication(activity.getApplication())
              .setBundleAssetName("index.bundle")
              .setJSMainModuleName("index")
              .addPackage(new MainReactPackage())
              .setUseDeveloperSupport(true)
              .setInitialLifecycleState(LifecycleState.RESUMED)
              .build();
  
      group.addView(mReactRootView);
      mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);
      mReactInstanceManager.onHostResume(activity, this);
      return group;
  }
  // onPause() onDestroy() etc.
  </code></pre>
  
  <p>react_fragment.xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/react_root"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  &lt;/FrameLayout&gt;
  </code></pre>
  
  <p>Added to main_content.xml</p>
  
  <pre><code>...
  &lt;fragment
      android:name="com.amazon.kindlestore.main.ReactFragment"
      android:id="@+id/react_frag"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"/&gt;
  ...
  </code></pre>
  
  <p>And in my main activity I'm adding the Fragment like this:</p>
  
  <pre><code>ReactFragment reactFragment = (ReactFragment) getFragmentManager().findFragmentById(R.id.react_frag);
  FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
  fragmentTransaction.add(R.id.react_frag, reactFragment);
  fragmentTransaction.commit();
  </code></pre>
  
  <p>This seems to be working, I have my react components rendering below my native Toolbar</p>