Ionic 3 Torch /Flashlight Tutorial – Using Backlight Plugin Ionic Native 3.x

In this post, we will create Flashlight/ Torch app in Ionic 3 version using Ionic Native plugin Flashlight, the application will have a switch button to on/ off camera flashlight which can be used as a torch.

Let’s start…

Our complete app will look like this

Create an Ionic 3 App

$ ionic start Ionic3FlashLight blank
$ cd Ionic3FlashLight

Install FlashLight plugin in Application

$ ionic cordova plugin add cordova-plugin-flashlight
$ npm install --save @ionic-native/flashlight

Add this plugin in app’s module

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Flashlight } from '@ionic-native/flashlight';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Flashlight,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Add On/Off HTML buttons in home.html

<ion-content padding>

  <div class="on-button" *ngIf="!isOn" (click)="onTorch()"></div>
  <div class="off-button" *ngIf="isOn" (click)="offTorch()"></div>

</ion-content>

In home.ts add onTorch and offTorch events

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Flashlight } from '@ionic-native/flashlight';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  isOn = false;
  constructor(public navCtrl: NavController,private flashlight: Flashlight) {

  }

  onTorch(){
    if(this.flashlight.available()){
      this.isOn = false;
      this.flashlight.switchOn();
    }else{
      alert("Flashlight Not Available");
    }
  }
  offTorch(){
    this.isOn = true;
    this.flashlight.switchOff();
  }


}

Add some style for custom background and button styles in home.scss

page-home {
    
    ion-content{
         background-image: url("../../assets/imgs/hd-background.jpg");
         background-size: cover;
    }    
    .on-button{
        background-image: url(../../assets/imgs/on.png);
        background-size: contain;
        background-position: 50% 2%;
        height: 41%;
        /* width: 50%; */
        background-repeat: no-repeat;
        margin: auto;
        margin-top: 30%;
    }
    .off-button{
        background-image: url(../../assets/imgs/off.png);
        background-size: contain;
        background-position: 50% 2%;
        height: 41%;
        /* width: 50%; */
        background-repeat: no-repeat;
        margin: auto;
        margin-top: 30%;
    }
}

Now your app in a real device to check.

Find source code on GitHub here