Ionic 2 modal and view stack automatically

Ionic Framework ionic-v3
1

I’m building a new app with ionic 2, it’s a workout app.

one page handles the whole “workout”, means it loos over the exercises and launches modal for showing the exercise and launches modal for the “rest” timer.

My problem is when I add modal with user events the app get blacked out…

example code:

 export class WorkoutRunnerPage {
     workout: Workout;
     currentRoutine: Routine;
     routineIndex = 0;

    constructor(nav: NavController, navParams: NavParams) {
        console.log('workout runner constructor');
        this.workout = navParams.get('workout');
        this.nav = nav;
        this.start();
    }

   start() {
        let routine = this.workout.routines[this.routineIndex];
        let modal = Modal.create(ExerciseModal, {routine: routine});
        this.nav.present(modal);
    }

now this is the exercise Modal

export class ExerciseModal {
       constructor(nav: NavController, params: NavParams) {
            this.nav = nav;
            this.exercise = params.get('exercise');
            this.reps = params.get('reps');
        }

       close() {
           this.nav.pop();
       }

As you can see, the user doesn’t interact with the workout page… it launches it automaticly but when user closes the exercise modal it goes back to the main application page and not to the exercise page.

2

Had no time to check your code but in my case I had to delay the modal (open and/or close) with setTimeout for 200ms as some page transitions where in progress at the same moment. My app showed a black screen because it didn’t know what view was active underneath the modal.
But maybe this was just my problem and in your case it’s the nav.pop(). I don’t think you need that here because the modal is not added to the view stack, so no need to pop it, I think you pop the previous view instead.

3

@tzookb Probably you already figured it out, but Modals are not added to the navigation stack (like the Pages) so in your modal code you should not use pop() but dismiss() instead (and also ViewController instead of NavController):

export class ExerciseModal {
  // ...
  constructor(params: NavParams, private view: ViewController) {
    // ...
  }

  close() {
    this.view.dismiss();
  }
  // ...
}

@7freaks_otte Could you give some details, e.g. the output of ionic info, code sample?

This behavior might be related to the following issue: