Skip to content

Commit d4dc1d6

Browse files
dotNetkowdotNetkow
authored
feat(native): Add React usage details (ionic-team#1238)
1 parent e6933b1 commit d4dc1d6

2 files changed

Lines changed: 77 additions & 5 deletions

File tree

‎src/components/page/templates/native.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ const renderUsage = (usage: any) => {
156156
<h2 id="usage">
157157
<a href="#usage">Usage</a>
158158
</h2>
159+
<p><strong>Using React?</strong> <stencil-route-link url={`/docs/native/community#react`}>See here.</stencil-route-link></p>
159160
{toHypertext(h, usage)}
160161
</section>
161162
);

‎src/pages/native/community.md‎

Lines changed: 76 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,57 @@ tableOfContents: false
55

66
Community Plugins are a collection of open source Cordova plugins that make it easy to add native functionality to any Ionic app.
77

8-
Community Plugins are submitted and maintained by the Ionic community. While community members are generally quick to find and fix issues, certain plugins may not function properly. For teams that require dedicated native plugin support, please explore Ionic Native and request a free trial.
8+
Community Plugins are submitted and maintained by the Ionic community. While community members are generally quick to find and fix issues, certain plugins may not function properly. For teams that require dedicated native plugin support, please explore Ionic Native then [request a free trial](https://ionicframework.com/enterprise/contact).
99

1010
> Note: These docs are for apps built with Ionic Framework 4.0.0 and greater. For older Ionic v3 projects, please [see here](/docs/v3/native).
1111
1212
## Capacitor Support
1313

14-
Ionic Native also works with [Capacitor](https://capacitor.ionicframework.com), Ionic's official native runtime. For details, [see the Capacitor documentation](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins).
14+
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).
1515

1616
## Usage
1717
All plugins have two components - the native code (Cordova) and the TypeScript code (Ionic Native).
1818
Cordova plugins are also wrapped in a `Promise` or `Observable` in order to provide a common plugin interface and modernized development approach.
1919

2020
Using the [Camera plugin](/docs/native/camera) as an example, first install it:
2121

22+
<docs-tabs>
23+
<docs-tab tab="Cordova">
24+
2225
```shell
26+
// Install Cordova plugin
2327
$ ionic cordova plugin add cordova-plugin-camera
28+
29+
// Install Ionic Native TypeScript wrapper
2430
$ npm install @ionic-native/camera
31+
32+
// Install Ionic Native core library (once per project)
33+
$ npm install @ionic-native/core
2534
```
2635

27-
Next, begin using the plugin, using the various framework usage options below. For FAQ, see [here](/docs/native/faq).
36+
</docs-tab>
37+
<docs-tab tab="Capacitor">
38+
39+
For complete details, [see the Capacitor documentation](https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins).
40+
41+
```shell
42+
// Install Ionic Native TypeScript wrapper
43+
$ npm install @ionic-native/camera
44+
45+
// Install Cordova plugin
46+
$ npm install cordova-plugin-camera
47+
48+
// Update native platform project(s) to include newly added plugin
49+
$ ionic cap sync
50+
```
51+
52+
</docs-tab>
53+
</docs-tabs>
54+
55+
Next, begin using the plugin, following the various framework usage options below. For FAQ, see [here](/docs/native/faq).
2856

2957
## Angular
30-
Import the plugin in a `@NgModule` and add it to the list of Providers. For Angular, the import path should end with `/ngx`. Angular's change detection is automatically handled.
58+
Angular apps can use either Cordova or Capacitor to build native mobile apps. Import the plugin in a `@NgModule` and add it to the list of Providers. For Angular, the import path should end with `/ngx`. Angular's change detection is automatically handled.
3159

3260
```typescript
3361
// app.module.ts
@@ -80,8 +108,51 @@ export class PhotoService {
80108
}
81109
```
82110

111+
## React
112+
113+
React apps must use Capacitor to build native mobile apps. However, Ionic Native (and therefore, Cordova plugins) can still be used.
114+
115+
<command-line>
116+
<div>// Install Core library (once per project)</div>
117+
<command-prompt>npm install @ionic-native/core</command-prompt>
118+
<br />
119+
<div>// Install Ionic Native TypeScript wrapper</div>
120+
<command-prompt>npm install @ionic-native/barcode-scanner</command-prompt>
121+
<br/>
122+
<div>// Install Cordova plugin</div>
123+
<command-prompt>npm install phonegap-plugin-barcodescanner</command-prompt>
124+
<br/>
125+
<div>// Update native platform project(s) to include newly added plugin</div>
126+
<command-prompt>ionic cap sync</command-prompt>
127+
</command-line>
128+
129+
Import the plugin object then use its static methods:
130+
131+
```typescript
132+
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
133+
134+
const Tab1: React.FC = () => {
135+
const openScanner = async () => {
136+
const data = await BarcodeScanner.scan();
137+
console.log(`Barcode data: ${data.text}`);
138+
};
139+
return (
140+
<IonPage>
141+
<IonHeader>
142+
<IonToolbar>
143+
<IonTitle>Tab 1</IonTitle>
144+
</IonToolbar>
145+
</IonHeader>
146+
<IonContent>
147+
<IonButton onClick={openScanner}>Scan barcode</IonButton>
148+
</IonContent>
149+
</IonPage>
150+
);
151+
};
152+
```
153+
83154
## Vanilla JavaScript
84-
Ionic Native can also be used in a vanilla JavaScript app targeting ES2015+ and/or TypeScript. To use any plugin, import the class from the appropriate package and use its static methods:
155+
Vanilla JavaScript apps, targeting ES2015+ and/or TypeScript, can use either Cordova or Capacitor to build native mobile apps. To use any plugin, import the class from the appropriate package and use its static methods:
85156

86157
```js
87158
import { Camera } from '@ionic-native/camera';

0 commit comments

Comments
 (0)