question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: iOS - dynamic tabs initializing (Ionic 5)

See original GitHub issue

Bug Report

Ionic version: [x] 5.x

Current behavior: Inside ion-tabs/ion-tab-bar component, when creating ion-tab-buttons dynamically, in my case depending on params from queryParams Observable, error occurs. As my params are fetched after tabs initialization, there seems to be an error which isn’t properly handled on iOS.

There is a problem where if you don’t have any ion-tab element or page with .ion-page class on tabs initialization, error occurs in getBackButton method inside ios.transition.js file. Error that breaks even ionView* events (ionViewWillEnter, ionViewDidEnter, ionViewWillLeave etc. doesn’t trigger).

Expected behavior: To be able to create dynamic ionic tabs (ion-tab-buttons) on iOS.

Steps to reproduce: Try creating ion-tab-buttons dynamically on iOS as described above.

Related code: const activeTab is null which is causing this error:

image

https://github.com/ionic-team/ionic/blob/e0f3c09bab1ad6d1acbcb3fa9cb76609482fa93f/core/src/utils/transition/ios.transition.ts#L32

Ionic info:

Ionic:
   Ionic CLI                     : 6.3.0 (/usr/local/Cellar/nvm/0.35.2/versions/node/v10.16.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.0
   @angular-devkit/schematics    : 9.1.0
   @angular/cli                  : 9.1.0
   @ionic/angular-toolkit        : 2.2.0
Cordova:
   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 2.5.3, (and 34 other plugins)
Utility:
   cordova-res : not installed
   native-run  : not installed
System:
   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v10.16.0 (/usr/local/Cellar/nvm/0.35.2/versions/node/v10.16.0/bin/node)
   npm        : 6.9.0
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
liamdebeasicommented, Apr 2, 2020

We don’t typically comment on the exact timing of releases, but I do plan on getting this into the next release. 😄

1reaction
kklindiccommented, Apr 2, 2020

I know that the approach of dynamically generating nested tabs isn’t the best solution, but unfortunately it is what it is for now 😃 We’ll probably reimplement that once the task gets into the sprint.

This works as charm! Thanks for this fix and your effort. Do you have any idea when this fix will be released?

Read more comments on GitHub >

github_iconTop Results From Across the Web

bug: iOS - dynamic tabs initializing (Ionic 5) · Issue #20948
It happens if you don't preselect tab at all or if you preselect it at the wrong time. So tab needs to be...
Read more >
Ionic tab not get correctly rendered on Android? - Stack Overflow
Every thing is working fine on iOS platform.
Read more >
Angular Page Component Life Cycle - Ionic Framework
This guide covers how the page life cycle works in an Ionic app built with Angular. Learn how Ionic embraces life cycle events...
Read more >
How to create an Ionic 5 app - For beginners - Enappd
You also will need the latest browser for the development environment. To create production builds in Android and iOS, it would require Android...
Read more >
Create an Ionic App with Vue + Vite - Part I - YouTube
Ionic is an amazing cross-platform mobile framework that allows you to ... Ionic CLI 01:57 - Initializing ionic app with Tabs template 02:30 ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found