diff --git a/README.md b/README.md index f75a1947c..e45b2689b 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,10 @@ Ionic Native is a curated set of wrappers for Cordova plugins that make adding a Ionic Native 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. +## Capacitor Support + +In addition to Cordova, Ionic Native also works with [Capacitor](https://capacitor.ionicframework.com), Ionic's official native runtime. Basic usage below. For complete details, [see the Capacitor documentation](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins). + ## Installation Run following command to install Ionic Native in your project. @@ -76,6 +80,49 @@ export class MyComponent { } ``` +#### Ionic/React apps + +React apps must use Capacitor to build native mobile apps. However, Ionic Native (and therefore, Cordova plugins) can still be used. + +```bash +# Install Core library (once per project) +npm install @ionic-native/core + +# Install Ionic Native TypeScript wrapper +npm install @ionic-native/barcode-scanner + +# Install Cordova plugin +npm install phonegap-plugin-barcodescanner + +# Update native platform project(s) to include newly added plugin +ionic cap sync +``` + +Import the plugin object then use its static methods: + +```typescript +import { BarcodeScanner } from '@ionic-native/barcode-scanner'; + +const Tab1: React.FC = () => { + const openScanner = async () => { + const data = await BarcodeScanner.scan(); + console.log(`Barcode data: ${data.text}`); + }; + return ( + + + + Tab 1 + + + + Scan barcode + + + ); +}; +``` + #### ES2015+/TypeScript 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. ```js