AssertionError: this root view is already bound to the catalyst instance manager

Question

I have my own Android app that has fragments inflated with React Native views.

When one of the React Native fragments is added to the backstack and then the backstack returns to the React Native fragment, I get the following error:

E/AndroidRuntime: FATAL EXCEPTION: main
java.lang.AssertionError: This root view has already been attached to a catalyst instance manager
    at com.facebook.infer.annotation.Assertions.assertCondition(Assertions.java:65)
    at com.facebook.react.ReactRootView.startReactApplication(ReactRootView.java:207)
    at com.vb.easternunion.fragments.ReactFragment.onActivityCreated(ReactFragment.java:52)
    at android.support.v4.app.Fragment.performActivityCreated(Fragment.java:2096)
    at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1138)
    at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1295)
    at android.support.v4.app.BackStackRecord.popFromBackStack(BackStackRecord.java:1038)
    at android.support.v4.app.FragmentManagerImpl.popBackStackState(FragmentManager.java:1742)
    at android.support.v4.app.FragmentManagerImpl$2.run(FragmentManager.java:601)
    at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1682)
    at android.support.v4.app.FragmentManagerImpl$1.run(FragmentManager.java:541)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:5417)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

Does anyone know why I am getting this root view error that is already connected, or how can I reuse the same root mode?

My React Fragment looks like this:

public class ReactFragment extends Fragment {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    private MainActivity main;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);

        main = (MainActivity) getActivity();

        mReactRootView = new ReactRootView(context);
        mReactInstanceManager =
                ((AppManager) getActivity().getApplication())
                        .getReactNativeHost()
                        .getReactInstanceManager();

    }

    @Override
    public ReactRootView onCreateView(LayoutInflater inflater, ViewGroup group, Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        return mReactRootView;
    }


    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        mReactRootView.startReactApplication(
                mReactInstanceManager,
                "AndroidApp",
                getLaunchOptions()
        );

    }

    protected
    @Nullable
    Bundle getLaunchOptions() {
        return AppManager.getReactBundle();
    }



    @Override
    public void onDestroyView() {
        super.onDestroyView();
        mReactRootView.unmountReactApplication();
    }

}

Answer 1

Perhaps you are using your snippet in the pager view.

Move your view definition to onCreateView

@Override
public ReactRootView onCreateView(LayoutInflater inflater, ViewGroup group, Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(getActivity());
    return mReactRootView;
}

, ReactFragment -

@Override
public void onDetach() {
    super.onDetach();
    mReactRootView.unmountReactApplication();
}