-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
iOS modals should be able to show action bar #1130
Comments
Same as android |
anything new ? still can't show the actionbar in modal dialogs |
Any updates on this one, guys? The native iOS experience of Settings > Maps > Transit seems like an use case that I would address with modal pages (on Android the native experience is modal dialog) and it has the action bar with title and back button by default: |
@rclai , @danieloprado , @ryanzaatari , @manoldonev This feature is planned for NativeScript 3.2 as logged in our Roadmap page (navigation in modal pages) |
hello guys, any update on that? |
Has then been released yet? As i still am unable to view an actionBar on a Modal page |
I think this will be available with NativeScript 4.0 which will be available in April 2018 according to the current plan. |
This should be possible now with 4.x, shouldn't this be closed now? |
Doesn't seem to be added in TNS 4.x. I've upgraded a project to 4.1 and still actionbar is hidden in the modal (iOS) |
This is possible with the flexible frame composition feature introduced in 4.x. Basically the trick is that you need frame as a modal root for this to work on iOS: home/home-page.xml <Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<GridLayout>
<Button text="Show Modal" tap="onModalTap" />
</GridLayout>
</Page> home/home-page.ts import { Button } from "ui/button";
import { Frame } from "ui/frame/frame";
export function onModalTap(args) {
const frame = new Frame();
frame.navigate("home/second-page");
const buttonOwner = <Button>args.object;
buttonOwner.showModal(frame, {}, (result) => console.log(`modal close: ${result}`));
} home/second-page.xml <Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Second Page"></Label>
</ActionBar>
<GridLayout>
<Button text="Close Modal" tap="onCloseTap" />
</GridLayout>
</Page> home/second-page.ts import { Button } from "ui/button/button";
export function onCloseTap(args) {
const buttonOwner = <Button>args.object;
buttonOwner.closeModal("with result");
} |
@manoldonev , I think this should be exposed as a core module function (like we have |
I mostly work with Angular and I'm sure there is a complete example attached in the docs. There seems to be something explained in the core docs too. When Frame is the root of modal, using an ActionBar is just as same as what we do in normal pages. |
@manojdcoder , well I mostly use clean NS, so I haven't looked at the NG docs 😀 But in the core NS docs this is described very vague at best. It mentions only if you want to do navigation inside modals. In my case I don't want navigation, I just want the |
@PeterStaev Yes, that is a valid point and it's not only limited to Modal, if you define a View / Layout instead of a Frame at root level, then you can not have a ActionBar even there. May be the docs could make it more clear that Page & ActionBar components are valid only inside a Frame. |
@tsonevn Can we describe this scenario explicitly in the core docs? |
@PeterStaev not sure about the optional parameter in this case -- I think we will hide too much internal implementation details behind a single flag (the code above) and it will work like magic... till it doesn't e.g. if you set this flag we will have to create a frame for you but you might try to open another frame as root of your modal and nested frames are currently not supported. |
@manoldonev I won't agree with you on this one. Like you said, the user has to repeat all those lines of code in case they need to show action bar or use navigation inside a modal. Imagine 100 apps with 100 modals. I deffo don't want to repeat that code over and over again. I would prefer things to work like magic 😄 As for the problem of passing a frame instance - this can easily be avoided by adding a simple check here: NativeScript/tns-core-modules/ui/core/view/view-common.ts Lines 228 to 229 in 0fc1547
Actually since having a frame inside the modal brings only pros and there are no cons, I even think this should be the default behavior. Anyways, final decision is yours, but if that doesn't make it in the core modules, I would definitely create a plugin wrapping those 4 lines of code 😀 |
I agree with @PeterStaev on this one. In the meantime, I'll wrap that logic up as a FramedModal type. At the very least, it would be good to add this point to the NS doc page for Modals (or a more general page about views, with an out-link on the Modal page since it seems like it might be a common case). |
@PeterStaev @nickcabral I think the reason we decided this cannot be the default behavior is due to breaking change considerations. If we automatically created a I think what is not clearly communicated is that the I think the bottom line is that with 4.x the framework works less like magic, but lets you do more navigational patterns. This was an intentional trade off was made based on feedback. |
Thanks for the clarifications @MartoYankov . Since there is a performance hit when using a framed modal instead of a normal one, as well as the navigation callback removal, I think adding a separate method would be 💯 |
Here is the function I added in my apps so I can have the export function showFramedModal(
parent: View,
moduleName: string,
context?: any,
closeCallback?: (context?: any) => void,
fullscreen: boolean = false,
animated: boolean = true,
) {
const fr = new frame.Frame();
let view: View;
fr.navigate({
create: () => {
view = createViewFromEntry({ moduleName });
return view;
},
context,
});
const pipeModalEvents = (args) => view.notify(args);
fr.on(View.shownModallyEvent, pipeModalEvents);
fr.on(View.showingModallyEvent, pipeModalEvents);
const frameCloseCallback = (returnContext?: any) => {
fr.off(View.shownModallyEvent, pipeModalEvents);
fr.off(View.showingModallyEvent, pipeModalEvents);
closeCallback.call(undefined, returnContext);
};
parent.showModal(fr, context, frameCloseCallback, fullscreen, animated);
} |
Is there any example of how to present a framed modal using Angular? The docs don't seem to cover this well. |
It's covered here along with a Github example. |
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. |
Right now, even though I'm showing a page with the action bar tags, the action bar is hidden.
The text was updated successfully, but these errors were encountered: