NavGroup within a TabGroup

Hi,

This question was answered in another thread, but since it was answered 2 years ago and I am getting incorrect behavior, I thought I would repost.

I have the following flow:

Login screen -> Information screen -> Tab group screen -> Step 1 screen in tab 1

The Step 1 screen is the first in a multi-step process that I want the user to go through. If I do this flow without a NavGroup, it all works great, but of course, there are no tabs in the Step 1 screen. I want the user to go through my multi-step process via a NavGroup all through one of the tabs.

So then I did the following with the tab group:

// create tab group
    var tabGroup = Titanium.UI.createTabGroup();
 
    var ReservationsTab = require("/iphone/ReservationsTab");
    var reservationsTabView = new ReservationsTab();
    var reservationsTab = Titanium.UI.createTab({  
        icon:'/images/icon-reservations.png',
        title:'Reservations',
        window:reservationsTabView
    });
 
    var newReservationNavGroup = Ti.UI.iPhone.createNavigationGroup({
        window:reservationsTabView
    });
    reservationsTab.add(newReservationNavGroup);
 
    var reservation = require("/model/reservation").reservation;
    reservation.navGroup = newReservationNavGroup;
 
    var MyProfileTab = require("/iphone/MyProfileTab");
    var myProfileTab = Titanium.UI.createTab({  
        icon:'/images/icon-myprofile.png',
        title:'My Profile',
        window:new MyProfileTab()
    });

The reservationsTabView has a button to start the navgroup flow and when a user clicks the button, it fires an event that executes this:

Titanium.App.addEventListener("newReservation", function() {
    var NewReservation = require("/iphone/NewReservationView"));
    var newReservation = new NewReservation();
 
    var reservation = require("/model/reservation").reservation;
    Titanium.API.info("eventHandler: " + reservation.navGroup);  // shows correct nav group
    reservation.navGroup.open(newReservation, {animation:false});
});

When the event listener is executed, the Information screen is shown instead of the Step 1 screen. It's as if the reservationTabView is closed, but the newReservationView is never opened.

Any help you could provide would be much appreciated.

Hi Norton, two things i can say: 1: Tab Group provide inbuilt support for the navGroup that is navigation control, so no need of doing it with navGroup.

2: one mistake in your code is.... you are adding navGroup to a Tab which is wrong.

it should be added to window object.

reservationsTab.add(newReservationNavGroup);  // wrong as reservationsTab is a Tab

add it to window object reservationsTabView // window object added to Tab

reservationsTabView.add(newReservationNavGroup);

I got it to work. I had to create another window in the TabGroup that becomes hidden when the NavGroup is added.

So my TabGroup code ended up looking like this:

var tabGroup = Titanium.UI.createTabGroup();
 
    var baseWindow = Titanium.UI.createWindow({  // hidden window that never gets shown
        navBarHidden:true,
        title:'base window'
    });
 
    var ReservationsTab = require("/iphone/ReservationsTab");
    var reservationsTabView = new ReservationsTab();
    var reservationsTab = Titanium.UI.createTab({  
        icon:'/images/icon-reservations.png',
        title:'Reservations',
        window:baseWindow
    });
 
    var newReservationNavGroup = Ti.UI.iPhone.createNavigationGroup({
        window:reservationsTabView
    });
    baseWindow.add(newReservationNavGroup);
 
    var reservation = require("/model/reservation").reservation;
    reservation.navGroup = newReservationNavGroup;
 
    var MyProfileTab = require("/iphone/MyProfileTab");
    var myProfileTab = Titanium.UI.createTab({  
        icon:'/images/icon-myprofile.png',
        title:'My Profile',
        window:new MyProfileTab()
    });