8.2 Alpha - Tab Navigation Disappearing Content

Question

8.2 Alpha - Tab Navigation Disappearing Content

keerl opened this issue 3 years ago · comments

Environment

CLI: 8.1.0
Cross-platform modules: ~8.1.1
Android Runtime: 8.2.0-alpha.2

Describe the bug
I've upgraded to the alpha Android runtime to test it out. I found an issue where my content is disappearing on a back navigation.

My Angular project has multiple tabs which is implemented using multiple page-router-outlet and toggling their visibility as well as a top-level page-router-outlet to contain the entire app and allow me to navigate to pages unrelated to the tabs.

In this scenario, I select an item in a list and have it navigate me to its own page, once I'm finished with that page I navigate back and this is where the problem occurs. On the 8.2.0-alpha.2 version my original content in the tabs is gone. If I run the same thing on the stable 8.1 version it works as expected. See GIFs below.


Runtime 8.1	Runtime 8.2.0-alpha.2

I enabled Tracing to try and get more information of what is happening and these are the results comparing the outputs of each version.

Runtime 8.1 (working):

JS: ViewHierarchy: ProxyViewContainer(118)._addView(Placeholder(120), undefined)
JS: ViewHierarchy: Page(117)._addView(ActionBar(123), undefined)
JS: ViewHierarchy: ProxyViewContainer(122)._addView(GridLayout(126), undefined)
JS: ViewHierarchy: GridLayout(126)._addView(Label(127), undefined)
JS: ViewHierarchy: ActionBar(123)._addView(NavigationButton(124), undefined)
JS: ViewHierarchy: ActionBar(123)._addView(Label(125), undefined)
JS: ViewHierarchy: Page(117)._addView(ProxyViewContainer(122), undefined)
JS: Navigation: NAVIGATE
JS: Navigation: NAVIGATE CORE(Page(117) | Transition[{"name":"slideLeft","duration":200,"curve":"easeInOut"}]); currentPage: Page(6)
JS: NativeLifecycle: fragment7[7]<Page(117)>.onCreate(null)
JS: NativeLifecycle: fragment7[7]<Page(117)>.onCreateView(inflater, container, null)
JS: ViewHierarchy: Frame(4)._addView(Page(117), undefined)
JS: ViewHierarchy: ProxyViewContainer._addViewToNativeVisualTree for a child GridLayout(126) ViewContainer.parent: Page(117)
JS: ViewHierarchy: ProxyViewContainer._addViewToNativeVisualTree at: undefined base: 0 additional: 0
JS: VisualTreeEvents: Page(117).nativeView.addView(GridLayout(126).nativeView, 0)
JS: VisualTreeEvents: GridLayout(126).nativeView.addView(Label(127).nativeView, 9007199254740991)
JS: VisualTreeEvents: Page(117).nativeView.addView(ActionBar(123).nativeView, 9007199254740991)
JS: NativeLifecycle: fragment4[4]<Page(52)>.onDestroyView()
JS: NativeLifecycle: fragment1[1]<Page(44)>.onDestroyView()
JS: NativeLifecycle: fragment5[5]<Page(33)>.onDestroyView()
JS: NativeLifecycle: fragment2[2]<Page(25)>.onDestroyView()
JS: NativeLifecycle: fragment6[6]<Page(74)>.onDestroyView()
JS: NativeLifecycle: fragment3[3]<Page(66)>.onDestroyView()
JS: NativeLifecycle: fragment0[0]<Page(6)>.onDestroyView()
JS: NativeLifecycle: fragment4[4]<Page(52)>.onDestroy()
JS: NativeLifecycle: fragment1[1]<Page(44)>.onDestroy()
JS: NativeLifecycle: fragment5[5]<Page(33)>.onDestroy()
JS: NativeLifecycle: fragment2[2]<Page(25)>.onDestroy()
JS: NativeLifecycle: fragment6[6]<Page(74)>.onDestroy()
JS: NativeLifecycle: fragment3[3]<Page(66)>.onDestroy()
JS: NativeLifecycle: fragment0[0]<Page(6)>.onDestroy()

