[iOS] Custom ActionBar and rotation

ios

#1

Hello,
I was testing the custom title view example written here:

https://docs.nativescript.org/angular/ui/action-bar#using-a-custom-title-view

If I take it as it is it works (even if the title attribute in the ActionBar is not needed) but if you put stretch="none" to the image or if I remove the image completely, it is shown correctly when the view is opened but on rotation the text goes on the right, and stays there even if I rotate the phone back in portrait.

This is the sample code:

<ActionBar>
    <StackLayout orientation="horizontal"
                 ios:horizontalAlignment="center"
                 android:horizontalAlignment="left">
        <Label text="NativeScript"  class="action-label"></Label>
    </StackLayout>
</ActionBar>

First run:

Rotate:

Rotate back:

It looks like a bug, any idea?

Thanks,
Dem


#2

This seems working fine for me.

iOS 9.3.5


#3

Hello,
thanks for the playground :smile:

It’s doing the same problem on my iPhone X with iOS 11.2.5:

Not sure about version 10, but I’m not even supporting iOS 9 anymore…

Looks like a problem with the new versions…

Cheers,
Dem


#4

Unfortunately, I don’t have new devices so I am unable to test. Maybe someone else could check on this, and if it’s an issue, you could file a bug report.


#5

Thanks, I think I will

Dem


#6

I have a similar problem in one of my apps.
Where, when the user visits that page for the first time. The action bar title comes on the right side, instead of center. On iOS. I’m using a custom view as well.

And if user re-opens the app, the text comes in the center.

I’ve restricted orientation to portrait for that app though.


#7

Re-assigning the titleView on orientation change could be a hot fix here.

application.on(application.onOrientationChangeEvent, () => {
  const currentPage = frame.topmost().currentPage;
  if (currentPage) {
    const titleView = currentPage.actionBar.titleView;
    currentPage.actionBar.titleView = null;
    currentPage.actionBar.titleView = titleView;
 }
});

#8

Hello,
thanks, unfortunately this is not working for me, I had to adjust the code to this one:

constructor(private page: Page) {
        var application = require("application");
        application.on("orientationChanged", () => {
            if (page && page.actionBar) {
                const titleView = page.actionBar.titleView;
                page.actionBar.titleView = null;
                page.actionBar.titleView = titleView;
            }
        });
}

But it’s still having the problem, I’m going to open an issue on GitHub

Thanks,
Dem


#9

Of course when you are using Angular, just my snippet was written keeping TypeScript in mind. Glad it helped in a way.


#10

Opened a github issue: https://github.com/NativeScript/NativeScript/issues/5453

Thanks,
Dem