Description
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
- CLI: 8.0.1
- Android Runtime:8.0.0
- iOS Runtime:8.0.0
- XCode Version:12.5.1
Describe the bug
I have a custom ActionBar in my app that uses a Label as the title so I can customize the font size and font family. Then I have ActionItems on both sides of the Label on ActionBar for different functions. On Android they look fine as ActionItems are actually placed right next to the edge of the screen, but on iOS looks like they are placed in the center of each side, which looks unpleaseant. What can I do to make them closer to edges of screen? Thanks.
Screenshot on Android emulator:
Screenshot on iOS simulator:
And here's code for my custom ActionBar:
<ActionBar (loaded)="onLoaded()" flat="true" [class.android-gradient]="inAndroid" [class.ios-background]="inIOS">
<NavigationButton *ngIf="inAndroid && canGoBack" (tap)="onGoBack()" icon="~/assets/images/icons/back.png"></NavigationButton>
<!-- We can only use ActionItem for back button on iOS since the actual back button doesn't support action override -->
<ActionItem *ngIf="inIOS && canGoBack" (tap)="onGoBack()" ios.position="left" icon="~/assets/images/icons/back.png">
</ActionItem>
<!-- On iOS we need this invisible image to prevent the title from getting pushed to left side -->
<ActionItem *ngIf="inIOS && !canGoBack" ios.position="left" icon="~/assets/images/icons/back_invisible.png">
</ActionItem>
<!-- ActionBar title font and position cannot be changed, so we'll use a Label instead -->
<StackLayout orientation="horizontal" horizontalAlignment="center">
<Label *ngIf="screenWidth >= 375" [text]="title" fontSize="22" color="#FFFFFF" verticalAlignment="center" height="50"></Label>
<Label *ngIf="screenWidth < 375" [text]="title" fontSize="22" color="#FFFFFF" verticalAlignment="center" height="50" width="120"></Label>
</StackLayout>
<!-- ActionBar right-most button to switch region -->
<!-- Android -->
<ng-container [ngSwitch]="region" *ngIf="inAndroid">
<ActionItem *ngSwitchCase="'EU'" ios.position="right" (tap)="onSwitchRegion($event)" class="circular" icon="~/assets/images/icons/Region_EU.png">
</ActionItem>
<ActionItem *ngSwitchCase="'US'" ios.position="right" (tap)="onSwitchRegion($event)" class="circular" icon="~/assets/images/icons/Region_US.png">
</ActionItem>
<ActionItem *ngSwitchDefault ios.position="right" (tap)="onSwitchRegion($event)" class="circular" icon="~/assets/images/icons/Region_NULL.png">
</ActionItem>
</ng-container>
<!-- iOS -->
<ng-container [ngSwitch]="region" *ngIf="inIOS">
<ActionItem *ngSwitchCase="'EU'" ios.position="right" (tap)="onSwitchRegion($event)" class="circular" icon="~/assets/images/icons/Region_EU_iOS.png">
</ActionItem>
<ActionItem *ngSwitchCase="'US'" ios.position="right" (tap)="onSwitchRegion($event)" class="circular" icon="~/assets/images/icons/Region_US_iOS.png">
</ActionItem>
<ActionItem *ngSwitchDefault ios.position="right" (tap)="onSwitchRegion($event)" class="circular" icon="~/assets/images/icons/Region_NULL_iOS.png">
</ActionItem>
</ng-container>
<!-- This allows content from external pages to be placed in this component -->
<ng-content></ng-content>
</ActionBar>