[Android] Crash: no view found for id 0x1f1 (unknown) for fragment ScreenFragment

Today, I attempted to update to the latest react-navigation, and I figured I would try to use react-native-screens to improve performance. Unfortunately, it crashes on Android immediately upon opening. I have followed all of the instalation instructions, and I can confirm that my code works fine if I a) do not call useScreens() and b) extend from ReactActivity instead in the code below.

The exception only shows up in adb logcat:

49:04.038 11335 11335 E AndroidRuntime: FATAL EXCEPTION: main
12-22 17:49:04.038 11335 11335 E AndroidRuntime: Process: com.zonderstudios.zonder, PID: 11335
12-22 17:49:04.038 11335 11335 E AndroidRuntime: java.lang.IllegalArgumentException: No view found for id 0x1f1 (unknown) for fragment ScreenFragment{c8216f5 #0 id=0x1f1}
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1422)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at android.support.v4.app.FragmentManagerImpl.addAddedFragments(FragmentManager.java:2617)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at android.support.v4.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2388)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at android.support.v4.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2344)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2245)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at android.support.v4.app.FragmentManagerImpl$1.run(FragmentManager.java:703)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:790)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:99)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:164)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at android.app.ActivityThread.main(ActivityThread.java:6494)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
12-22 17:49:04.038 11335 11335 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
12-22 17:49:04.040  1634  1644 W ActivityManager:   Force finishing activity com.zonderstudios.zonder/.MainActivity
12-22 17:49:04.047  1634  1649 I ActivityManager: Showing crash dialog for package com.zonderstudios.zonder u0

Here is my MainActivity.java.

package com.zonderstudios.zonder;
import android.os.Bundle;
import com.facebook.react.ReactFragmentActivity;
import org.devio.rn.splashscreen.SplashScreen;
import android.content.Intent;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactFragmentActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "zonder";
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this, false);
        setTheme(R.style.AppTheme);
        super.onCreate(savedInstanceState);
        // I also tried this, along with deleting the two lines for splash screen and set theme:
        // super.onCreate(null);
    }

    @Override
    protected void onPause() {
        SplashScreen.hide(this);
        super.onPause();
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                    return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

Any thoughts on fixing this? My one thought might be that there is a conflict with something else. Not sure, though.

[TikiTDO]

This issue is happening because this library is not using Fragments correctly.

The issue happens when a ScreenContainer is unmounted. When this happens it tries to disconnect all the Screen instances here, which calls into here.

However, it appears the expectation in android is that these sort of operations should be handled through the FragmentManager which will clear a bunch of private instance variables, most importantly this one.

If the ScreenContainer is removed from the view hierarchy and that id is not cleared, then the next time the FragmentManager tries to do something with that Fragment it will attempt to find the container in the view hierarchy, which will fail and cause the above exception.

[thomasw]

Here’s a minimal reproduction:

import React, { PureComponent } from 'react'
import { View } from 'react-native'
import { useScreens } from 'react-native-screens'
import {
  createSwitchNavigator, createStackNavigator, createAppContainer
} from 'react-navigation'

useScreens()

function SomeLoginScreen() {
  return <View style={{ backgroundColor: 'blue', flex: 1 }} />
}

function SomeAppScreen() {
  return <View style={{ backgroundColor: 'red', flex: 1 }} />
}

const LoginStack = createStackNavigator({
  Form: SomeLoginScreen
})

const AppStack = createStackNavigator({
  Home: SomeAppScreen
})


const Navigator = createSwitchNavigator({
  Login: LoginStack,
  App: AppStack
})

class App extends PureComponent {
  static router = Navigator.router

  componentDidMount() {
    // Crash:
    this.props.navigation.navigate({ routeName: "App" })

    // Does not crash
    // setTimeout(() => this.props.navigation.navigate({ routeName: "App" }), 0)
  }


  render() {
    return  <Navigator {...this.props} />
  }
}

export default createAppContainer(App)

I suspect that there may be multiple ways of triggering this crash, but the code above seems to cover the Switch navigator case specifically.