Description
Environment
- CLI: 6.4.1
- Cross-platform modules: 6.4.1
- Android Runtime: 6.4.1
- iOS Runtime: 6.4.2
- NativeScript-Angular: ~8.21.0
- Angular: ~8.2.0
Describe the bug
We have an app that uses BottomNavigation in app component page-router-outlet and each of TabStripItem has it's own page-router-outlet with it's own navigation.
The first tab contains product catalog (category list) and any one of categories can have child categories, so clicking on any one of them navigates to the same route with different query params.
At first we used custom route reuse strategy not to reuse that component, so that everything works. But the problem is that the component is recreated every time you navigate on other tabs either (on other page-router-outlets) and the second problem was we had also glitches with navigation transitions when going back to that tab (something like this, though we had simple ListView on page and didn't focus anything, so I doubt any other animation was intercepting the navigation transition).
Then we tried another approach. Instead of not reusing the route, we simply subscribed to route params observable and changed the listview content. In that case we have controlled back button NavigationButton programmatically hiding on top page and showing on child pages. Everything is working great on Android in this case, but iOS doesn't show the back button in this case and if we add ActionItem as button we can't have the same back button icon (on ios) as anywhere else in the app and we can't control page transition as ios just thinks it is on the same page (which is technically correct) and ignores any navigation transition.
Any way to solve the problem (using either method, in first case somehow caching the component, or in second case having correct back behavior on ios)?