Facebook like Sliding Menu with Tab Group - Both iPhone and android

Hi, I am developing a mobile app using -

CLI version 3.2.1, Titanium SDK version 3.2.2.GA, Alloy version -1.3.1

My problem is that I want to implement a Face Book like sliding menu well as as have a tab Group so that the user can access pages both by the sliding menu and the tab bar.

For the sliding menu I have based my project on -

https://github.com/dharmik/Slider-Like-Facebook-working-in-both-android-and-iOS

The sliding menu is working good on its own. But I am struggling to use it along the Tab Group.

My code is -

index.xml
----------------
<Alloy>
    <TabGroup id="tgGroup" navBarHidden="true">
        <Tab id="tab1" title="Tab 1">
            <Window id="win1" title="Tab 1">
                <Label id="label1" color="#999">I am Window 1</Label>
                <Require type="widget" src="com.drawermenu.widget" id="drawermenu"/>
            </Window>
        </Tab>
        <Tab id="tab2" title="Tab 2">
            <Window id="win2" title="Tab 2">
                <Label id="label2" color="#999">I am Window 2</Label>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

The functional part in the controller file -

// create menu view
var data = [];
 
var v1 = Ti.UI.createView({
    height : '100%',
    width : '320dp',
    left : '0%',
    backgroundColor : '#212429'
});
 
$.drawermenu.drawermenuview.add(v1);
 
var tableView = Ti.UI.createTableView({
    height : '100%',
    width : '100%',
    separatorColor : '#111214'
});
v1.add(tableView);
 
var sectionPost = Ti.UI.createTableViewRow({
    height : '50dp',
    touchEnabled : false,
    width : '100%',
    backgroundColor : '#212429'
});
 
var postLabel = Ti.UI.createLabel({
    text : 'White Screen',
    color : 'white',
    touchEnabled : false,
    font : {
        fontSize : '18dp'
    }
});
 
sectionPost.add(postLabel);
 
var sectionInformation = Ti.UI.createTableViewRow({
    height : '50dp',
    touchEnabled : false,
    width : '100%',
    backgroundColor : '#212429'
});
 
var informationLabel = Ti.UI.createLabel({
    text : 'Black Screen',
    color : 'white',
    touchEnabled : false,
    font : {
        fontSize : '18dp'
    }
});
 
sectionInformation.add(informationLabel);
 
data.push(sectionPost);
data.push(sectionInformation);
 
tableView.setData(data);
 
tableView.addEventListener('click', function(e) {
    //  $.win1.tabBarHidden =true;
    $.win1.hideTabBar();
//  $.tgGroup.visble = false;
    if (e.row.children[0].text == 'White Screen') {
        var postScreen = Alloy.createController('postScreen').getView();
        $.drawermenu.drawermainview.add(postScreen);
        $.drawermenu.showhidemenu();
    } else if (e.row.children[0].text == 'Black Screen') {
        var informationScreen = Alloy.createController('informationScreen').getView();
        $.drawermenu.drawermainview.add(informationScreen);
        $.drawermenu.showhidemenu();
    } else if (e.row.children[0].text == 'Nothing') {
        $.drawermenu.showhidemenu();
    } else {
        $.drawermenu.showhidemenu();
    }
});
 
var postScreen = Alloy.createController('postScreen').getView();
$.drawermenu.drawermainview.add(top10Screen);
 
Ti.App.addEventListener('settingImg', function(data) {
    $.drawermenu.showhidemenu();
});
$.win1.open();

From the controllers, postScreen and informationScreen I am calling the sliding menu widget in this way -

postScreen.xml
---------------------------
$.settingImg.addEventListener('click', function(e) {
   Ti.App.fireEvent('settingImg');
});

My problem is that I want to hide the tab bar at the bottom of the window when I click on a row in the table of the sliding menu but the the tab bar always appears no matter what I try :(

I have been trying for the last two days without any success and would really appreciate if some one can look in the problem and help me out.

Thanks in advance.