JS: Navigation: GO BACK
JS: Navigation: GO BACK CORE(Page(6)); currentPage: Page(117)
JS: NativeLifecycle: fragment0[0]<Page(6)>.onCreate(null)
JS: NativeLifecycle: fragment0[0]<Page(6)>.onCreateView(inflater, container, null)
JS: Navigation: NAVIGATE CORE(Page(44)); currentPage: null
JS: Navigation: NAVIGATE CORE(Page(52)); currentPage: null
JS: Navigation: NAVIGATE CORE(Page(25)); currentPage: null
JS: Navigation: NAVIGATE CORE(Page(33)); currentPage: null
JS: Navigation: NAVIGATE CORE(Page(66)); currentPage: null
JS: Navigation: NAVIGATE CORE(Page(74)); currentPage: null
JS: NativeLifecycle: fragment8[1]<Page(44)>.onCreate(null)
JS: NativeLifecycle: fragment8[1]<Page(44)>.onCreateView(inflater, container, null)
JS: NativeLifecycle: fragment10[3]<Page(25)>.onCreate(null)
JS: NativeLifecycle: fragment10[3]<Page(25)>.onCreateView(inflater, container, null)
JS: NativeLifecycle: fragment12[5]<Page(66)>.onCreate(null)
JS: NativeLifecycle: fragment12[5]<Page(66)>.onCreateView(inflater, container, null)
JS: NativeLifecycle: fragment9[2]<Page(52)>.onCreate(null)
JS: NativeLifecycle: fragment9[2]<Page(52)>.onCreateView(inflater, container, null)
JS: NativeLifecycle: fragment11[4]<Page(33)>.onCreate(null)
JS: NativeLifecycle: fragment11[4]<Page(33)>.onCreateView(inflater, container, null)
JS: NativeLifecycle: fragment13[6]<Page(74)>.onCreate(null)
JS: NativeLifecycle: fragment13[6]<Page(74)>.onCreateView(inflater, container, null)
JS: NativeLifecycle: fragment7[7]<Page(117)>.onDestroyView()
JS: NativeLifecycle: fragment7[7]<Page(117)>.onDestroy()
JS: ViewHierarchy: Frame(4)._removeView(Page(117))
JS: VisualTreeEvents: org.nativescript.widgets.GridLayout{58a8955 V.E...... ......ID 0,220-1080,2148}.removeView(android.widget.TextView{2158c5b V.ED..... ........ 28,28-1052,96})
JS: ViewHierarchy: ProxyViewContainer._removeViewFromNativeVisualTree for a child GridLayout(126) ViewContainer.parent: Page(117)
JS: VisualTreeEvents: org.nativescript.widgets.GridLayout{ec3bc99 V.E...... ......ID 0,0-1080,2148}.removeView(org.nativescript.widgets.GridLayout{58a8955 V.E...... ......ID 0,220-1080,2148})
JS: VisualTreeEvents: org.nativescript.widgets.GridLayout{ec3bc99 V.E...... ......ID 0,0-1080,2148}.removeView(androidx.appcompat.widget.Toolbar{cb765d1 V.E...... ......ID 0,0-1080,220})
JS: ViewHierarchy: Page(117)._removeView(ProxyViewContainer(122))

Runtime 8.2.0-alpha.2 (NOT working):

