ActionBar.titleView out-of-position if re-rendered after delay - iOS 11

Which platform(s) does your issue occur on?

iOS 11

Please provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)
• Cross-platform modules: 3.1.1
• Runtime(s): tns-ios 3.1.0
• Plugin(s): no plugins

Please tell us how to recreate the issue in as much detail as possible.

This only happened in iOS 11 (I build it using XCode 9 Beta 5 or XCode 9 Beta 6) It happened on both simulator and device (iOS 11 Beta 7) In page’s loaded event handler:

1. Create a Label
2. Create assign the label to the page’s actionbar.titleView
3. If you navigate this to this page from another page, the title position will be okay at first but if something trigger the re-rendering, it will be messed up (moved to the bottom-right corner).

This issue seems to be triggered when the ActionBar is re-rendered after a small delay (e.g. add new ActionItem or even just call the requestLayout function).

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

    var page = args.object;
    var actionBarTitleLabel = new label.Label();
    var titleText = "DETAIL TITLE";
    actionBarTitleLabel.text = titleText;
    page.actionBar.titleView = actionBarTitleLabel;
    //Set a delay that will trigger re-render of the ActionBar
    setTimeout(function(){
        page.actionBar.requestLayout(); //add new ActionItem can also trigger the same issue
    },2000); //This issue can be triggered even if the delay is just 10ms

Attached is js files for the basic app that you can use to reproduce this issue app.zip

[vchimev]

Hey Guys,

This issue has been addressed in the master branch as part of implementing more flexible composition and navigation with Frame, Page, and TabView.

The solution is available in tns-core-modules@next, the forthcoming official release is going to be 4.0.0.

[dhananjaykumar880]

I have found perfect solution with custom title. it is working with ios:horizontalAlignment="left"

<StackLayout *ngIf="config.title.isHomeTitle" orientation="horizontal" ios:horizontalAlignment="left" android:visibility="collapsed">
        <Image src="~/assets/icons/logo.png" class="action-image"></Image>
        <Label [text]="'application.title' | translate" class="action-bar-title"></Label>
    </StackLayout>