Nativescript: [Feature request] ActionBar in Modal page

[yclau]

I trying to add actionBar in Modal page , but i added actionBarHidden = false still no show out. Isn't no have actionBar in Modal page ?

<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onNavigatingTo"  actionBarHidden="false">  
<ActionBar class="action-bar">
            <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="onNavBtnTap"/>
            <ActionBar.titleView>
                <Label class="h3" id="title" color="#ffffff" />
            </ActionBar.titleView>
            <ActionBar.actionItems>               
                <ActionItem ios.position="right" tap="onAddNew">
                    <ActionItem.actionView>
                        <StackLayout>
                            <Label text="Save" paddingRight="15" color="white" fontSize="15" />
                        </StackLayout>
                    </ActionItem.actionView>
                </ActionItem>
            </ActionBar.actionItems> 
        </ActionBar>
</Page>

[tsonevn]

Hi @yclau,
Thank you for contacting us.
I reviewed your case, however, I found that showing an ActionBar inside the Modal Page is not supported.
Regarding that, I will mark this issue as a new feature and you could keep track on the issue for further info. If there is an interest for similar functionality, you could expect for some of the next NativeScript versions.

[yclau]

Hi @tsonevn,
Thank you to reply. Isn't possible add this feature in version 3.3 ?

[tsonevn]

Hi @yclau,
This request is still under review and I could not commit to the exact time when it will be available.

[venkateshsj]

Would love to see this feature in an upcoming release!

[manojdcoder]

@tsonevn Isn't this should be possible now with {N} 4.x?

[abhayastudios]

I am mostly interested in getting the ActionBar to work inside a modal because it will color the status bar as well which is especially important in my case on iPhoneX. In lieu of the ActionBar working inside a modal, is there a way to get set the color of a status bar? I tried to setting margin-top:-44, but this does not work either (in a modal at least).

@manojdcoder as far as I know, navigation inside a modal is now possible, but the ActionBar is still not working

@tsonevn I think this issue should be re-opened for the reason above

[manojdcoder]

@abhayastudios There is no direct api exposed to change the background color of status bar. But you can do that with a bit of native code Or simply use this plugin.

https://github.com/burkeholland/nativescript-statusbar

Note: iOS status bar is globally handled unlike Android, so you will have to take care of switch colors if you want to use different colors between your screens.

[abhayastudios]

@manojdcoder yeah I tried that plugin but it is not working inside a modal from what I can tell... Indeed maybe I'll have to do something native. Thanks for your reply :)

[drewcovi]

@tsonevn as @abhayastudios mentions above... it still seems you cannot have an actionbar in a modal unless you have modal navigation. is this a correct assessment?

[tsonevn]

Hi @drewcovi,
If you need to display an ActionBar inside the ModalView, you need to define a Frame inside the modal root and to specify the default page, that will be loaded. Check out the example here.

[drewcovi]

@tsonevn is there an equivalent example in angular world?

I'll take a dig into it!

[manojdcoder]

The documentation covers everything with links to sample project on Github.

[drewcovi]

Ah. Darn. Yes.

So would it be safe to say that in the nativescript angular world, you really cant have an actionbar unless you build up an entire navigation context?

Seems unfortunate that in order to get a singular UI element like that, you need to first load a root element and then navigate to that main view.

[drewcovi]

@madmas @tsonevn I was able to get 99% of the way there, but for some reason when the modal loads, it's simply an empty frame.

I have a root component that hosts the page-router-outlet and navigates to the child component on init.

The strange thing is the child component does console.log during 'onInit' so I'm fairly positive it's properly navigating and loading but just not rendering to

Have either of you seen this?

[tsonevn]

Hi @drewcovi,
Can you provide a sample project, which demonstrates the issue, you are facing?

[drewcovi]

@tsonevn absolutely. Just figured there might be an obvious "oh yeah, it wont render the view and fail silently when X is missing"

I also figured id try to find an angular version of this
https://github.com/NativeScript/modal-navigation-demo

I'm doing my best to re-create the demo code presented here: https://github.com/NativeScript/nativescript-angular/tree/master/e2e/modal-navigation-ng/app

And I'm on the latest nativescript-angular & nativescript

[drewcovi]

@tsonevn here's a playground link:
https://play.nativescript.org/?template=play-ng&id=8cVamP&v=6

If you can help me sort out why the modal content isnt loading I believe I'll be able to resolve matters from there.

[drewcovi]

@tsonevn disregard! I solved the issue. Evidently you can only load child routes within a page-router-outlet... this seems an odd limitation... perhaps a bug? I'll open a new issue.

[manojdcoder]

@drewcovi That's not a bug, that's how it's designed to be. This is very much similar to having nested router outlets in Angular.

[drewcovi]

@manojdcoder if so, then it seems strange that the onInit event still fires on the component and it fails silently but doesn't render the view.

[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.