Ionic native and a flashlight

Hi Friends,

Hope you are all doing good. Now, several readers of my site have been asking me to blog about ionic-native. For those who don’t know what Ionic-native is, its simply a collection of awesome stuff that could be used along with your Ionic 2 apps to enhance the capabilities of your app by utilizing the features of your phone. Eg. Camera, Flashlight, Geolocation etc.,

Ionic-native is still in development stage and the repo can be found here. In short its the successor to ngCordova.

Now, in this post I will be showing how to make a simple flashlight app using the cordova-plugin-flashlight. Okay let’s get started.

The complete code of this tutorial can be found here.

A screencast of this tutorial.

First, fire up an ionic 2 app using the below command.

Now we need to add the plugin and install ionic-native. This could be done by giving the 2 commands below.

In our app we will be having a fab button, which will act as the toggle switch for the flashlight. Open up home.html in Pages -> home directory and add the below code between the ion-content tags.

Now we have a button and a message showing whether the flashlight is on or off.

Open up home.js and add the below code.

Let’s break this down.

  1. We are importing the Flashlight component from ionic-native.
  2. Flashlight.available will return a boolean value corresponding to the availability of a flashight in the phone and Flashlight.toggle will toggle the light on/off.
  3. The counter is just to flip the message to be shown on the screen.

There is a method isSwitchedOn() which returns the current state of the flashlight. But for some reason I couldn’t get it to work. (See the video screencast to view my futile attempts). So I decided to put in place a simple counter.

That’s it. Now we have a simple app, that utilizes the flashlight of your phone. This code could be combined along with the camera or it could be made as a standalone flashlight app with some styling.

There are several other cool stuff in ionic-native that could enhance the awesomeness of your apps as well. I will be posting more stuff as I continue exploring the plugins.

If you would like me to blog about some topic kindly use the ask me page.

Hope you find this useful. Thanks for reading guys. Stay cool.. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • elango

    hai
    Nice tutorial iam getting error like this what should i do

    Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator