AssertionError: This root view has already been attached to a catalyst instance manager

Question

I have a native Android app that has some fragments inflated with React Native views.

When one of the React Native fragments are added to the backstack and then the backstack gets popped back 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)

Anyone know why I'm getting this error of root view already being attached or how I can reuse the same root view?

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

Probably your are using your fragment in a view pager.

Move the definition of your view in the onCreateView

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

and remember to unmount other instances by adding in your ReactFragment something like

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