Style of action-sheet

[schetti46]

First of all, thanks for this plugin. It saves to me a lot of time! Sorry if it's already asked, but I cannot find anything similar in previous issues.

This is my implementation of the plugin:

launchNav(){
        let options: LaunchNavigatorOptions = {
        };

        this.launchnavigator.availableApps();
        this.launchnavigator.navigate('Toronto, ON', options)
            .then(
            success => console.log('Launched navigator'),
            error => console.log('Error launching navigator', error)
        );    
    }

Everything works fine, and I can open googleMaps and other apps easily 👍 But as you can see into the screenshot, style of action-sheet is really old.. And not the "material-design" one of android 7+

Wrong

Correct

I see that Cordova-action-sheet implement this graphics, but ionic action-sheet are pretty better and coherent with material design. (I added also a screenshot of ionic action-sheet)

Any advice? I really want to use this plugin because fits perfectly with my purpose, but with graphics of second screenshot.

[dpa99c]

The default cordova-plugin-actionsheet UI is just provided as an easy, out-of-the-box way of using the plugin.

However, the plugin exposes API functions to allow you to create a custom UI however you want (another UI plugin or HTML). You can see a basic example of how this is possible in the AdvancedExample in the example project.

You can use:

• getAppsForPlatform() to return a list of supported apps for the specified platform
• availableApps() to return a list of those apps which are available on the current device
• getAppDisplayName() to get the display name of a given app

That should be enough to create your own UI to choose an app. You then pass the user's choice to navigate() as the options.app parameter.

[schetti46]

Thanks for the really quick reply.

Yeah, I understood correctly the usage of this plugin. In fact, I try to show various options retrieved by availableApps() function. More precisely, I used this piece of code founded in your (great) documentation:

this.launchnavigator.availableApps(function(results){
  for(var app in results){
    console.log(this.launchnavigator.getAppDisplayName(app) + (results[app] ? " is" : " isn't") +" available");
  }
});

But this is the error I get:

Sadly, I don't know how to proceed

[dpa99c]

While your code is perfectly valid Javascript, you're using Typescript so you must strictly adhere to the type definitions for the functions. The type def for availableApps() declares that success and error functions must be supplied, but you're only supplying success. So you should try something like:

this.launchnavigator.availableApps(function(results){
  for(var app in results){
    console.log(this.launchnavigator.getAppDisplayName(app) + (results[app] ? " is" : " isn't") +" available");
  }
}, function(error){
    console.error("Error: "+error);
});

Since you're using Ionic, you could also use the Ionic native LaunchNavigator wrapper for this plugin which provides its own type definitions.

[schetti46]

Thanks for pointing out this matter. Btw, I'm not really an expert of Typescript, and I didn't think about this. For now it seems that, also with your implementation (with "error" supplying), I get the same Typescript error. Anyway, I'll try to investigate and also to use Ionic wrapper!

Mark as solved Thanks for helps 😄

[schetti46]

In case someone needs helps regarding this issue, I found a solution that work for me. Since you cannot pass a method function as a regular function because it requires the instance for the class as context, I coded the function like this:

this.launchnavigator.availableApps().then(
            success => {for(var app in success){
                console.log(this.launchnavigator.getAppDisplayName(app) + (success[app] ? " is" : " isn't") +" available");
                }
            },
            error => console.log('Error ', error)
);

This is valid Typescript for my current version of Angular.