CODEWITHSUNDEEP
iosvue.jsnativescriptnativescript-vue
n19htz
n19htz

Reputation: 166

Nativescript-vue native iOS Navigation button disappears after setting title on ActionBar

When I use just plain ActionBar:

<ActionBar/>

when I changing route with:

this.$navigateTo(Catalog)

the native ios Back button appears normally, but when I change action-bar like this:

<ActionBar title="some title"/>

or put other elements inside action-bar like this:

<ActionBar>
    <NavigationButton text="Go back" android.systemIcon="ic_menu_back" @tap="goBack" />
<ActionBar/>

the default native ios Back button disappearing.

What I need in the end is default ios action-bar with custom title and native ios back button that appears when I navigate between components. Please help, thanks in advance!

Upvotes: 0

Views: 954

Answers (2)

n19htz
n19htz

Reputation: 166

Solved my problem. I was using ActionBar in my main component(where tabs where defined). Instead, I removed it from my main component and added its own ActionBar for every component. That solved the problem. Now the default ios back-button displaying properly with any other combinations of params or nested elements and it doesn't matter wether you route to frame of same component or not.

Upvotes: 2

Manoj
Manoj

Reputation: 21908

I'm unable to reproduce the issue on my end, the NavigationButton is still visible when I use the exact code snippet above, tested with iOS v12.1.4. Please share the Playground sample if you still have the issue on your end.

However, you will not be able to modify the tap handler on iOS as mentioned in the docs.

In iOS, the back button is used explicitly for navigation. It navigates to the previous page and you cannot handle the tap event to override this behavior.

If you want to place a button on the left side of the ActionBar and handle the tap event (e.g., show slide-out), you can use ActionItem with ios.position="left".

Upvotes: 0

Related Questions