ReactRootView in Native Layout renders 0 height on 2nd launch

Question

I am building a hybrid ReactNative app, an am launching a custom ReactNativeActivity with the ReactRootView added to a native layout.

This works fine the first time I launch the activity (see first screenshot), but the second time I launch the activity (after hitting the back button to destroy the activity), the ReactRootView appears to have a height of about 10 pixels.

Why is this? What can I do to cause the render to have the correct height the second time?

Here's the code from my custom ReactNativeActivity:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Bundle properties = new Bundle();
    Intent intent = this.getIntent();
    if (intent != null) {
        properties = intent.getExtras();
    }
    mReactRootView = new ReactRootView(this);
    mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
    mReactRootView.startReactApplication(mReactInstanceManager, "CommutybleMobile", properties);
    setContentView(R.layout.layout_react);
    LinearLayout mainLayout = findViewById(R.id.overallLayout);
    mainLayout.addView(mReactRootView);    
 }

Here's my layout:

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:gravity="start"
     android:id="@+id/overallLayout"
     android:orientation="vertical">
 </LinearLayout>

Render after first activity launch:

Render after hitting back and second activity launch:

score 0 · Accepted Answer · answered Nov 30 '18 at 15:27

I'm pretty sure this is not the best answer, but I did manage to fix this by adding the following hack:

// Directly adding the react root view here (then changing to an embedded view) fixes a
// problem where the root view did not fill the space in the layout
setContentView(mReactRootView);
setContentView(R.layout.layout_react);
LinearLayout mainLayout = findViewById(R.id.mainLayout);
mainLayout.addView(mReactRootView);

By first setting the content view to be entire ReactRootView, it appears to force a layout at full screen height. So when it is then added later on to the mainLayout, it is already inflated at a reasonable height.

I did see some mention of this issue here and some solutions were offered here, but they were more complex than my hack above, and seemed to be almost as kludgy.

If anybody has a better answer to this, I'd love to hear it.

ReactRootView in Native Layout renders 0 height on 2nd launch

1 Answers1

Linked