Nativescript: Ability to customize showModal() transitions

Created on 2 Sep 2018  路  7Comments  路  Source: NativeScript/NativeScript

There are only animated argument of showModal method. Also animation on Android don't work (https://github.com/NativeScript/NativeScript/issues/5989).
In some cases I need overlap transition from bottom, in other cases I need overlap transition from right.
If you don't want to fix the bug https://github.com/NativeScript/NativeScript/issues/5989, may be it will be more common solution to add ability to implement custom transition for showModal, like it's done for page transitions.


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

feature

Most helpful comment

// set the animations to use on showing and hiding the dialog
window_1.setWindowAnimations(android.R.style.Animation_Dialog);

putting this in the core-modules for view.android.js here

will apply the current device/sdk default Animation_Dialog style to modals. Which will animate them as the default.

@NickIliev @tsonevn - do you think this is suitable for now to at least fix the bug with no animations on the modals for android? If so, I'll be happy to provide a PR with this.

Ideally, long term, being able to customize the modal transition is ideal. I can probably help on android side of things there, but iOS would require some more thinking/work from myself.

All 7 comments

I think showModal() should have same interface as navigate() (NavigationEntry). It's possible to set context and bindingContext when do navigate(), but it's not possible to set bindingContext, when do showModal().

@webleaf not sure I understand?

Setting bindingContext from navigate();

 exports.onNavigatingTo = args => {
    const page = args.object;
    page.bindingContext = page.navigationContext
}

Setting bindingContext from showModal();

exports.onShowingModally = args => {
    const modal = args.object;
    modal.bindingContext = modal.context;
}

@mudlabs setting bindingContext from navigate():

someFrame.navigate({
    moduleName: "path/to/your/page"
    bindingContext: myObservable,
    context: otherContext,
})

You can provide NavigationEntry interface to navigate() method. So If you use onNavigatingTo only for set page.bindingContext, you can avoid it.
Other use case is avoiding to use code-behind file at all. That's what I do in my project.

@webleaf nice I hadn't realised you could do that.

I second this request. We need eye candy to make real consumer facing apps. Not everybody's making corporate stuff.

// set the animations to use on showing and hiding the dialog
window_1.setWindowAnimations(android.R.style.Animation_Dialog);

putting this in the core-modules for view.android.js here

will apply the current device/sdk default Animation_Dialog style to modals. Which will animate them as the default.

@NickIliev @tsonevn - do you think this is suitable for now to at least fix the bug with no animations on the modals for android? If so, I'll be happy to provide a PR with this.

Ideally, long term, being able to customize the modal transition is ideal. I can probably help on android side of things there, but iOS would require some more thinking/work from myself.

This would be amazing!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Pourya8366 picture Pourya8366  路  3Comments

fmmsilva picture fmmsilva  路  3Comments

guillaume-roy picture guillaume-roy  路  3Comments

dhanalakshmitawwa picture dhanalakshmitawwa  路  3Comments

vtisnado picture vtisnado  路  3Comments