Nativescript: Action bar for first screen in ios not visible

[Habeeb-mohamed]

Action bar for first screen in ios not visible, But it is working fine in Android

Steps to reproduce

1. I created new project, added ios, android platform
2. Replaced with the following code in app.component.html

<StackLayout>
    <ActionBar class="actionBar" title="Home">
        <image src="res://ic_menu" stretch="none" ios.position="left" ></image>
    </ActionBar>
    <Label text="Tap the button" class="title"></Label>

    <Button text="TAP" (tap)="onTap()"></Button>

    <Label [text]="message" class="message" textWrap="true"></Label>
</StackLayout>

1. Added images(ic_menu.png) for 1x,2x,3x in app/app_resources/ios and android
2. tns run ios and also android

In android the title, menu icon is visible, but in ios i have place holder but empty.

tns info

│ Component │ Current version │ Latest version │ Information │
│ nativescript │ 2.3.0 │ 2.3.0 │ Up to date │
│ tns-core-modules │ 2.3.0 │ 2.3.0 │ Up to date │
│ tns-android │ 2.3.0 │ 2.3.0 │ Up to date │
│ tns-ios │ 2.3.0 │ 2.3.0 │ Up to date │

os : OS X 10.11.16
xcode : 7.3.1

Thanks in advance

[tsonevn]

Hi @Habeeb-mohamed,
Could you check, whether you have add the icons in app/App_Resources/iOS folder. I checked the given scenario, however I was unable to reproduce problem with loading the Image from resource in iOS. For your convenience I am attaching sample project - https://github.com/tsonevn/NSiOSResImage

I hope this helps

[Habeeb-mohamed]

Thanks for the reply, to move the image to left i used the below code.

    <ActionBar class="actionBar" title="Home">
        <image src="res://icon" stretch="none" ios.position="left" ></image>
    </ActionBar>

ios.position="left" is not working and it shown on top of the title. So title became invisible.

But now i am able to see the image.

Even i tried the below

  <ActionBar class="actionBar" title="Home">
    <NavigationButton icon="res://ic_menu" ios.position="left" android.position="left"></NavigationButton>
  </ActionBar>

In IOS i am able to see only the title not the menu
But in android i am able to see both.

[tsonevn]

Hi @Habeeb-mohamed,
Image component do not have position property as you could see here in the documentation and will not be applied. As a solution you could use GridLayout, where you could setup the row and col to the components inside the layout.
Example:

<ActionBar class="actionBar"  title="Home">
    <StackLayout orientation="horizontal"
    ios:horizontalAlignment="center"
    android:horizontalAlignment="left">
            <GridLayout style="padding:5;" rows="*" columns="30 *" >
                <image  row="0" col="0" src="res://icon" stretch="none" ></image>
                <Label  row="0" col="1" text="Sample title" textWrap="true"></Label>
            </GridLayout>
    </StackLayout>
    </ActionBar>

[Habeeb-mohamed]

I tried that with below edit also
<GridLayout rows="*" columns="30,*" >

it looks as below

[tsonevn]

Hi @Habeeb-mohamed,
To be able to set the Image in the left corner, You should first add StackLayout as a parent container for the GridLayout. This will allow the GridLayout to be with width 100%. You could review the updated code snippet in the previous answer.

Regards,
@tsonevn

[Habeeb-mohamed]

Hi @tsonevn,
Now it is working fine.

Is there anything wrong in having NavigationButton/Image inside ActionBar in ios on the first screen.
For instance, I had two screen which is navigable with side drawer. I had page-router-outlet,routing to navigate between pages. I had the below code for actionbar

<RadSideDrawer>
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <StackLayout class="sideStackLayout">
            <Label text="Home" [nsRouterLink]="['/home']" class="sideLabel "></Label>
            <Label text="Stock" [nsRouterLink]="['/stock']" class="sideLabel"></Label>
        </StackLayout>
    </StackLayout>
    <StackLayout tkMainContent>
        <ActionBar class="actionBar" title="Home">
            <image icon="res://ic_menu" stretch="none" (tap)="openDrawer()"></image>
        </ActionBar>
        <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
    </StackLayout>
</RadSideDrawer>

Same code for both pages only difference is title of actionbar. If is set default route to home. Image moved to center, So unable to see the title. Anyway i can see the side drawer by swiping from left side to right and i can navigate to stock. In Stock Page i am able to see the image,title properly. If i set the default route to Stock, I am able to see the Home Page title, But not Stock Page

Am i doing anything wrong?

[tsonevn]

Hi @Habeeb-mohamed,

I reviewed the given code snippet. I case you would like to use custom title view for the ActionBar you should add Label, where you will set the Title, as it is described in the docs and as it has been shown in my example above. The case with setting up the title attribute of the ActionBar will work only if you use the default ActionBar style.

Example

<RadSideDrawer>
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <StackLayout class="sideStackLayout">
            <Label text="Home" [nsRouterLink]="['/home']" class="sideLabel "></Label>
            <Label text="Stock" [nsRouterLink]="['/stock']" class="sideLabel"></Label>
        </StackLayout>
    </StackLayout>
    <StackLayout tkMainContent>
        <ActionBar class="actionBar" title="Home">
          <StackLayout orientation="horizontal"
    ios:horizontalAlignment="center"
    android:horizontalAlignment="left">
            <GridLayout style="padding:5;" rows="*" columns="20 *" >
                <image  row="0" col="0" src="res://ic_menu" stretch="none" ></image>
                <Label  row="0" col="1" text="Home" textWrap="true"></Label>
            </GridLayout>
    </StackLayout>
    </ActionBar>
        <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
    </StackLayout>
</RadSideDrawer>

[Habeeb-mohamed]

Hi @tsonevn ,

It works pretty good 👍

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.