Outlets freeze when navigate to a nested route from another tab, only on Android
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- angular, typescript
- Domain
- frontend, mobile-dev
Research direction
Start by reproducing the reported flow with NativeScript 8.1.2, the native/core TabView, page-router-outlet, five tabs, and nested routes on Android. Compare androidOffscreenTabLimit values of 1 and 3, then verify that returning from Tab 2 to the nested Tab 5 route neither freezes nor unexpectedly returns to the main outlet.
Written by the indexing model from the issue text.
Description
Issue Description
Outlets freeze when we navigate to a nested route from another TabView only on Android. We have 5 tabs and 2 of them has nested routes. We use page-router-outlet and native/core TabView component.
Steps to reproduce:
Go to Tab 5 -> drill down 3 levels to the nested route -> click the button to navigate to Tab 2, which takes you to Tab 2 w/o any issues-> Go back to Tab 5, you are on the last screen (nested route) but it freezes. You can't go back or can't do anything on the screen. However on iOS, instead of freezing, it goes all the way back to the main outlet.
So apparently the iOS behavior is the intentional behavior of tabView, because tabView keeps only 1 view alive and it's the main outlets in our case?
Our tabView has the androidTabsPosition="bottom" option and we realized that this sets androidOffscreenTabLimit to 1 automatically, so it means only the current tab is alive. I tried adding the androidOffscreenTabLimit="3" option to the tabView (because we have max 3 level nested navigation on Tab 5) , the tabs are not frozen anymore, BUT now the interface jumps back to the main outlet (just like iOS). Any idea how to solve this ?
Also a side note, this started happening after NativeScript 8 upgrade. We were using bottomnavigationbar with NS7 but we had to change to tabView with NS8. We didn't have any freezing or jumping back to the main outlet issues before the update.
Any insight will be appreciated, thanks so much!
Reproduction
No response
Relevant log output (if applicable)
No response
Environment
node: 14.15.0
npm: 7.6.1
nativescript: 8.1.2
### Dependencies
```json
"dependencies": {
"@angular/animations": "~13.1.1",
"@angular/common": "~13.1.1",
"@angular/compiler": "~13.1.1",
"@angular/core": "~13.1.1",
"@angular/forms": "~13.1.1",
"@angular/platform-browser": "~13.1.1",
"@angular/platform-browser-dynamic": "~13.1.1",
"@angular/router": "~13.1.1",
"@nativescript-community/ui-material-bottomnavigationbar": "^6.2.5",
"@nativescript/angular": "^13.0.0",
"@nativescript/core": "~8.1.1",
"@nativescript/email": "^2.0.5",
"@nativescript/geolocation": "^8.0.2",
"@nativescript/theme": "~3.0.1",
"@nstudio/nativescript-cardview": "^2.0.1",
"@nstudio/nativescript-floatingactionbutton": "^3.0.4",
"moment": "^2.29.1",
"nativescript-mapbox-sdk": "file:../well-finder-smartphone-app-.nativescript-mapbox-sdk/src",
"nativescript-ripple": "^4.0.1",
"nativescript-ui-sidedrawer": "^10.0.2",
"nativescript-windowed-modal": "^7.0.0",
"rxjs": "~7.4.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.1.1",
"@angular/compiler-cli": "~13.1.1",
"@nativescript/android": "8.1.1",
"@nativescript/debug-ios": "^1.0.0",
"@nativescript/ios": "8.1.0",
"@nativescript/types": "~8.1.1",
"@nativescript/webpack": "~5.0.0",
"@ngtools/webpack": "~13.1.1",
"@types/geojson": "^7946.0.8",
"node-sass": "^7.0.1",
"typescript": "~4.4.4"
}
Please accept these terms
- I have searched the existing issues as well as StackOverflow and this has not been posted before
- This is a bug report
- I agree to follow this project's Code of Conduct
- Dominant language
- TypeScript
- Stars
- 55
- Forks
- 13
- Avg merge
- 16m
- Merged PRs (30d)
- 1
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from NativeScript/angular
-
Difficulty 4/5 3-5 days Newbie friendliness 45/100
NativeScript/angular#170 · 1 comment ·
-
Difficulty 5/5 Over a week Newbie friendliness 35/100
NativeScript/angular#164 ·
-
My types are gone Open
Difficulty 2/5 1-3 hours Newbie friendliness 45/100
NativeScript/angular#163 · 1 comment ·
-
Difficulty 4/5 3-5 days Newbie friendliness 38/100
NativeScript/angular#158 · 1 reaction ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
NativeScript/angular#155 ·
All issues in NativeScript/angular
Similar issues
-
blocklist removal
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
MetaMask/eth-phishing-detect#296544 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
pastelsky/bundlephobia#1122 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
category/development priority/P2 scope/file-operations scope/testing type/enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Open
Difficulty 2/5 1-3 hours Newbie friendliness 75/100