Titanium titleImage jumps from left when navigating using the back button

Question

I have a problem in Appcelerator Titanium using the titleImage on Windows. When a new window opens, the titleImage animates left and fades as you'd expect it to. But when you use the back button, the titlImage suddenly appears on the left and animates back to the centre, with no fade. It looks very jerky and broken.

Here is my code, please see below for screenshots of the problem:

View

<TabGroup id="tabGroup">
    <Tab id="tab1" title="Tab 1">
        <Window id="win" title="Tab 1" titleImage="title-brand.png">
            <Button onClick="openWindow">I am Window 1</Button>
        </Window>
    </Tab>
    <Tab title="Tab 2">
        <Window title="Tab 2">
            <Label>I am Window 2</Label>
        </Window>
    </Tab>
</TabGroup>

Controller JS

function openWindow() {
    var window2 = Ti.UI.createWindow({ title: "Window 2" });
    var label = Ti.UI.createLabel({ text: "Hello!" });
    window2.add(label);
    $.tab1.open(window2, { animated: true });
}

$.tabGroup.open();

Screnshot

As you can see in this screen shot, when the back button was tapped Window 1 animates in but the titleImage has appeared on the left and then jumps to the center:

Answer 1

Try to set titleControl instead titleImage. This is the way to solve this issue.

.xml

<TabGroup id="tabGroup">
    <Tab id="tab1" title="Tab 1">
        <Window id="win" title="Tab 1" titleImage="title-brand.png">
            <Button onClick="openWindow">I am Window 1</Button>
        </Window>
    </Tab>
    <Tab title="Tab 2">
        <Window title="Tab 2">
            <Label>I am Window 2</Label>
        </Window>
    </Tab>
</TabGroup>

.js

var imageView = Ti.UI.createImageView({
    image : "KS_nav_views.png",
    width : Ti.UI.SIZE,
    height : Ti.UI.SIZE
});
$.win.titleControl = imageView;

function openWindow() {
    var window2 = Ti.UI.createWindow({
        title : "Window 2"
    });
    var label = Ti.UI.createLabel({
        text : "Hello!"
    });
    window2.add(label);
    $.tab1.open(window2, {
        animated : true
    });
}

$.tabGroup.open();