JS: ViewHierarchy: ProxyViewContainer(118)._addView(Placeholder(120), undefined)
JS: ViewHierarchy: Page(117)._addView(ActionBar(123), undefined)
JS: ViewHierarchy: ProxyViewContainer(122)._addView(GridLayout(126), undefined)
JS: ViewHierarchy: GridLayout(126)._addView(Label(127), undefined)
JS: ViewHierarchy: ActionBar(123)._addView(NavigationButton(124), undefined)
JS: ViewHierarchy: ActionBar(123)._addView(Label(125), undefined)
JS: ViewHierarchy: Page(117)._addView(ProxyViewContainer(122), undefined)
JS: Navigation: NAVIGATE
JS: Navigation: NAVIGATE CORE(Page(117) | Transition[{"name":"slideLeft","duration":200,"curve":"easeInOut"}]); currentPage: Page(6)
JS: NativeLifecycle: fragment7[7]<Page(117)>.onCreate(null)
JS: NativeLifecycle: fragment7[7]<Page(117)>.onCreateView(inflater, container, null)
JS: ViewHierarchy: Frame(4)._addView(Page(117), undefined)
JS: ViewHierarchy: ProxyViewContainer._addViewToNativeVisualTree for a child GridLayout(126) ViewContainer.parent: Page(117)
JS: ViewHierarchy: ProxyViewContainer._addViewToNativeVisualTree at: undefined base: 0 additional: 0
JS: VisualTreeEvents: Page(117).nativeView.addView(GridLayout(126).nativeView, 0)
JS: VisualTreeEvents: GridLayout(126).nativeView.addView(Label(127).nativeView, 9007199254740991)
JS: VisualTreeEvents: Page(117).nativeView.addView(ActionBar(123).nativeView, 9007199254740991)
JS: NativeLifecycle: fragment6[6]<Page(74)>.onDestroyView()
JS: NativeLifecycle: fragment3[3]<Page(66)>.onDestroyView()
JS: NativeLifecycle: fragment4[4]<Page(52)>.onDestroyView()
JS: NativeLifecycle: fragment1[1]<Page(44)>.onDestroyView()
JS: NativeLifecycle: fragment5[5]<Page(33)>.onDestroyView()
JS: NativeLifecycle: fragment2[2]<Page(25)>.onDestroyView()
JS: NativeLifecycle: fragment0[0]<Page(6)>.onDestroyView()
JS: NativeLifecycle: fragment4[4]<Page(52)>.onDestroy()
JS: NativeLifecycle: fragment1[1]<Page(44)>.onDestroy()
JS: NativeLifecycle: fragment5[5]<Page(33)>.onDestroy()
JS: NativeLifecycle: fragment2[2]<Page(25)>.onDestroy()
JS: NativeLifecycle: fragment6[6]<Page(74)>.onDestroy()
JS: NativeLifecycle: fragment3[3]<Page(66)>.onDestroy()
JS: NativeLifecycle: fragment0[0]<Page(6)>.onDestroy()

JS: Navigation: GO BACK
JS: Navigation: GO BACK CORE(Page(6)); currentPage: Page(117)
JS: NativeLifecycle: fragment0[0]<Page(6)>.onCreate(null)
JS: NativeLifecycle: fragment0[0]<Page(6)>.onCreateView(inflater, container, null)
JS: NativeLifecycle: fragment7[7]<Page(117)>.onDestroyView()
JS: NativeLifecycle: fragment7[7]<Page(117)>.onDestroy()
JS: ViewHierarchy: Frame(4)._removeView(Page(117))
JS: VisualTreeEvents: org.nativescript.widgets.GridLayout{f141315 V.E...... ......ID 0,220-1080,2148}.removeView(android.widget.TextView{3dc8c1b V.ED..... ........ 28,28-1052,96})
JS: ViewHierarchy: ProxyViewContainer._removeViewFromNativeVisualTree for a child GridLayout(126) ViewContainer.parent: Page(117)
JS: VisualTreeEvents: org.nativescript.widgets.GridLayout{6542a59 V.E...... ......ID 0,0-1080,2148}.removeView(org.nativescript.widgets.GridLayout{f141315 V.E...... ......ID 0,220-1080,2148})
JS: VisualTreeEvents: org.nativescript.widgets.GridLayout{6542a59 V.E...... ......ID 0,0-1080,2148}.removeView(androidx.appcompat.widget.Toolbar{4afcb91 V.E...... ......ID 0,0-1080,220})
JS: ViewHierarchy: Page(117)._removeView(ProxyViewContainer(122))

To Reproduce
To reproduce the issue simply run the sample project attached here.
android-8.2-runtime-issue.zip

wawaneToutoune · Answer 1 · Thu Dec 02 2021 18:19:30 GMT+0800 (China Standard Time)

Hi !
I got the same problem than you even if i use the 8.1.1 stable version. Any idea ?

Karl Schmaltz · Answer 2 · Tue Jan 04 2022 07:42:17 GMT+0800 (China Standard Time)

This is fixed for me with @nativescript/core 8.2.0 alpha.