React-native-navigation: [v2] Reload results in multiple remounts during initialization

[stevelacy]

Issue Description

I am getting a very odd behavior where on reload (rr on Android) my app would mount several times, while running a hard react-native run-android would start the app correctly.
It prevents my second level components from correctly receiving the parent's props as the multiple reloads causes empty props to be passed through while it was mounting.

# This is the result of reloading once:

ReactNativeJS: Running application "navigation.playground.TopTabOptionsScreen" with appParams: {"initialProps":{"componentId":"Component4"},"rootTag":211}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
ReactNativeJS: Running application "navigation.playground.TopTabScreen" with appParams: {"initialProps":{"componentId":"Component5"},"rootTag":221}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
ReactNativeJS: Running application "navigation.playground.TopTabScreen" with appParams: {"initialProps":{"componentId":"Component6"},"rootTag":231}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
ReactNative: ReactInstanceManager.attachRootViewToInstance()
ReactNativeJS: Running application "navigation.playground.WelcomeScreen" with appParams: {"initialProps":{"componentId":"Component1"},"rootTag":241}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

Steps to Reproduce

I was able to reproduce on the playground example by installing the app on an Android device, launching, and reloading it with live-reload enabled or disabled.

Full stack of two reloads:

05-11 12:16:13.508  2461  2461 D ReactNative: ReactInstanceManager.detachViewFromInstance()
05-11 12:16:13.689  2461  2461 D ReactNative: ReactInstanceManager.onJSBundleLoadedFromServer()
05-11 12:16:13.689  2461  2461 D ReactNative: ReactInstanceManager.recreateReactContextInBackground()
05-11 12:16:13.689  2461  2461 D ReactNative: ReactInstanceManager.runCreateReactContextOnNewThread()
05-11 12:16:13.689  2461  2461 D ReactNative: ReactInstanceManager.tearDownReactContext()
05-11 12:16:13.689  2461  2461 D ReactNative: CatalystInstanceImpl.destroy() start
05-11 12:16:13.690  2461  3499 D ReactNative: ReactInstanceManager.createReactContext()
05-11 12:16:13.721  2461  3499 D ReactNative: Initializing React Xplat Bridge.
05-11 12:16:13.723  2461  3499 D ReactNative: Initializing React Xplat Bridge before initializeBridge
05-11 12:16:13.733  2461  2477 D ReactNative: CatalystInstanceImpl.destroy() end
05-11 12:16:13.734  2461  3499 D ReactNative: Initializing React Xplat Bridge after initializeBridge
05-11 12:16:13.734  2461  3499 D ReactNative: CatalystInstanceImpl.runJSBundle()
05-11 12:16:13.734  2461  3501 D ReactNative: ReactInstanceManager.setupReactContext()
05-11 12:16:13.734  2461  3501 D ReactNative: CatalystInstanceImpl.initialize()
05-11 12:16:13.735  2461  3501 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
05-11 12:16:13.735  2461  3501 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
05-11 12:16:13.735  2461  3501 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
05-11 12:16:13.936  2461  3500 I ReactNativeJS: Running application "navigation.playground.TopTabOptionsScreen" with appParams: {"initialProps":{"componentId":"Component4"},"rootTag":211}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
05-11 12:16:13.957  2461  3500 I ReactNativeJS: Running application "navigation.playground.TopTabScreen" with appParams: {"initialProps":{"componentId":"Component5"},"rootTag":221}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
05-11 12:16:13.962  2461  3500 I ReactNativeJS: Running application "navigation.playground.TopTabScreen" with appParams: {"initialProps":{"componentId":"Component6"},"rootTag":231}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
05-11 12:16:13.980  2461  2461 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
05-11 12:16:13.980  2461  3500 I ReactNativeJS: Running application "navigation.playground.WelcomeScreen" with appParams: {"initialProps":{"componentId":"Component1"},"rootTag":241}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
05-11 12:27:13.716  2461  2461 D ReactNative: ReactInstanceManager.detachViewFromInstance()
05-11 12:27:14.224  2461  2461 D ReactNative: ReactInstanceManager.onJSBundleLoadedFromServer()
05-11 12:27:14.224  2461  2461 D ReactNative: ReactInstanceManager.recreateReactContextInBackground()
05-11 12:27:14.224  2461  2461 D ReactNative: ReactInstanceManager.runCreateReactContextOnNewThread()
05-11 12:27:14.224  2461  2461 D ReactNative: ReactInstanceManager.tearDownReactContext()
05-11 12:27:14.225  2461  2461 D ReactNative: CatalystInstanceImpl.destroy() start
05-11 12:27:14.227  2461  5787 D ReactNative: ReactInstanceManager.createReactContext()
05-11 12:27:14.266  2461  5787 D ReactNative: Initializing React Xplat Bridge.
05-11 12:27:14.308  2461  2539 D ReactNative: CatalystInstanceImpl.destroy() end
05-11 12:27:14.316  2461  5787 D ReactNative: Initializing React Xplat Bridge before initializeBridge
05-11 12:27:14.319  2461  5787 D ReactNative: Initializing React Xplat Bridge after initializeBridge
05-11 12:27:14.319  2461  5787 D ReactNative: CatalystInstanceImpl.runJSBundle()
05-11 12:27:14.319  2461  5789 D ReactNative: ReactInstanceManager.setupReactContext()
05-11 12:27:14.319  2461  5789 D ReactNative: CatalystInstanceImpl.initialize()
05-11 12:27:14.320  2461  5789 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
05-11 12:27:14.320  2461  5789 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
05-11 12:27:14.320  2461  5789 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
05-11 12:27:14.678  2461  5788 I ReactNativeJS: Running application "navigation.playground.TopTabOptionsScreen" with appParams: {"initialProps":{"componentId":"Component4"},"rootTag":251}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
05-11 12:27:14.708  2461  5788 I ReactNativeJS: Running application "navigation.playground.TopTabScreen" with appParams: {"initialProps":{"componentId":"Component5"},"rootTag":261}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
05-11 12:27:14.715  2461  5788 I ReactNativeJS: Running application "navigation.playground.TopTabScreen" with appParams: {"initialProps":{"componentId":"Component6"},"rootTag":271}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
05-11 12:27:14.745  2461  2461 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
05-11 12:27:14.746  2461  5788 I ReactNativeJS: Running application "navigation.playground.WelcomeScreen" with appParams: {"initialProps":{"componentId":"Component1"},"rootTag":281}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

---

Environment

• React Native Navigation version: 2.0.0 (v2 branch c47a3771eaa2cd57e9d08150dcdfb34ce791d2ee)
• React Native version: 0.51.1
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Device/Simulator Debug.

[guyca]

Hey @stevelacy, I believe this is fixed in 2.0.2361

[luskin]

I'm still having this issue on 2.0.2394

[guyca]

@luskin Any more info you can provide? Do all screens mount twice? Does it happen only in a specific layout?

[luskin]

@guyca see #3528