Gathering detailed insights and metrics for @ionic-native/screen-orientation
Gathering detailed insights and metrics for @ionic-native/screen-orientation
Gathering detailed insights and metrics for @ionic-native/screen-orientation
Gathering detailed insights and metrics for @ionic-native/screen-orientation
Native features for mobile apps built with Cordova/PhoneGap and open web technologies. Complete with TypeScript support.
npm install @ionic-native/screen-orientation
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
2,411 Stars
4,649 Commits
2,425 Forks
105 Watching
21 Branches
727 Contributors
Updated on 29 Nov 2024
Minified
Minified + Gzipped
TypeScript (98.73%)
JavaScript (0.82%)
HTML (0.44%)
Shell (0.01%)
Cumulative downloads
Total Downloads
Last day
-27.2%
589
Compared to previous day
Last week
-15.3%
3,749
Compared to previous week
Last month
-14.9%
16,461
Compared to previous month
Last year
-33.3%
324,064
Compared to previous year
1
2
Awesome Cordova Plugins is a curated set of wrappers for Cordova plugins that make adding any native functionality you need to your Ionic mobile app easy.
Awesome Cordova Plugins wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.
To learn more about the reasons why Ionic Native was renamed to Awesome Cordova Plugins, read the official Ionic blog post by Max Lyncht.
In addition to Cordova, Awesome Cordova Plugins also works with Capacitor, Ionic's official native runtime. Basic usage below. For complete details, see the Capacitor documentation.
Run following command to install Awesome Cordova Plugins in your project.
1npm install @awesome-cordova-plugins/core --save
You also need to install the Awesome Cordova Plugins package for each plugin you want to add. Please see the Awesome Cordova Plugins documentation for complete instructions on how to add and use the plugins.
For the full Awesome Cordova Plugins documentation, please visit https://ionicframework.com/docs/native/.
To use a plugin, import and add the plugin provider to your @NgModule
, and then inject it where you wish to use it.
Make sure to import the injectable class from the /ngx
directory as shown in the following examples:
1// app.module.ts 2import { Camera } from '@awesome-cordova-plugins/camera/ngx'; 3 4... 5 6@NgModule({ 7 ... 8 9 providers: [ 10 ... 11 Camera 12 ... 13 ] 14 ... 15}) 16export class AppModule { }
1import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx'; 2import { Platform } from 'ionic-angular'; 3 4@Component({ ... }) 5export class MyComponent { 6 7 constructor(private geolocation: Geolocation, private platform: Platform) { 8 9 this.platform.ready().then(() => { 10 11 // get position 12 this.geolocation.getCurrentPosition().then(pos => { 13 console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`) 14 }); 15 16 17 // watch position 18 const watch = geolocation.watchPosition().subscribe(pos => { 19 console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`) 20 }); 21 22 // to stop watching 23 watch.unsubscribe(); 24 }); 25 26 } 27 28}
React apps must use Capacitor to build native mobile apps. However, Awesome Cordova Plugins (and therefore, Cordova plugins) can still be used.
1# Install Core library (once per project) 2npm install @awesome-cordova-plugins/core 3 4# Install Awesome Cordova Plugins TypeScript wrapper 5npm install @awesome-cordova-plugins/barcode-scanner 6 7# Install Cordova plugin 8npm install phonegap-plugin-barcodescanner 9 10# Update native platform project(s) to include newly added plugin 11ionic cap sync
Import the plugin object then use its static methods:
1import { BarcodeScanner } from '@awesome-cordova-plugins/barcode-scanner'; 2 3const Tab1: React.FC = () => { 4 const openScanner = async () => { 5 const data = await BarcodeScanner.scan(); 6 console.log(`Barcode data: ${data.text}`); 7 }; 8 return ( 9 <IonPage> 10 <IonHeader> 11 <IonToolbar> 12 <IonTitle>Tab 1</IonTitle> 13 </IonToolbar> 14 </IonHeader> 15 <IonContent> 16 <IonButton onClick={openScanner}>Scan barcode</IonButton> 17 </IonContent> 18 </IonPage> 19 ); 20};
These modules can work in any ES2015+/TypeScript app (including Angular/Ionic apps). To use any plugin, import the class from the appropriate package, and use it's static methods.
1import { Camera } from '@awesome-cordova-plugins/camera'; 2 3document.addEventListener('deviceready', () => { 4 Camera.getPicture() 5 .then((data) => console.log('Took a picture!', data)) 6 .catch((e) => console.log('Error occurred while taking a picture', e)); 7});
Awesome Cordova Plugins generates an AngularJS module in runtime and prepares a service for each plugin. To use the plugins in your AngularJS app:
index.html
before your app's code.ionic.native
module in your app.$cordova
prefix.1angular.module('myApp', ['ionic.native']).controller('MyPageController', function ($cordovaCamera) { 2 $cordovaCamera.getPicture().then( 3 function (data) { 4 console.log('Took a picture!', data); 5 }, 6 function (err) { 7 console.log('Error occurred while taking a picture', err); 8 } 9 ); 10});
To use Awesome Cordova Plugins in any other setup:
index.html
before your app's code.IonicNative
variable.1document.addEventListener('deviceready', function () { 2 IonicNative.Camera.getPicture().then( 3 function (data) { 4 console.log('Took a picture!', data); 5 }, 6 function (err) { 7 console.log('Error occurred while taking a picture', err); 8 } 9 ); 10});
Awesome Cordova Plugins makes it possible to mock plugins and develop nearly the entirety of your app in the browser or in ionic serve
.
To do this, you need to provide a mock implementation of the plugins you wish to use. Here's an example of mocking the Camera
plugin to return a stock image while in development:
First import the Camera
class in your src/app/app.module.ts
file:
1import { Camera } from '@awesome-cordova-plugins/camera/ngx';
Then create a new class that extends the Camera
class with a mock implementation:
1class CameraMock extends Camera { 2 getPicture(options) { 3 return new Promise((resolve, reject) => { 4 resolve('BASE_64_ENCODED_DATA_GOES_HERE'); 5 }); 6 } 7}
Finally, override the previous Camera
class in your providers
for this module:
1providers: [{ provide: Camera, useClass: CameraMock }];
Here's the full example:
1import { ErrorHandler, NgModule } from '@angular/core'; 2import { BrowserModule } from '@angular/platform-browser'; 3import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 4import { MyApp } from './app.component'; 5import { HomePage } from '../pages/home/home'; 6 7import { Camera } from '@awesome-cordova-plugins/camera/ngx'; 8 9import { HomePage } from '../pages/home/home'; 10import { MyApp } from './app.component'; 11 12class CameraMock extends Camera { 13 getPicture(options) { 14 return new Promise((resolve, reject) => { 15 resolve('BASE_64_ENCODED_DATA_GOES_HERE'); 16 }); 17 } 18} 19 20@NgModule({ 21 declarations: [MyApp, HomePage], 22 imports: [BrowserModule, IonicModule.forRoot(MyApp)], 23 bootstrap: [IonicApp], 24 entryComponents: [MyApp, HomePage], 25 providers: [ 26 { provide: ErrorHandler, useClass: IonicErrorHandler }, 27 { provide: Camera, useClass: CameraMock }, 28 ], 29}) 30export class AppModule {}
Spent way too long diagnosing an issue only to realize a plugin wasn't firing or installed? Awesome Cordova Plugins lets you know what the issue is and how you can resolve it.
Let us know or submit a PR! Take a look at the Developer Guide for more on how to contribute. :heart:
Ibby Hadeed - @ihadeed
Daniel Sogl - @sogldaniel
Tim Lancina - @timlancina
Mike Hartington - @mhartington
Max Lynch - @maxlynch
Rob Wormald - @robwormald
No vulnerabilities found.
No security vulnerabilities found.