NativeScript: Missing touch-effect on Android and iOS when creating custom ActionItem with a Font icon

Please, provide the details below:

When you create a custom ActionItem using the actionView property, the ActionItem is loosing its native touch-behaviour (the ripple effect on tap and the Toast on longpress for Android and also the native touch effect for iOS).

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes, there is already an issue for Labels loosing their ripple effect: https://github.com/NativeScript/NativeScript/issues/1778 It is also suggested there, that any layout container (StackLayout, GridLayout,…) should animate the ripple effect on Android and the native touch effect on iOS and that this should be extended to any touchable view inside the container. This should also be referred to any custom actionView within the ActionBar.

Which platform(s) does your issue occur on?

Android and iOS

Please provide the following version numbers that your issue occurs with:

CLI: 2.4.2
Cross-platform modules: 2.4.4
Runtime(s): 2.4.1
Plugin(s): -

Please tell us how to recreate the issue in as much detail as possible.

In the following snippet I created an ActionBar with one ‘default’ ActionItem (using an Icon drawable resource) and a custom ActionItem using a FontAwesome icon, so that you can compare the behaviour between both approaches.

<ActionBar title="Index">
    <ActionBar.actionItems>

        <!-- Icon using image resource -->
        <ActionItem text="Default ActionItem" position="right" icon="res://reply" />

        <!-- Icon using custom ActionView -->
        <ActionItem text="Custom ActionItem" position="right">
            <ActionItem.actionView>
                <Label text="&#xf112;" cssClass="actionItemIcon" />
            </ActionItem.actionView>
        </ActionItem>

    </ActionBar.actionItems>
</ActionBar>

The result is demonstrated in the following GIF: https://cdn-standard3.discourse.org/uploads/nativescript/original/1X/1de78f1463038d85be78daba01b60fd09d5a3894.gif

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 15 (10 by maintainers)

Most upvoted comments

@felix-idf I see your point - will reopen this issue and mark it as a Type:Feature and it will be discussed internally as well.

NickIliev on Feb 2, 2017

Is there really no way for a future NativeScript release, not to remove the default touch effect by using an actionView? I try to avoid installing another plugin, just to get back a native behaviour that should actually exist by default.

felixkrautschuk on Feb 1, 2017

@NickIliev Then it would be great to be able to choose between inheriting the default effect or overriding it. @bradmartin suggested a similar thing for Labels (or any other touchable view) here: https://github.com/NativeScript/NativeScript/issues/1778#issuecomment-197350438

And as I already explained at http://forum.nativescript.org/t/actionbar-actionitems-using-icon-fonts/359/9, I want to keep the default effect. The only reason why I use the custom actionView is that I don’t want the icon of the ActionItem to be an image resource. It should be a Font icon (e.g. FontAwesome like in the sample above), because then it is easier to change the color (as an example) from CSS than creating multiple variations of each image resource.

felixkrautschuk on Feb 2, 2017

@Felix-idf it’s a general issue with NativeScript, if you add a background-image on a button you also loose the native ripple on android. And I completely agree with you that it shouldn’t be necessary to install a plug-in to get it back.

m-abs on Feb 1, 2017