+
+
+
+ ...
+```
+
+
+ github.com/DavidBriglio/cordova-plugin-foreground-service
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { ForegroundService } from '@awesome-cordova-plugins/foreground-service/ngx';
+
+
+constructor(public foregroundService: ForegroundService) { }
+
+...
+
+startService() {
+ // Notification importance is optional, the default is 1 - Low (no sound or vibration)
+ this.foregroundService.start('GPS Running', 'Background Service', 'drawable/fsicon');
+}
+
+stopService() {
+ // Disable the foreground service
+ this.foregroundService.stop();
+}
+
+```
diff --git a/versioned_docs/version-v5/native/ftp.md b/versioned_docs/version-v5/native/ftp.md
deleted file mode 100644
index 51377876d88..00000000000
--- a/versioned_docs/version-v5/native/ftp.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-sidebar_label: 'FTP'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# FTP
-
-This cordova plugin is created to use ftp (client) in web/js.
-
-
- github.com/xfally/cordova-plugin-ftp
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { FTP } from '@awesome-cordova-plugins/ftp/ngx';
-
-
-constructor(private fTP: FTP) { }
-
-...
-
-
-this.fTP.connect('ftp_host', 'ftp_user', 'ftp_password')
- .then((res: any) => console.log('Login successful', res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/ftp.mdx b/versioned_docs/version-v5/native/ftp.mdx
new file mode 100644
index 00000000000..2cf46b2829f
--- /dev/null
+++ b/versioned_docs/version-v5/native/ftp.mdx
@@ -0,0 +1,88 @@
+---
+sidebar_label: 'FTP'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# FTP
+
+This cordova plugin is created to use ftp (client) in web/js.
+
+
+ github.com/xfally/cordova-plugin-ftp
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { FTP } from '@awesome-cordova-plugins/ftp/ngx';
+
+
+constructor(private fTP: FTP) { }
+
+...
+
+
+this.fTP.connect('ftp_host', 'ftp_user', 'ftp_password')
+ .then((res: any) => console.log('Login successful', res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/gao-de-location.md b/versioned_docs/version-v5/native/gao-de-location.md
deleted file mode 100644
index b217c601758..00000000000
--- a/versioned_docs/version-v5/native/gao-de-location.md
+++ /dev/null
@@ -1,121 +0,0 @@
----
-sidebar_label: 'Gao De Location'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Gao De Location
-
-Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
-Gaode location can directly return address informationGaode location can directly return address information
-
-
- github.com/waliu/cordova-plugin-gaodelocation-chenyu.git
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { GaoDeLocation } from '@awesome-cordova-plugins/gao-de-location/ngx';
-
-
-constructor(private gaoDeLocation: GaoDeLocation) { }
-
-
-const positionOptions: PositionOptions = {
- androidOption: {
- locationMode: LocationModeEnum.Hight_Accuracy,
- gpsFirst: false,
- HttpTimeOut: 30000,
- interval: 2000,
- needAddress: true,
- onceLocation: false,
- onceLocationLatest: false,
- locationProtocol: LocationProtocolEnum.HTTP,
- sensorEnable: false,
- wifiScan: true,
- locationCacheEnable: true
- }, iosOption: {
- desiredAccuracy: DesiredAccuracyEnum.kCLLocationAccuracyBest,
- pausesLocationUpdatesAutomatically: 'YES',
- allowsBackgroundLocationUpdates: 'NO',
- locationTimeout: 10,
- reGeocodeTimeout: 5,
- }
- };
-const positionRes: PositionRes = await this.gaoDeLocation.getCurrentPosition(positionOptions).catch((e: any) => {
- console.log(e);
- }) || null;
-console.log(JSON.stringify(positionRes));
-
-
-this.gaoDeLocation.startSerialLocation(positionOptions).subscribe((positionRes: PositionRes) => {
- console.log(JSON.stringify(positionRes));
-});
-
-const positionRes: any = this.gaoDeLocation.stopSerialLocation().catch((e) => {
- console.log(e);
- }) || null;
-console.log(JSON.stringify(positionRes));
-
-```
diff --git a/versioned_docs/version-v5/native/gao-de-location.mdx b/versioned_docs/version-v5/native/gao-de-location.mdx
new file mode 100644
index 00000000000..b1c9b38fe03
--- /dev/null
+++ b/versioned_docs/version-v5/native/gao-de-location.mdx
@@ -0,0 +1,121 @@
+---
+sidebar_label: 'Gao De Location'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Gao De Location
+
+Because the original GPS positioning uses Google Browser positioning, and Google withdraws from China, resulting in GPS Android positioning can not be positioned.
+Gaode location can directly return address informationGaode location can directly return address information
+
+
+ github.com/waliu/cordova-plugin-gaodelocation-chenyu.git
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { GaoDeLocation } from '@awesome-cordova-plugins/gao-de-location/ngx';
+
+
+constructor(private gaoDeLocation: GaoDeLocation) { }
+
+
+const positionOptions: PositionOptions = {
+ androidOption: {
+ locationMode: LocationModeEnum.Hight_Accuracy,
+ gpsFirst: false,
+ HttpTimeOut: 30000,
+ interval: 2000,
+ needAddress: true,
+ onceLocation: false,
+ onceLocationLatest: false,
+ locationProtocol: LocationProtocolEnum.HTTP,
+ sensorEnable: false,
+ wifiScan: true,
+ locationCacheEnable: true
+ }, iosOption: {
+ desiredAccuracy: DesiredAccuracyEnum.kCLLocationAccuracyBest,
+ pausesLocationUpdatesAutomatically: 'YES',
+ allowsBackgroundLocationUpdates: 'NO',
+ locationTimeout: 10,
+ reGeocodeTimeout: 5,
+ }
+ };
+const positionRes: PositionRes = await this.gaoDeLocation.getCurrentPosition(positionOptions).catch((e: any) => {
+ console.log(e);
+ }) || null;
+console.log(JSON.stringify(positionRes));
+
+
+this.gaoDeLocation.startSerialLocation(positionOptions).subscribe((positionRes: PositionRes) => {
+ console.log(JSON.stringify(positionRes));
+});
+
+const positionRes: any = this.gaoDeLocation.stopSerialLocation().catch((e) => {
+ console.log(e);
+ }) || null;
+console.log(JSON.stringify(positionRes));
+
+```
diff --git a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md
deleted file mode 100644
index 96fe3452207..00000000000
--- a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-sidebar_label: 'Ge Tui Sdk Plugin'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Ge Tui Sdk Plugin
-
-This plugin does something
-
-
- {'git@github.com:GetuiLaboratory/cordova-plugin-getuisdk.git'}
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { GeTuiSdkPlugin } from '@awesome-cordova-plugins/ge-tui-sdk-plugin';
-
-
-constructor(private geTuiSdkPlugin: GeTuiSdkPlugin) { }
-
- this.geTuiSdkPlugin.callback_init((res) => { console.log(res)});
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
- this.geTuiSdkPlugin.initialize();
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
- this.geTuiSdkPlugin.getClientId();
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
- this.geTuiSdkPlugin.getVersion();
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx
new file mode 100644
index 00000000000..d0cf8612caf
--- /dev/null
+++ b/versioned_docs/version-v5/native/ge-tui-sdk-plugin.mdx
@@ -0,0 +1,96 @@
+---
+sidebar_label: 'Ge Tui Sdk Plugin'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Ge Tui Sdk Plugin
+
+This plugin does something
+
+
+ {'git@github.com:GetuiLaboratory/cordova-plugin-getuisdk.git'}
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { GeTuiSdkPlugin } from '@awesome-cordova-plugins/ge-tui-sdk-plugin';
+
+
+constructor(private geTuiSdkPlugin: GeTuiSdkPlugin) { }
+
+ this.geTuiSdkPlugin.callback_init((res) => { console.log(res)});
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+ this.geTuiSdkPlugin.initialize();
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+ this.geTuiSdkPlugin.getClientId();
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+ this.geTuiSdkPlugin.getVersion();
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/geolocation.md b/versioned_docs/version-v5/native/geolocation.md
deleted file mode 100644
index 808bbaf6d12..00000000000
--- a/versioned_docs/version-v5/native/geolocation.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: 'Geolocation | W3C Geolocator Application API Plugin'
-description: "This application plugin is based on W3C Geolocation API Specification and only executes on devices that don't already provide an implementation for location."
-sidebar_label: 'Geolocation'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Geolocation
-
-This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
-
-This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
-
-For iOS you have to add this configuration to your configuration.xml file
-
-```xml
-
- We use your location for full functionality of certain app features.
-
-```
-
-
- github.com/apache/cordova-plugin-geolocation
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Amazon Fire OS
-- Android
-- Browser
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';
-
-...
-
-constructor(private geolocation: Geolocation) {}
-
-...
-
-this.geolocation.getCurrentPosition().then((resp) => {
- // resp.coords.latitude
- // resp.coords.longitude
-}).catch((error) => {
- console.log('Error getting location', error);
-});
-
-let watch = this.geolocation.watchPosition();
-watch.subscribe((data) => {
- // data can be a set of coordinates, or an error (if an error occurred).
- // data.coords.latitude
- // data.coords.longitude
-});
-```
diff --git a/versioned_docs/version-v5/native/geolocation.mdx b/versioned_docs/version-v5/native/geolocation.mdx
new file mode 100644
index 00000000000..7092bf17c65
--- /dev/null
+++ b/versioned_docs/version-v5/native/geolocation.mdx
@@ -0,0 +1,114 @@
+---
+title: 'Geolocation | W3C Geolocator Application API Plugin'
+description: "This application plugin is based on W3C Geolocation API Specification and only executes on devices that don't already provide an implementation for location."
+sidebar_label: 'Geolocation'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Geolocation
+
+This plugin provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
+
+This API is based on the W3C Geolocation API Specification, and only executes on devices that don't already provide an implementation.
+
+For iOS you have to add this configuration to your configuration.xml file
+
+```xml
+
+ We use your location for full functionality of certain app features.
+
+```
+
+
+ github.com/apache/cordova-plugin-geolocation
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Amazon Fire OS
+- Android
+- Browser
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';
+
+...
+
+constructor(private geolocation: Geolocation) {}
+
+...
+
+this.geolocation.getCurrentPosition().then((resp) => {
+ // resp.coords.latitude
+ // resp.coords.longitude
+}).catch((error) => {
+ console.log('Error getting location', error);
+});
+
+let watch = this.geolocation.watchPosition();
+watch.subscribe((data) => {
+ // data can be a set of coordinates, or an error (if an error occurred).
+ // data.coords.latitude
+ // data.coords.longitude
+});
+```
diff --git a/versioned_docs/version-v5/native/globalization.md b/versioned_docs/version-v5/native/globalization.md
deleted file mode 100644
index 0cd8a837d69..00000000000
--- a/versioned_docs/version-v5/native/globalization.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-sidebar_label: 'Globalization'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Globalization
-
-This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
-
-
- github.com/apache/cordova-plugin-globalization
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Amazon Fire OS
-- Android
-- Browser
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Globalization } from '@awesome-cordova-plugins/globalization/ngx';
-
-constructor(private globalization: Globalization) { }
-
-
-...
-
-
-this.globalization.getPreferredLanguage()
- .then(res => console.log(res))
- .catch(e => console.log(e));
-
-
-```
diff --git a/versioned_docs/version-v5/native/globalization.mdx b/versioned_docs/version-v5/native/globalization.mdx
new file mode 100644
index 00000000000..c605d920bef
--- /dev/null
+++ b/versioned_docs/version-v5/native/globalization.mdx
@@ -0,0 +1,94 @@
+---
+sidebar_label: 'Globalization'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Globalization
+
+This plugin obtains information and performs operations specific to the user's locale, language, and timezone.
+
+
+ github.com/apache/cordova-plugin-globalization
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Amazon Fire OS
+- Android
+- Browser
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Globalization } from '@awesome-cordova-plugins/globalization/ngx';
+
+constructor(private globalization: Globalization) { }
+
+
+...
+
+
+this.globalization.getPreferredLanguage()
+ .then(res => console.log(res))
+ .catch(e => console.log(e));
+
+
+```
diff --git a/versioned_docs/version-v5/native/google-analytics.md b/versioned_docs/version-v5/native/google-analytics.md
deleted file mode 100644
index 066b8a48c26..00000000000
--- a/versioned_docs/version-v5/native/google-analytics.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-sidebar_label: 'Google Analytics'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-# Google Analytics
-
-This plugin connects to Google's native Universal Analytics SDK
-Prerequisites:
-
-- A Cordova 3.0+ project for iOS and/or Android
-- A Mobile App property through the Google Analytics Admin Console
-- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
-
-
- github.com/danwilson/google-analytics-plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-- Windows Phone 8
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { GoogleAnalytics } from '@awesome-cordova-plugins/google-analytics/ngx';
-
-constructor(private ga: GoogleAnalytics) { }
-
-...
-
-this.ga.startTrackerWithId('YOUR_TRACKER_ID')
- .then(() => {
- console.log('Google analytics is ready now');
- this.ga.trackView('test');
- // Tracker is ready
- // You can now track pages or set additional information such as AppVersion or UserId
- })
- .catch(e => console.log('Error starting GoogleAnalytics', e));
-
-
-```
diff --git a/versioned_docs/version-v5/native/google-analytics.mdx b/versioned_docs/version-v5/native/google-analytics.mdx
new file mode 100644
index 00000000000..fc660aa14be
--- /dev/null
+++ b/versioned_docs/version-v5/native/google-analytics.mdx
@@ -0,0 +1,101 @@
+---
+sidebar_label: 'Google Analytics'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Google Analytics
+
+This plugin connects to Google's native Universal Analytics SDK
+Prerequisites:
+
+- A Cordova 3.0+ project for iOS and/or Android
+- A Mobile App property through the Google Analytics Admin Console
+- (Android) Google Play Services SDK installed via [Android SDK Manager](https://developer.android.com/sdk/installing/adding-packages.html)
+
+
+ github.com/danwilson/google-analytics-plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+- Windows Phone 8
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { GoogleAnalytics } from '@awesome-cordova-plugins/google-analytics/ngx';
+
+constructor(private ga: GoogleAnalytics) { }
+
+...
+
+this.ga.startTrackerWithId('YOUR_TRACKER_ID')
+ .then(() => {
+ console.log('Google analytics is ready now');
+ this.ga.trackView('test');
+ // Tracker is ready
+ // You can now track pages or set additional information such as AppVersion or UserId
+ })
+ .catch(e => console.log('Error starting GoogleAnalytics', e));
+
+
+```
diff --git a/versioned_docs/version-v5/native/google-nearby.md b/versioned_docs/version-v5/native/google-nearby.md
deleted file mode 100644
index 51874c65750..00000000000
--- a/versioned_docs/version-v5/native/google-nearby.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-sidebar_label: 'Google Nearby'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Google Nearby
-
-This plugin adds support for the Google Nearby Messages API.
-
-
- github.com/hahahannes/cordova-plugin-google-nearby
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { GoogleNearby } from '@awesome-cordova-plugins/google-nearby/ngx';
-
-
-constructor(private googleNearby: GoogleNearby) { }
-
-this.googleNearby.publish('Hello')
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-this.googleNearby.subscribe()
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-```
diff --git a/versioned_docs/version-v5/native/google-nearby.mdx b/versioned_docs/version-v5/native/google-nearby.mdx
new file mode 100644
index 00000000000..baf89f0a142
--- /dev/null
+++ b/versioned_docs/version-v5/native/google-nearby.mdx
@@ -0,0 +1,89 @@
+---
+sidebar_label: 'Google Nearby'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Google Nearby
+
+This plugin adds support for the Google Nearby Messages API.
+
+
+ github.com/hahahannes/cordova-plugin-google-nearby
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { GoogleNearby } from '@awesome-cordova-plugins/google-nearby/ngx';
+
+
+constructor(private googleNearby: GoogleNearby) { }
+
+this.googleNearby.publish('Hello')
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+this.googleNearby.subscribe()
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+```
diff --git a/versioned_docs/version-v5/native/google-plus.md b/versioned_docs/version-v5/native/google-plus.md
deleted file mode 100644
index 6901168a648..00000000000
--- a/versioned_docs/version-v5/native/google-plus.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-sidebar_label: 'Google Plus'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Google Plus
-
-
- github.com/EddyVerbruggen/cordova-plugin-googleplus
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { GooglePlus } from '@awesome-cordova-plugins/google-plus/ngx';
-
-constructor(private googlePlus: GooglePlus) { }
-
-...
-
-this.googlePlus.login({})
- .then(res => console.log(res))
- .catch(err => console.error(err));
-
-```
diff --git a/versioned_docs/version-v5/native/google-plus.mdx b/versioned_docs/version-v5/native/google-plus.mdx
new file mode 100644
index 00000000000..e1388571cfe
--- /dev/null
+++ b/versioned_docs/version-v5/native/google-plus.mdx
@@ -0,0 +1,86 @@
+---
+sidebar_label: 'Google Plus'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Google Plus
+
+
+ github.com/EddyVerbruggen/cordova-plugin-googleplus
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { GooglePlus } from '@awesome-cordova-plugins/google-plus/ngx';
+
+constructor(private googlePlus: GooglePlus) { }
+
+...
+
+this.googlePlus.login({})
+ .then(res => console.log(res))
+ .catch(err => console.error(err));
+
+```
diff --git a/versioned_docs/version-v5/native/health-kit.md b/versioned_docs/version-v5/native/health-kit.md
deleted file mode 100644
index a09078dd782..00000000000
--- a/versioned_docs/version-v5/native/health-kit.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-sidebar_label: 'Health Kit'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Health Kit
-
-The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
-Any data saved shows up in the iOS Health app and is available for other iOS apps.
-
-
- github.com/Telerik-Verified-Plugins/HealthKit
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { HealthKit } from '@awesome-cordova-plugins/health-kit/ngx';
-
-
-constructor(private healthKit: HealthKit) { }
-
-...
-```
diff --git a/versioned_docs/version-v5/native/health-kit.mdx b/versioned_docs/version-v5/native/health-kit.mdx
new file mode 100644
index 00000000000..d6ac154ae7f
--- /dev/null
+++ b/versioned_docs/version-v5/native/health-kit.mdx
@@ -0,0 +1,84 @@
+---
+sidebar_label: 'Health Kit'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Health Kit
+
+The HealthKit plugin allows you to read data from and write data to the iOS 8+ HealthKit framework.
+Any data saved shows up in the iOS Health app and is available for other iOS apps.
+
+
+ github.com/Telerik-Verified-Plugins/HealthKit
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { HealthKit } from '@awesome-cordova-plugins/health-kit/ngx';
+
+
+constructor(private healthKit: HealthKit) { }
+
+...
+```
diff --git a/versioned_docs/version-v5/native/health.md b/versioned_docs/version-v5/native/health.md
deleted file mode 100644
index 9ec2f16902a..00000000000
--- a/versioned_docs/version-v5/native/health.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-sidebar_label: 'Health'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Health
-
-A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
-
-
- github.com/dariosalvi78/cordova-plugin-health
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Health } from '@awesome-cordova-plugins/health/ngx';
-
-
-constructor(private health: Health) { }
-
-...
-
-this.health.isAvailable()
-.then((available:boolean) => {
- console.log(available);
- this.health.requestAuthorization([
- 'distance', 'nutrition', //read and write permissions
- {
- read: ['steps'], //read only permission
- write: ['height', 'weight'] //write only permission
- }
- ])
- .then(res => console.log(res))
- .catch(e => console.log(e));
-})
-.catch(e => console.log(e));
-
-```
-
-See description at https://github.com/dariosalvi78/cordova-plugin-health for a full list of Datatypes and see examples.
diff --git a/versioned_docs/version-v5/native/health.mdx b/versioned_docs/version-v5/native/health.mdx
new file mode 100644
index 00000000000..a5b278fe3d0
--- /dev/null
+++ b/versioned_docs/version-v5/native/health.mdx
@@ -0,0 +1,100 @@
+---
+sidebar_label: 'Health'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Health
+
+A plugin that abstracts fitness and health repositories like Apple HealthKit or Google Fit.
+
+
+ github.com/dariosalvi78/cordova-plugin-health
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Health } from '@awesome-cordova-plugins/health/ngx';
+
+
+constructor(private health: Health) { }
+
+...
+
+this.health.isAvailable()
+.then((available:boolean) => {
+ console.log(available);
+ this.health.requestAuthorization([
+ 'distance', 'nutrition', //read and write permissions
+ {
+ read: ['steps'], //read only permission
+ write: ['height', 'weight'] //write only permission
+ }
+ ])
+ .then(res => console.log(res))
+ .catch(e => console.log(e));
+})
+.catch(e => console.log(e));
+
+```
+
+See description at https://github.com/dariosalvi78/cordova-plugin-health for a full list of Datatypes and see examples.
diff --git a/versioned_docs/version-v5/native/http.md b/versioned_docs/version-v5/native/http.md
deleted file mode 100644
index 8265b75fd52..00000000000
--- a/versioned_docs/version-v5/native/http.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-sidebar_label: 'HTTP'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# HTTP
-
-Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
-
-Advantages over Javascript requests:
-
-- SSL / TLS Pinning
-- CORS restrictions do not apply
-- Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
-
-
- github.com/silkimen/cordova-plugin-advanced-http
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { HTTP } from '@awesome-cordova-plugins/http/ngx';
-
-constructor(private http: HTTP) {}
-
-...
-
-this.http.get('http://ionic.io', {}, {})
- .then(data => {
-
- console.log(data.status);
- console.log(data.data); // data received by server
- console.log(data.headers);
-
- })
- .catch(error => {
-
- console.log(error.status);
- console.log(error.error); // error message as string
- console.log(error.headers);
-
- });
-
-```
diff --git a/versioned_docs/version-v5/native/http.mdx b/versioned_docs/version-v5/native/http.mdx
new file mode 100644
index 00000000000..c229610745b
--- /dev/null
+++ b/versioned_docs/version-v5/native/http.mdx
@@ -0,0 +1,105 @@
+---
+sidebar_label: 'HTTP'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# HTTP
+
+Cordova / Phonegap plugin for communicating with HTTP servers. Supports iOS and Android.
+
+Advantages over Javascript requests:
+
+- SSL / TLS Pinning
+- CORS restrictions do not apply
+- Handling of HTTP code 401 - read more at [Issue CB-2415](https://issues.apache.org/jira/browse/CB-2415)
+
+
+ github.com/silkimen/cordova-plugin-advanced-http
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { HTTP } from '@awesome-cordova-plugins/http/ngx';
+
+constructor(private http: HTTP) {}
+
+...
+
+this.http.get('http://ionic.io', {}, {})
+ .then(data => {
+
+ console.log(data.status);
+ console.log(data.data); // data received by server
+ console.log(data.headers);
+
+ })
+ .catch(error => {
+
+ console.log(error.status);
+ console.log(error.error); // error message as string
+ console.log(error.headers);
+
+ });
+
+```
diff --git a/versioned_docs/version-v5/native/iamport-cordova.md b/versioned_docs/version-v5/native/iamport-cordova.md
deleted file mode 100644
index b2ab5d4ed26..00000000000
--- a/versioned_docs/version-v5/native/iamport-cordova.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-sidebar_label: 'Iamport Cordova'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Iamport Cordova
-
-This plugin does something
-
-
- github.com/iamport/iamport-cordova
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- ios
-- android
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { IamportCordova } from '@awesome-cordova-plugins/iamport-cordova/ngx';
-
-
-constructor(private iamportCordova: IamportCordova) { }
-
-...
-
-
-this.iamportCordova.functionName('Hello', 123)
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/iamport-cordova.mdx b/versioned_docs/version-v5/native/iamport-cordova.mdx
new file mode 100644
index 00000000000..81d252fb52f
--- /dev/null
+++ b/versioned_docs/version-v5/native/iamport-cordova.mdx
@@ -0,0 +1,88 @@
+---
+sidebar_label: 'Iamport Cordova'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Iamport Cordova
+
+This plugin does something
+
+
+ github.com/iamport/iamport-cordova
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- ios
+- android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { IamportCordova } from '@awesome-cordova-plugins/iamport-cordova/ngx';
+
+
+constructor(private iamportCordova: IamportCordova) { }
+
+...
+
+
+this.iamportCordova.functionName('Hello', 123)
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/ibeacon.md b/versioned_docs/version-v5/native/ibeacon.md
deleted file mode 100644
index 09d40e65c62..00000000000
--- a/versioned_docs/version-v5/native/ibeacon.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-sidebar_label: 'IBeacon'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# IBeacon
-
-This plugin provides functions for working with iBeacons.
-
-The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
-
-
- github.com/petermetz/cordova-plugin-ibeacon
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { IBeacon } from '@awesome-cordova-plugins/ibeacon/ngx';
-
-constructor(private ibeacon: IBeacon) { }
-
-...
-
-
-// Request permission to use location on iOS
-this.ibeacon.requestAlwaysAuthorization();
-// create a new delegate and register it with the native layer
-let delegate = this.ibeacon.Delegate();
-
-// Subscribe to some of the delegate's event handlers
-delegate.didRangeBeaconsInRegion()
- .subscribe(
- data => console.log('didRangeBeaconsInRegion: ', data),
- error => console.error()
- );
-delegate.didStartMonitoringForRegion()
- .subscribe(
- data => console.log('didStartMonitoringForRegion: ', data),
- error => console.error()
- );
-delegate.didEnterRegion()
- .subscribe(
- data => {
- console.log('didEnterRegion: ', data);
- }
- );
-
-let beaconRegion = this.ibeacon.BeaconRegion('deskBeacon','F7826DA6-ASDF-ASDF-8024-BC5B71E0893E');
-
-this.ibeacon.startMonitoringForRegion(beaconRegion)
- .then(
- () => console.log('Native layer received the request to monitoring'),
- error => console.error('Native layer failed to begin monitoring: ', error)
- );
-```
diff --git a/versioned_docs/version-v5/native/ibeacon.mdx b/versioned_docs/version-v5/native/ibeacon.mdx
new file mode 100644
index 00000000000..8b45c93fd55
--- /dev/null
+++ b/versioned_docs/version-v5/native/ibeacon.mdx
@@ -0,0 +1,115 @@
+---
+sidebar_label: 'IBeacon'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# IBeacon
+
+This plugin provides functions for working with iBeacons.
+
+The plugin's API closely mimics the one exposed through the [CLLocationManager](https://developer.apple.com/library/ios/documentation/CoreLocation/Reference/CLLocationManager_Class/index.html) introduced in iOS 7.
+
+
+ github.com/petermetz/cordova-plugin-ibeacon
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { IBeacon } from '@awesome-cordova-plugins/ibeacon/ngx';
+
+constructor(private ibeacon: IBeacon) { }
+
+...
+
+
+// Request permission to use location on iOS
+this.ibeacon.requestAlwaysAuthorization();
+// create a new delegate and register it with the native layer
+let delegate = this.ibeacon.Delegate();
+
+// Subscribe to some of the delegate's event handlers
+delegate.didRangeBeaconsInRegion()
+ .subscribe(
+ data => console.log('didRangeBeaconsInRegion: ', data),
+ error => console.error()
+ );
+delegate.didStartMonitoringForRegion()
+ .subscribe(
+ data => console.log('didStartMonitoringForRegion: ', data),
+ error => console.error()
+ );
+delegate.didEnterRegion()
+ .subscribe(
+ data => {
+ console.log('didEnterRegion: ', data);
+ }
+ );
+
+let beaconRegion = this.ibeacon.BeaconRegion('deskBeacon','F7826DA6-ASDF-ASDF-8024-BC5B71E0893E');
+
+this.ibeacon.startMonitoringForRegion(beaconRegion)
+ .then(
+ () => console.log('Native layer received the request to monitoring'),
+ error => console.error('Native layer failed to begin monitoring: ', error)
+ );
+```
diff --git a/versioned_docs/version-v5/native/image-picker.md b/versioned_docs/version-v5/native/image-picker.md
deleted file mode 100644
index 2b42c1f2f20..00000000000
--- a/versioned_docs/version-v5/native/image-picker.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-sidebar_label: 'Image Picker'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Image Picker
-
-Cordova Plugin For Multiple Image Selection
-
-Requires Cordova plugin: `cordova-plugin-image-picker`.
-For more info, please see the https://github.com/Telerik-Verified-Plugins/ImagePicker
-
-
- github.com/Telerik-Verified-Plugins/ImagePicker
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { ImagePicker } from '@awesome-cordova-plugins/image-picker/ngx';
-
-
-constructor(private imagePicker: ImagePicker) { }
-
-...
-
-this.imagePicker.getPictures(options).then((results) => {
- for (var i = 0; i < results.length; i++) {
- console.log('Image URI: ' + results[i]);
- }
-}, (err) => { });
-
-```
diff --git a/versioned_docs/version-v5/native/image-picker.mdx b/versioned_docs/version-v5/native/image-picker.mdx
new file mode 100644
index 00000000000..2c113374535
--- /dev/null
+++ b/versioned_docs/version-v5/native/image-picker.mdx
@@ -0,0 +1,94 @@
+---
+sidebar_label: 'Image Picker'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Image Picker
+
+Cordova Plugin For Multiple Image Selection
+
+Requires Cordova plugin: `cordova-plugin-image-picker`.
+For more info, please see the https://github.com/Telerik-Verified-Plugins/ImagePicker
+
+
+ github.com/Telerik-Verified-Plugins/ImagePicker
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { ImagePicker } from '@awesome-cordova-plugins/image-picker/ngx';
+
+
+constructor(private imagePicker: ImagePicker) { }
+
+...
+
+this.imagePicker.getPictures(options).then((results) => {
+ for (var i = 0; i < results.length; i++) {
+ console.log('Image URI: ' + results[i]);
+ }
+}, (err) => { });
+
+```
diff --git a/versioned_docs/version-v5/native/imap.md b/versioned_docs/version-v5/native/imap.md
deleted file mode 100644
index 33fc049191e..00000000000
--- a/versioned_docs/version-v5/native/imap.md
+++ /dev/null
@@ -1,190 +0,0 @@
----
-sidebar_label: 'Imap'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Imap
-
-This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
-This plugin is in Beta version and it offers support only for Android.
-The plugin uses Java Mail API.
-Planned improvements and support for iOS.
-
-
- github.com/aleksandar888/cordova-plugin-imap.git
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Imap } from '@awesome-cordova-plugins/imap/ngx';
-
-
-constructor(private imap: Imap) { }
-
-...
-
-
-this.imap.connect({
- host: 'imap.gmail.com',
- user: 'my_email@gmail.com',
- password: 'my-pass'
-})
- .then((res: Connection) => console.log(res))
- .catch((error) => console.error(error));
-
-
-
- this.imap.disconnect()
- .then((res: boolean) => console.log(res))
- .catch((error: any) => console.error(error));
-
-
-
-this.imap.isConnected()
- .then((res: boolean) => console.log(res))
- .catch((error: any) => console.error(error));
-
- Note: Connected to an IMAP service is REQUIRED to be able to get data from the below functions.
-
-
- this.imap.listMailFolders()
- .then((res: boolean) => console.log(res))
- .catch((error: any) => console.error(error));
-
-
- this.imap.getMessageCountByFolderName('INBOX')
- .then((res: number) => {
- // Returns the count of the messages in the folder as a result
- console.log(res)
- })
- .catch((error: any) => {
- console.error(error)
- });
-
-
-
- this.imap.searchMessagesByDatePeriod('INBOX', 1601503200000, Comparison.GE)
- .then((res: number[]) => {
- // Returns array with messages' consecutive numbers
- // ex. [1207, 1208, 1209]
- console.log(res)
- })
- .catch((error: any) => {
- console.error(error)
- });
-
-
- this.imap.listMessagesHeadersByConsecutiveNumber('INBOX', 1200, 1280)
- .then((res: Message[]) => {
- // Returns array with messages' headers data
- console.log(res)
- })
- .catch((error: any) => {
- console.error(error)
- });
-
-
- this.imap.listMessagesHeadersByDate('INBOX', 1601503200000, Comparison.GE)
- .then((res: Message[]) => {
- // Returns array with messages' headers data
- console.log(res)
- })
- .catch((error: any) => {
- console.error(error)
- });
-
-
- this.imap.getFullMessageData('INBOX', 1205)
- .then((res: Message) => {
- // Returns "Message" object with the full message data including attachments.
- console.log(res)
- })
- .catch((error: any) => {
- console.error(error)
- });
-
-
- this.imap.copyToFolder('INBOX', 'Spam', [1204, 1205, 1206, 1207])
- .then((res: boolean) => {
- // Returns "true" if the process is successful, else returns "false".
- console.log(res)
- })
- .catch((error: any) => {
- console.error(error)
- });
-
-
- * Sets a flag on a message
- * "setFlag()" can be used for deleting messages setting the Delete flag to "FlagEnum.DELETED"
- this.imap.setFlag('INBOX', [1206, 1205, 1204], FlagEnum.SEEN, true)
- .then((res: ModificationResult) => {
-
- // res.status - return true or false based on the deletion success
-
- //res.modifiedMessages - for ex.[1206, 1205, 1204];
-
- })
- .catch((error: any) => {
- console.error(error)
- });
-
-```
diff --git a/versioned_docs/version-v5/native/imap.mdx b/versioned_docs/version-v5/native/imap.mdx
new file mode 100644
index 00000000000..1d60208f48f
--- /dev/null
+++ b/versioned_docs/version-v5/native/imap.mdx
@@ -0,0 +1,190 @@
+---
+sidebar_label: 'Imap'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Imap
+
+This plugin will enable an Ionic application to use the IMAP (Internet Message Access Protocol) features.
+This plugin is in Beta version and it offers support only for Android.
+The plugin uses Java Mail API.
+Planned improvements and support for iOS.
+
+
+ github.com/aleksandar888/cordova-plugin-imap.git
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Imap } from '@awesome-cordova-plugins/imap/ngx';
+
+
+constructor(private imap: Imap) { }
+
+...
+
+
+this.imap.connect({
+ host: 'imap.gmail.com',
+ user: 'my_email@gmail.com',
+ password: 'my-pass'
+})
+ .then((res: Connection) => console.log(res))
+ .catch((error) => console.error(error));
+
+
+
+ this.imap.disconnect()
+ .then((res: boolean) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+
+
+this.imap.isConnected()
+ .then((res: boolean) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+ Note: Connected to an IMAP service is REQUIRED to be able to get data from the below functions.
+
+
+ this.imap.listMailFolders()
+ .then((res: boolean) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+
+ this.imap.getMessageCountByFolderName('INBOX')
+ .then((res: number) => {
+ // Returns the count of the messages in the folder as a result
+ console.log(res)
+ })
+ .catch((error: any) => {
+ console.error(error)
+ });
+
+
+
+ this.imap.searchMessagesByDatePeriod('INBOX', 1601503200000, Comparison.GE)
+ .then((res: number[]) => {
+ // Returns array with messages' consecutive numbers
+ // ex. [1207, 1208, 1209]
+ console.log(res)
+ })
+ .catch((error: any) => {
+ console.error(error)
+ });
+
+
+ this.imap.listMessagesHeadersByConsecutiveNumber('INBOX', 1200, 1280)
+ .then((res: Message[]) => {
+ // Returns array with messages' headers data
+ console.log(res)
+ })
+ .catch((error: any) => {
+ console.error(error)
+ });
+
+
+ this.imap.listMessagesHeadersByDate('INBOX', 1601503200000, Comparison.GE)
+ .then((res: Message[]) => {
+ // Returns array with messages' headers data
+ console.log(res)
+ })
+ .catch((error: any) => {
+ console.error(error)
+ });
+
+
+ this.imap.getFullMessageData('INBOX', 1205)
+ .then((res: Message) => {
+ // Returns "Message" object with the full message data including attachments.
+ console.log(res)
+ })
+ .catch((error: any) => {
+ console.error(error)
+ });
+
+
+ this.imap.copyToFolder('INBOX', 'Spam', [1204, 1205, 1206, 1207])
+ .then((res: boolean) => {
+ // Returns "true" if the process is successful, else returns "false".
+ console.log(res)
+ })
+ .catch((error: any) => {
+ console.error(error)
+ });
+
+
+ * Sets a flag on a message
+ * "setFlag()" can be used for deleting messages setting the Delete flag to "FlagEnum.DELETED"
+ this.imap.setFlag('INBOX', [1206, 1205, 1204], FlagEnum.SEEN, true)
+ .then((res: ModificationResult) => {
+
+ // res.status - return true or false based on the deletion success
+
+ //res.modifiedMessages - for ex.[1206, 1205, 1204];
+
+ })
+ .catch((error: any) => {
+ console.error(error)
+ });
+
+```
diff --git a/versioned_docs/version-v5/native/in-app-browser.md b/versioned_docs/version-v5/native/in-app-browser.md
deleted file mode 100644
index c089d7c8b87..00000000000
--- a/versioned_docs/version-v5/native/in-app-browser.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-sidebar_label: 'In App Browser'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# In App Browser
-
-Launches in app Browser
-
-
- github.com/apache/cordova-plugin-inappbrowser
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- AmazonFire OS
-- Android
-- Browser
-- iOS
-- macOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';
-
-constructor(private iab: InAppBrowser) { }
-
-
-...
-
-
-const browser = this.iab.create('https://ionicframework.com/');
-
-browser.executeScript(...);
-
-browser.insertCSS(...);
-browser.on('loadstop').subscribe(event => {
- browser.insertCSS({ code: "body{color: red;" });
-});
-
-browser.close();
-
-```
diff --git a/versioned_docs/version-v5/native/in-app-browser.mdx b/versioned_docs/version-v5/native/in-app-browser.mdx
new file mode 100644
index 00000000000..163cba48ed1
--- /dev/null
+++ b/versioned_docs/version-v5/native/in-app-browser.mdx
@@ -0,0 +1,101 @@
+---
+sidebar_label: 'In App Browser'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# In App Browser
+
+Launches in app Browser
+
+
+ github.com/apache/cordova-plugin-inappbrowser
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- AmazonFire OS
+- Android
+- Browser
+- iOS
+- macOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';
+
+constructor(private iab: InAppBrowser) { }
+
+
+...
+
+
+const browser = this.iab.create('https://ionicframework.com/');
+
+browser.executeScript(...);
+
+browser.insertCSS(...);
+browser.on('loadstop').subscribe(event => {
+ browser.insertCSS({ code: "body{color: red;" });
+});
+
+browser.close();
+
+```
diff --git a/versioned_docs/version-v5/native/in-app-purchase-2.md b/versioned_docs/version-v5/native/in-app-purchase-2.md
deleted file mode 100644
index ea0be992e16..00000000000
--- a/versioned_docs/version-v5/native/in-app-purchase-2.md
+++ /dev/null
@@ -1,414 +0,0 @@
----
-sidebar_label: 'In App Purchase 2'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# In App Purchase 2
-
-In-App Purchase on iOS, Android, Windows, macOS and XBox.
-
-## Features
-
-| | ios | android | win-8 | win-10/uwp | mac |
-| -------------------- | --- | ------- | ----- | ---------- | --- |
-| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
-| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
-| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
-| receipt validations | ✅ | ✅ | | ✅ | ✅ |
-| downloadable content | ✅ | | | | ✅ |
-| introductory prices | ✅ | ✅ | | ✅ | ✅ |
-
-Supports:
-
-- **iOS** version 7.0 or higher.
-- **Android** version 2.2 (API level 8) or higher
- - with Google Play client version 3.9.16 or higher
-- **Windows** Store/Phone 8.1 or higher
-- **Windows 10 Mobile**
-- **macOS** version 10
-- **Xbox One**
- - (and any platform supporting Microsoft's UWP)
-
-
- github.com/j3k0/cordova-plugin-purchase
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-- Android
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { InAppPurchase2 } from '@awesome-cordova-plugins/in-app-purchase-2/ngx';
-
-constructor(public platform: Platform, private store: InAppPurchase2) {
- platform.ready().then(() => {
- this.store.register({
- id: "my_product_id",
- type: this.store.NON_RENEWING_SUBSCRIPTION,
- });
- this.store.when("my_product_id")
- .approved(p => p.verify())
- .verified(p => p.finish());
- this.store.refresh();
- });
-}
-
-...
-
-this.store.order("my_product_id");
-
-```
-
-## Full example
-
-```tsx
- // After platform ready
- this.store.verbosity = this.store.DEBUG;
- this.store.register({
- id: "my_product_id",
- type: this.store.PAID_SUBSCRIPTION,
- });
-
- // Register event handlers for the specific product
- this.store.when("my_product_id").registered( (product: IAPProduct) => {
- console.log('Registered: ' + JSON.stringify(product));
- });
-
- // Updated
- this.store.when("my_product_id").updated( (product: IAPProduct) => {
- console.log('Updated' + JSON.stringify(product));
- });
-
- // User closed the native purchase dialog
- this.store.when("my_product_id").cancelled( (product) => {
- console.error('Purchase was Cancelled');
- });
-
- // Track all store errors
- this.store.error( (err) => {
- console.error('Store Error ' + JSON.stringify(err));
- });
-
- // Run some code only when the store is ready to be used
- this.store.ready(() => {
- console.log('Store is ready');
- console.log('Products: ' + JSON.stringify(this.store.products));
- console.log(JSON.stringify(this.store.get("my_product_id")));
- });
-
- // Refresh the status of in-app products
- this.store.refresh();
-
- ...
-
- // To make a purchase
- this.store.order("my_product_id");
-
-```
-
-## Philosophy
-
-The API is mostly events based. As a user of this plugin,
-you will have to register listeners to changes happening to the products
-you register.
-
-The core of the listening mechanism is the `when()` method. It allows you to
-be notified of changes to one or a set of products using a query mechanism:
-
-```tsx
-this.store.when('product').updated(refreshScreen); // match any product
-this.store.when('full_version').owned(unlockApp); // match a specific product
-this.store.when('subscription').approved(serverCheck); // match all subscriptions
-this.store.when('downloadable content').downloaded(showContent);
-```
-
-The `updated` event is fired whenever one of the fields of a product is
-changed (its `owned` status for instance).
-
-This event provides a generic way to track the statuses of your purchases,
-to unlock features when needed and to refresh your views accordingly.
-
-## Registering products
-
-The store needs to know the type and identifiers of your products before you
-can use them in your code.
-
-Use `store.register()` to define them before your first call to `store.refresh()`.
-
-Once registered, you can use `store.get()` to retrieve an `IAPProduct` object.
-
-```tsx
- this.store.register({
- id: "my_consumable1",
- type: this.store.CONSUMABLE
- });
- ...
- const p = this.store.get("my_consumable1");
-```
-
-The product `id` and `type` have to match products defined in your
-Apple, Google or Microsoft developer consoles.
-
-Learn more about it [from the wiki](https://github.com/j3k0/cordova-plugin-purchase/wiki).
-
-## Displaying products
-
-Right after you registered your products, nothing much is known about them
-except their `id`, `type` and an optional `alias`.
-
-When you perform the initial call to `store.refresh()`, the platforms' server will
-be contacted to load informations about the registered products: human
-readable `title` and `description`, `price`, etc.
-
-This isn't an optional step, store owners require you
-to display information about a product exactly as retrieved from their server: no
-hard-coding of price and title allowed! This is also convenient for you
-as you can change the price of your items knowing that it'll be reflected instantly
-on your clients' devices.
-
-Note that the information may not be available when the first view that needs
-them appears on screen. For you, the best option is to have your view monitor
-changes made to the product.
-
-## Purchasing
-
-#### initiate a purchase
-
-Purchases are initiated using the `store.order("some_product_id")` method.
-
-The store will manage the internal purchase flow. It'll end:
-
-- with an `approved` event. The product enters the `APPROVED` state.
-- with a `cancelled` event. The product gets back to the `VALID` state.
-- with an `error` event. The product gets back to the `VALID` state.
-
-See the product life-cycle section for details about product states.
-
-#### finish a purchase
-
-Once the transaction is approved, the product still isn't owned: the store needs
-confirmation that the purchase was delivered before closing the transaction.
-
-To confirm delivery, you'll use the `product.finish()` method.
-
-#### example usage
-
-During initialization:
-
-```tsx
-this.store.when('extra_chapter').approved((product: IAPProduct) => {
- // download the feature
- app.downloadExtraChapter().then(() => product.finish());
-});
-```
-
-When the purchase button is clicked:
-
-```tsx
-this.store.order('extra_chapter');
-```
-
-#### un-finished purchases
-
-If your app wasn't able to deliver the content, `product.finish()` won't be called.
-
-Don't worry: the `approved` event will be re-triggered the next time you
-call `store.refresh()`, which can very well be the next time
-the application starts. Pending transactions are persistant.
-
-#### simple case
-
-In the most simple case, where:
-
-- delivery of purchases is only local ;
-- you don't want (or need) to implement receipt validation ;
-
-You may just want to finish all purchases automatically. You can do it this way:
-
-```js
-this.store.when('product').approved((p: IAPProduct) => p.finish());
-```
-
-NOTE: the "product" query will match any purchases (see "queries" to learn more details about queries).
-
-## Receipt validation
-
-To get the most up-to-date information about purchases (in case a purchase have been canceled, or a subscription renewed),
-you should implement server side receipt validation.
-
-This also protects you against fake "purchases", made by some users using
-"free in-app purchase" apps on their devices.
-
-When a purchase has been approved by the store, it's enriched with
-transaction information (see `product.transaction` attribute).
-
-To verify a purchase you'll have to do three things:
-
-- configure the validator.
-- call `product.verify()` from the `approved` event, before finishing the transaction.
-- finish the transaction when transaction is `verified`.
-
-**Shameless Plug**: this is a feature many users struggle with, so as the author of this plugin, we can provide it to you as-a-service: https://billing.fovea.cc/
-(which is free until you start making serious money)
-
-#### example using a validation URL
-
-```js
-this.store.validator = 'https://billing.fovea.cc/';
-
-this.store
- .when('my stuff')
- .approved((p: IAPProduct) => p.verify())
- .verified((p: IAPProduct) => p.finish());
-```
-
-## Subscriptions
-
-For subscription, you MUST implement remote receipt validation.
-
-When the receipt validator returns a `store.PURCHASE_EXPIRED` error code, the subscription will
-automatically loose its `owned` status.
-
-Typically, you'll enable and disable access to your content this way.
-
-```tsx
-this.store.when('my_subcription').updated((product: IAPProduct) => {
- if (product.owned) app.subscriberMode();
- else app.guestMode();
-});
-```
-
-## Product life-cycle
-
-A product will change state during the application execution.
-
-Find below a diagram of the different states a product can pass by.
-
-```
-REGISTERED +--> INVALID
- |
- +--> VALID +--> REQUESTED +--> INITIATED +-+
- |
- ^ +------------------------------+
- | |
- | | +--> DOWNLOADING +--> DOWNLOADED +
- | | | |
- | +--> APPROVED +--------------------------------+--> FINISHED +--> OWNED
- | |
- +-------------------------------------------------------------+
-
-#### Notes
-
- - When finished, a consumable product will get back to the `VALID` state, while other will enter the `OWNED` state.
- - Any error in the purchase process will bring a product back to the `VALID` state.
- - During application startup, products may go instantly from `REGISTERED` to `APPROVED` or `OWNED`, for example if they are purchased non-consumables or non-expired subscriptions.
- - Non-Renewing Subscriptions are iOS products only. Please see the [iOS Non Renewing Subscriptions documentation](https://github.com/j3k0/cordova-plugin-purchase/blob/master/doc/ios.md#non-renewing) for a detailed explanation.
-
-## events
-
- - `loaded(IAPProduct)`
- - Called when product data is loaded from the store.
- - `updated(IAPProduct)`
- - Called when any change occured to a product.
- - `error(err)`
- - Called when an order failed.
- - The `err` parameter is an error object
- - `approved(IAPProduct)`
- - Called when a product order is approved.
- - `owned(IAPProduct)`
- - Called when a non-consumable product or subscription is owned.
- - `cancelled(IAPProduct)`
- - Called when a product order is cancelled by the user.
- - `refunded(IAPProduct)`
- - Called when an order is refunded by the user.
- - Actually, all other product states have their promise
- - `registered`, `valid`, `invalid`, `requested`,
- `initiated` and `finished`
- - `verified(IAPProduct)`
- - Called when receipt validation successful
- - `unverified(IAPProduct)`
- - Called when receipt verification failed
- - `expired(IAPProduct)`
- - Called when validation find a subscription to be expired
- - `downloading(IAPProduct, progress, time_remaining)`
- - Called when content download is started
- - `downloaded(IAPProduct)`
- - Called when content download has successfully completed
-
-## Learn More
-
- - [GitHub](https://github.com/j3k0/cordova-plugin-purchase)
- - [GitBook](https://purchase.cordova.fovea.cc/)
- - [Wiki](https://github.com/j3k0/cordova-plugin-purchase/wiki)
- - [API reference](https://github.com/j3k0/cordova-plugin-purchase/blob/master/doc/api.md)
-
-## Technical Support or Questions
-
-If you have questions or need help integrating In-App Purchase, [Open an Issue on GitHub](https://github.com/j3k0/cordova-plugin-purchase/issues) or email us at _support@fovea.cc_.
-
-@interfaces
-IAPProduct
-IAPProductOptions
-IAPProductEvents
-```
diff --git a/versioned_docs/version-v5/native/in-app-purchase-2.mdx b/versioned_docs/version-v5/native/in-app-purchase-2.mdx
new file mode 100644
index 00000000000..e404cf657fe
--- /dev/null
+++ b/versioned_docs/version-v5/native/in-app-purchase-2.mdx
@@ -0,0 +1,414 @@
+---
+sidebar_label: 'In App Purchase 2'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# In App Purchase 2
+
+In-App Purchase on iOS, Android, Windows, macOS and XBox.
+
+## Features
+
+| | ios | android | win-8 | win-10/uwp | mac |
+| -------------------- | --- | ------- | ----- | ---------- | --- |
+| consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
+| non consumables | ✅ | ✅ | ✅ | ✅ | ✅ |
+| subscriptions | ✅ | ✅ | ✅ | ✅ | ✅ |
+| restore purchases | ✅ | ✅ | ✅ | ✅ | ✅ |
+| receipt validations | ✅ | ✅ | | ✅ | ✅ |
+| downloadable content | ✅ | | | | ✅ |
+| introductory prices | ✅ | ✅ | | ✅ | ✅ |
+
+Supports:
+
+- **iOS** version 7.0 or higher.
+- **Android** version 2.2 (API level 8) or higher
+ - with Google Play client version 3.9.16 or higher
+- **Windows** Store/Phone 8.1 or higher
+- **Windows 10 Mobile**
+- **macOS** version 10
+- **Xbox One**
+ - (and any platform supporting Microsoft's UWP)
+
+
+ github.com/j3k0/cordova-plugin-purchase
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+- Android
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { InAppPurchase2 } from '@awesome-cordova-plugins/in-app-purchase-2/ngx';
+
+constructor(public platform: Platform, private store: InAppPurchase2) {
+ platform.ready().then(() => {
+ this.store.register({
+ id: "my_product_id",
+ type: this.store.NON_RENEWING_SUBSCRIPTION,
+ });
+ this.store.when("my_product_id")
+ .approved(p => p.verify())
+ .verified(p => p.finish());
+ this.store.refresh();
+ });
+}
+
+...
+
+this.store.order("my_product_id");
+
+```
+
+## Full example
+
+```tsx
+ // After platform ready
+ this.store.verbosity = this.store.DEBUG;
+ this.store.register({
+ id: "my_product_id",
+ type: this.store.PAID_SUBSCRIPTION,
+ });
+
+ // Register event handlers for the specific product
+ this.store.when("my_product_id").registered( (product: IAPProduct) => {
+ console.log('Registered: ' + JSON.stringify(product));
+ });
+
+ // Updated
+ this.store.when("my_product_id").updated( (product: IAPProduct) => {
+ console.log('Updated' + JSON.stringify(product));
+ });
+
+ // User closed the native purchase dialog
+ this.store.when("my_product_id").cancelled( (product) => {
+ console.error('Purchase was Cancelled');
+ });
+
+ // Track all store errors
+ this.store.error( (err) => {
+ console.error('Store Error ' + JSON.stringify(err));
+ });
+
+ // Run some code only when the store is ready to be used
+ this.store.ready(() => {
+ console.log('Store is ready');
+ console.log('Products: ' + JSON.stringify(this.store.products));
+ console.log(JSON.stringify(this.store.get("my_product_id")));
+ });
+
+ // Refresh the status of in-app products
+ this.store.refresh();
+
+ ...
+
+ // To make a purchase
+ this.store.order("my_product_id");
+
+```
+
+## Philosophy
+
+The API is mostly events based. As a user of this plugin,
+you will have to register listeners to changes happening to the products
+you register.
+
+The core of the listening mechanism is the `when()` method. It allows you to
+be notified of changes to one or a set of products using a query mechanism:
+
+```tsx
+this.store.when('product').updated(refreshScreen); // match any product
+this.store.when('full_version').owned(unlockApp); // match a specific product
+this.store.when('subscription').approved(serverCheck); // match all subscriptions
+this.store.when('downloadable content').downloaded(showContent);
+```
+
+The `updated` event is fired whenever one of the fields of a product is
+changed (its `owned` status for instance).
+
+This event provides a generic way to track the statuses of your purchases,
+to unlock features when needed and to refresh your views accordingly.
+
+## Registering products
+
+The store needs to know the type and identifiers of your products before you
+can use them in your code.
+
+Use `store.register()` to define them before your first call to `store.refresh()`.
+
+Once registered, you can use `store.get()` to retrieve an `IAPProduct` object.
+
+```tsx
+ this.store.register({
+ id: "my_consumable1",
+ type: this.store.CONSUMABLE
+ });
+ ...
+ const p = this.store.get("my_consumable1");
+```
+
+The product `id` and `type` have to match products defined in your
+Apple, Google or Microsoft developer consoles.
+
+Learn more about it [from the wiki](https://github.com/j3k0/cordova-plugin-purchase/wiki).
+
+## Displaying products
+
+Right after you registered your products, nothing much is known about them
+except their `id`, `type` and an optional `alias`.
+
+When you perform the initial call to `store.refresh()`, the platforms' server will
+be contacted to load informations about the registered products: human
+readable `title` and `description`, `price`, etc.
+
+This isn't an optional step, store owners require you
+to display information about a product exactly as retrieved from their server: no
+hard-coding of price and title allowed! This is also convenient for you
+as you can change the price of your items knowing that it'll be reflected instantly
+on your clients' devices.
+
+Note that the information may not be available when the first view that needs
+them appears on screen. For you, the best option is to have your view monitor
+changes made to the product.
+
+## Purchasing
+
+#### initiate a purchase
+
+Purchases are initiated using the `store.order("some_product_id")` method.
+
+The store will manage the internal purchase flow. It'll end:
+
+- with an `approved` event. The product enters the `APPROVED` state.
+- with a `cancelled` event. The product gets back to the `VALID` state.
+- with an `error` event. The product gets back to the `VALID` state.
+
+See the product life-cycle section for details about product states.
+
+#### finish a purchase
+
+Once the transaction is approved, the product still isn't owned: the store needs
+confirmation that the purchase was delivered before closing the transaction.
+
+To confirm delivery, you'll use the `product.finish()` method.
+
+#### example usage
+
+During initialization:
+
+```tsx
+this.store.when('extra_chapter').approved((product: IAPProduct) => {
+ // download the feature
+ app.downloadExtraChapter().then(() => product.finish());
+});
+```
+
+When the purchase button is clicked:
+
+```tsx
+this.store.order('extra_chapter');
+```
+
+#### un-finished purchases
+
+If your app wasn't able to deliver the content, `product.finish()` won't be called.
+
+Don't worry: the `approved` event will be re-triggered the next time you
+call `store.refresh()`, which can very well be the next time
+the application starts. Pending transactions are persistant.
+
+#### simple case
+
+In the most simple case, where:
+
+- delivery of purchases is only local ;
+- you don't want (or need) to implement receipt validation ;
+
+You may just want to finish all purchases automatically. You can do it this way:
+
+```js
+this.store.when('product').approved((p: IAPProduct) => p.finish());
+```
+
+NOTE: the "product" query will match any purchases (see "queries" to learn more details about queries).
+
+## Receipt validation
+
+To get the most up-to-date information about purchases (in case a purchase have been canceled, or a subscription renewed),
+you should implement server side receipt validation.
+
+This also protects you against fake "purchases", made by some users using
+"free in-app purchase" apps on their devices.
+
+When a purchase has been approved by the store, it's enriched with
+transaction information (see `product.transaction` attribute).
+
+To verify a purchase you'll have to do three things:
+
+- configure the validator.
+- call `product.verify()` from the `approved` event, before finishing the transaction.
+- finish the transaction when transaction is `verified`.
+
+**Shameless Plug**: this is a feature many users struggle with, so as the author of this plugin, we can provide it to you as-a-service: https://billing.fovea.cc/
+(which is free until you start making serious money)
+
+#### example using a validation URL
+
+```js
+this.store.validator = 'https://billing.fovea.cc/';
+
+this.store
+ .when('my stuff')
+ .approved((p: IAPProduct) => p.verify())
+ .verified((p: IAPProduct) => p.finish());
+```
+
+## Subscriptions
+
+For subscription, you MUST implement remote receipt validation.
+
+When the receipt validator returns a `store.PURCHASE_EXPIRED` error code, the subscription will
+automatically loose its `owned` status.
+
+Typically, you'll enable and disable access to your content this way.
+
+```tsx
+this.store.when('my_subcription').updated((product: IAPProduct) => {
+ if (product.owned) app.subscriberMode();
+ else app.guestMode();
+});
+```
+
+## Product life-cycle
+
+A product will change state during the application execution.
+
+Find below a diagram of the different states a product can pass by.
+
+```
+REGISTERED +--> INVALID
+ |
+ +--> VALID +--> REQUESTED +--> INITIATED +-+
+ |
+ ^ +------------------------------+
+ | |
+ | | +--> DOWNLOADING +--> DOWNLOADED +
+ | | | |
+ | +--> APPROVED +--------------------------------+--> FINISHED +--> OWNED
+ | |
+ +-------------------------------------------------------------+
+
+#### Notes
+
+ - When finished, a consumable product will get back to the `VALID` state, while other will enter the `OWNED` state.
+ - Any error in the purchase process will bring a product back to the `VALID` state.
+ - During application startup, products may go instantly from `REGISTERED` to `APPROVED` or `OWNED`, for example if they are purchased non-consumables or non-expired subscriptions.
+ - Non-Renewing Subscriptions are iOS products only. Please see the [iOS Non Renewing Subscriptions documentation](https://github.com/j3k0/cordova-plugin-purchase/blob/master/doc/ios.md#non-renewing) for a detailed explanation.
+
+## events
+
+ - `loaded(IAPProduct)`
+ - Called when product data is loaded from the store.
+ - `updated(IAPProduct)`
+ - Called when any change occured to a product.
+ - `error(err)`
+ - Called when an order failed.
+ - The `err` parameter is an error object
+ - `approved(IAPProduct)`
+ - Called when a product order is approved.
+ - `owned(IAPProduct)`
+ - Called when a non-consumable product or subscription is owned.
+ - `cancelled(IAPProduct)`
+ - Called when a product order is cancelled by the user.
+ - `refunded(IAPProduct)`
+ - Called when an order is refunded by the user.
+ - Actually, all other product states have their promise
+ - `registered`, `valid`, `invalid`, `requested`,
+ `initiated` and `finished`
+ - `verified(IAPProduct)`
+ - Called when receipt validation successful
+ - `unverified(IAPProduct)`
+ - Called when receipt verification failed
+ - `expired(IAPProduct)`
+ - Called when validation find a subscription to be expired
+ - `downloading(IAPProduct, progress, time_remaining)`
+ - Called when content download is started
+ - `downloaded(IAPProduct)`
+ - Called when content download has successfully completed
+
+## Learn More
+
+ - [GitHub](https://github.com/j3k0/cordova-plugin-purchase)
+ - [GitBook](https://purchase.cordova.fovea.cc/)
+ - [Wiki](https://github.com/j3k0/cordova-plugin-purchase/wiki)
+ - [API reference](https://github.com/j3k0/cordova-plugin-purchase/blob/master/doc/api.md)
+
+## Technical Support or Questions
+
+If you have questions or need help integrating In-App Purchase, [Open an Issue on GitHub](https://github.com/j3k0/cordova-plugin-purchase/issues) or email us at _support@fovea.cc_.
+
+@interfaces
+IAPProduct
+IAPProductOptions
+IAPProductEvents
+```
diff --git a/versioned_docs/version-v5/native/in-app-review.md b/versioned_docs/version-v5/native/in-app-review.md
deleted file mode 100644
index 14d1827e8ff..00000000000
--- a/versioned_docs/version-v5/native/in-app-review.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-sidebar_label: 'In App Review'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# In App Review
-
-This plugin does use the iOS class SKStoreReviewController to open the inApp review popup available since iOS 10.3
-
-This functionality only works on iOS devices
-
-
- github.com/omaxlive/com.omarben.inappreview
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { InAppReview } from '@awesome-cordova-plugins/in-app-review/ngx';
-
-
-constructor(private inAppReview: InAppReview) { }
-
-...
-
-
-this.inAppReview.requestReview()
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/in-app-review.mdx b/versioned_docs/version-v5/native/in-app-review.mdx
new file mode 100644
index 00000000000..0a36bde8f94
--- /dev/null
+++ b/versioned_docs/version-v5/native/in-app-review.mdx
@@ -0,0 +1,91 @@
+---
+sidebar_label: 'In App Review'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# In App Review
+
+This plugin does use the iOS class SKStoreReviewController to open the inApp review popup available since iOS 10.3
+
+This functionality only works on iOS devices
+
+
+ github.com/omaxlive/com.omarben.inappreview
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { InAppReview } from '@awesome-cordova-plugins/in-app-review/ngx';
+
+
+constructor(private inAppReview: InAppReview) { }
+
+...
+
+
+this.inAppReview.requestReview()
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/insomnia.md b/versioned_docs/version-v5/native/insomnia.md
deleted file mode 100644
index d8fd256bcf4..00000000000
--- a/versioned_docs/version-v5/native/insomnia.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-sidebar_label: 'Insomnia'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Insomnia
-
-Prevent the screen of the mobile device from falling asleep.
-
-
- github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- Firefox OS
-- iOS
-- Windows
-- Windows Phone 8
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Insomnia } from '@awesome-cordova-plugins/insomnia/ngx';
-
-constructor(private insomnia: Insomnia) { }
-
-...
-
-this.insomnia.keepAwake()
- .then(
- () => console.log('success'),
- () => console.log('error')
- );
-
-this.insomnia.allowSleepAgain()
- .then(
- () => console.log('success'),
- () => console.log('error')
- );
-```
diff --git a/versioned_docs/version-v5/native/insomnia.mdx b/versioned_docs/version-v5/native/insomnia.mdx
new file mode 100644
index 00000000000..03a27ff3e10
--- /dev/null
+++ b/versioned_docs/version-v5/native/insomnia.mdx
@@ -0,0 +1,97 @@
+---
+sidebar_label: 'Insomnia'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Insomnia
+
+Prevent the screen of the mobile device from falling asleep.
+
+
+ github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- Firefox OS
+- iOS
+- Windows
+- Windows Phone 8
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Insomnia } from '@awesome-cordova-plugins/insomnia/ngx';
+
+constructor(private insomnia: Insomnia) { }
+
+...
+
+this.insomnia.keepAwake()
+ .then(
+ () => console.log('success'),
+ () => console.log('error')
+ );
+
+this.insomnia.allowSleepAgain()
+ .then(
+ () => console.log('success'),
+ () => console.log('error')
+ );
+```
diff --git a/versioned_docs/version-v5/native/instagram.md b/versioned_docs/version-v5/native/instagram.md
deleted file mode 100644
index 033e079aba6..00000000000
--- a/versioned_docs/version-v5/native/instagram.md
+++ /dev/null
@@ -1,87 +0,0 @@
----
-sidebar_label: 'Instagram'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Instagram
-
-Share a photo with the instagram app
-
-
- github.com/vstirbu/InstagramPlugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Instagram } from '@awesome-cordova-plugins/instagram/ngx';
-
-constructor(private instagram: Instagram) { }
-
-...
-
-this.instagram.share('data:image/png;uhduhf3hfif33', 'Caption')
- .then(() => console.log('Shared!'))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/instagram.mdx b/versioned_docs/version-v5/native/instagram.mdx
new file mode 100644
index 00000000000..6878d49f033
--- /dev/null
+++ b/versioned_docs/version-v5/native/instagram.mdx
@@ -0,0 +1,87 @@
+---
+sidebar_label: 'Instagram'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Instagram
+
+Share a photo with the instagram app
+
+
+ github.com/vstirbu/InstagramPlugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Instagram } from '@awesome-cordova-plugins/instagram/ngx';
+
+constructor(private instagram: Instagram) { }
+
+...
+
+this.instagram.share('data:image/png;uhduhf3hfif33', 'Caption')
+ .then(() => console.log('Shared!'))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/intercom.md b/versioned_docs/version-v5/native/intercom.md
deleted file mode 100644
index bb9949627c3..00000000000
--- a/versioned_docs/version-v5/native/intercom.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-sidebar_label: 'Intercom'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Intercom
-
-This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
-Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
-
-
- github.com/intercom/intercom-cordova
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Intercom } from '@awesome-cordova-plugins/intercom/ngx';
-
-
-constructor(private intercom: Intercom) { }
-
-...
-
-this.intercom.registerUnidentifiedUser();
-...
-this.intercom.registerForPush();
-
-```
diff --git a/versioned_docs/version-v5/native/intercom.mdx b/versioned_docs/version-v5/native/intercom.mdx
new file mode 100644
index 00000000000..1e961c1ad47
--- /dev/null
+++ b/versioned_docs/version-v5/native/intercom.mdx
@@ -0,0 +1,88 @@
+---
+sidebar_label: 'Intercom'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Intercom
+
+This is a plugin that allows your Ionic app to use Intercom for iOS and/or Intercom for Android.
+Follow the offical documentation to setup this plugin correctly: https://developers.intercom.com/docs/cordova-phonegap-configuration
+
+
+ github.com/intercom/intercom-cordova
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Intercom } from '@awesome-cordova-plugins/intercom/ngx';
+
+
+constructor(private intercom: Intercom) { }
+
+...
+
+this.intercom.registerUnidentifiedUser();
+...
+this.intercom.registerForPush();
+
+```
diff --git a/versioned_docs/version-v5/native/ionic-webview.md b/versioned_docs/version-v5/native/ionic-webview.md
deleted file mode 100644
index 0942368d3f4..00000000000
--- a/versioned_docs/version-v5/native/ionic-webview.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: 'WebView | Ionic Framework Cordova WebView App Plugin'
-description: 'Cordova WebView plugin allows access to web view utilities on Ionic Framework apps. View the Ionic Web View repository for info on iOS and Android system use.'
-sidebar_label: 'Ionic Webview'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Ionic Webview
-
-Access Web View utilities.
-
-Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
-
-
- github.com/ionic-team/cordova-plugin-ionic-webview
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Capacitor
-
-Not Compatible
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { WebView } from '@awesome-cordova-plugins/ionic-webview/ngx';
-
-
-constructor(private webview: WebView) { }
-
-...
-
-img = this.webview.convertFileSrc('file:///Users/dan/camera-image-12345.png')
-
-```
diff --git a/versioned_docs/version-v5/native/ionic-webview.mdx b/versioned_docs/version-v5/native/ionic-webview.mdx
new file mode 100644
index 00000000000..b5e7f2a1a04
--- /dev/null
+++ b/versioned_docs/version-v5/native/ionic-webview.mdx
@@ -0,0 +1,96 @@
+---
+title: 'WebView | Ionic Framework Cordova WebView App Plugin'
+description: 'Cordova WebView plugin allows access to web view utilities on Ionic Framework apps. View the Ionic Web View repository for info on iOS and Android system use.'
+sidebar_label: 'Ionic Webview'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Ionic Webview
+
+Access Web View utilities.
+
+Requires the Cordova plugin: `cordova-plugin-ionic-webview` > 2.0. For more info, please see the [Ionic Web View](https://github.com/ionic-team/cordova-plugin-ionic-webview) repository.
+
+
+ github.com/ionic-team/cordova-plugin-ionic-webview
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Capacitor
+
+Not Compatible
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { WebView } from '@awesome-cordova-plugins/ionic-webview/ngx';
+
+
+constructor(private webview: WebView) { }
+
+...
+
+img = this.webview.convertFileSrc('file:///Users/dan/camera-image-12345.png')
+
+```
diff --git a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md
deleted file mode 100644
index 0e2946eba89..00000000000
--- a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-sidebar_label: 'ios-aswebauthenticationsession-api'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# ios-aswebauthenticationsession-api
-
-Plugin for iOS 12 ASWebAuthenticationSession API
-
-
- github.com/jwelker110/cordova-plugin-ios-aswebauthenticationsession-api
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { IosASWebauthenticationSession } from '@awesome-cordova-plugins/ios-aswebauthenticationsession-api/ngx';
-
-
-constructor(private IosASWebauthenticationSession: ios-aswebauthenticationsession-api) { }
-
-...
-
-
-this.IosASWebauthenticationSession.start(callbackUrl, authorizeURL)
- .then((redirectUrl: string) => console.log(redirectUrl))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx
new file mode 100644
index 00000000000..b8e5f4a973d
--- /dev/null
+++ b/versioned_docs/version-v5/native/ios-aswebauthenticationsession-api.mdx
@@ -0,0 +1,89 @@
+---
+sidebar_label: 'ios-aswebauthenticationsession-api'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# ios-aswebauthenticationsession-api
+
+Plugin for iOS 12 ASWebAuthenticationSession API
+
+
+ github.com/jwelker110/cordova-plugin-ios-aswebauthenticationsession-api
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { IosASWebauthenticationSession } from '@awesome-cordova-plugins/ios-aswebauthenticationsession-api/ngx';
+
+
+constructor(private IosASWebauthenticationSession: ios-aswebauthenticationsession-api) { }
+
+...
+
+
+this.IosASWebauthenticationSession.start(callbackUrl, authorizeURL)
+ .then((redirectUrl: string) => console.log(redirectUrl))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/is-debug.md b/versioned_docs/version-v5/native/is-debug.md
deleted file mode 100644
index 8e1029377cf..00000000000
--- a/versioned_docs/version-v5/native/is-debug.md
+++ /dev/null
@@ -1,87 +0,0 @@
----
-sidebar_label: 'Is Debug'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Is Debug
-
-Detect if the app is running in debug mode or not.
-Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
-
-
- github.com/mattlewis92/cordova-plugin-is-debug
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { IsDebug } from '@awesome-cordova-plugins/is-debug/ngx';
-
-constructor(private isDebug: IsDebug) { }
-
-...
-
-this.isDebug.getIsDebug()
- .then(isDebug => console.log('Is debug:', isDebug))
- .catch(err => console.error(err));
-
-```
diff --git a/versioned_docs/version-v5/native/is-debug.mdx b/versioned_docs/version-v5/native/is-debug.mdx
new file mode 100644
index 00000000000..6a2ba332e5d
--- /dev/null
+++ b/versioned_docs/version-v5/native/is-debug.mdx
@@ -0,0 +1,87 @@
+---
+sidebar_label: 'Is Debug'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Is Debug
+
+Detect if the app is running in debug mode or not.
+Debug mode is when the app is built and installed locally via xcode / eclipse / the cordova cli etc, compared to release mode when the app was downloaded from the app / play store via an end user.
+
+
+ github.com/mattlewis92/cordova-plugin-is-debug
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { IsDebug } from '@awesome-cordova-plugins/is-debug/ngx';
+
+constructor(private isDebug: IsDebug) { }
+
+...
+
+this.isDebug.getIsDebug()
+ .then(isDebug => console.log('Is debug:', isDebug))
+ .catch(err => console.error(err));
+
+```
diff --git a/versioned_docs/version-v5/native/keyboard.md b/versioned_docs/version-v5/native/keyboard.md
deleted file mode 100644
index 75ca74637d7..00000000000
--- a/versioned_docs/version-v5/native/keyboard.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-sidebar_label: 'Keyboard'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Keyboard
-
-Keyboard plugin for Cordova.
-
-Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
-
-
- github.com/ionic-team/cordova-plugin-ionic-keyboard
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Capacitor
-
-Not Compatible
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Keyboard } from '@awesome-cordova-plugins/keyboard/ngx';
-
-constructor(private keyboard: Keyboard) { }
-
-...
-
-this.keyboard.show();
-
-this.keyboard.hide();
-
-```
diff --git a/versioned_docs/version-v5/native/keyboard.mdx b/versioned_docs/version-v5/native/keyboard.mdx
new file mode 100644
index 00000000000..5677e0a3e17
--- /dev/null
+++ b/versioned_docs/version-v5/native/keyboard.mdx
@@ -0,0 +1,94 @@
+---
+sidebar_label: 'Keyboard'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Keyboard
+
+Keyboard plugin for Cordova.
+
+Requires Cordova plugin: `cordova-plugin-ionic-keyboard`. For more info, please see the [Keyboard plugin docs](https://github.com/ionic-team/cordova-plugin-ionic-keyboard).
+
+
+ github.com/ionic-team/cordova-plugin-ionic-keyboard
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Capacitor
+
+Not Compatible
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Keyboard } from '@awesome-cordova-plugins/keyboard/ngx';
+
+constructor(private keyboard: Keyboard) { }
+
+...
+
+this.keyboard.show();
+
+this.keyboard.hide();
+
+```
diff --git a/versioned_docs/version-v5/native/keychain.md b/versioned_docs/version-v5/native/keychain.md
deleted file mode 100644
index dfd93eb3ca8..00000000000
--- a/versioned_docs/version-v5/native/keychain.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-sidebar_label: 'Keychain'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Keychain
-
-Get and set data in the iOS Keychain
-
-Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
-
-See also [Secure Storage](https://ionicframework.com/docs/native/secure-storage/) for more supported platforms.
-
-
- github.com/ionic-team/cordova-plugin-ios-keychain
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Keychain } from '@awesome-cordova-plugins/keychain/ngx';
-
-constructor(private keychain: Keychain) { }
-
-...
-
-this.keychain.set(key, value).then(() => {
- this.keychain.get(key)
- .then(value => console.log('Got value', value))
- .catch(err => console.error('Error getting', err));
-})
-.catch(err => console.error('Error setting', err));
-```
diff --git a/versioned_docs/version-v5/native/keychain.mdx b/versioned_docs/version-v5/native/keychain.mdx
new file mode 100644
index 00000000000..5dae923222b
--- /dev/null
+++ b/versioned_docs/version-v5/native/keychain.mdx
@@ -0,0 +1,93 @@
+---
+sidebar_label: 'Keychain'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Keychain
+
+Get and set data in the iOS Keychain
+
+Requires Cordova plugin: `cordova-plugin-ios-keychain`. For more info, please see the [Keychain plugin docs](https://github.com/ionic-team/cordova-plugin-ios-keychain).
+
+See also [Secure Storage](https://ionicframework.com/docs/native/secure-storage/) for more supported platforms.
+
+
+ github.com/ionic-team/cordova-plugin-ios-keychain
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Keychain } from '@awesome-cordova-plugins/keychain/ngx';
+
+constructor(private keychain: Keychain) { }
+
+...
+
+this.keychain.set(key, value).then(() => {
+ this.keychain.get(key)
+ .then(value => console.log('Got value', value))
+ .catch(err => console.error('Error getting', err));
+})
+.catch(err => console.error('Error setting', err));
+```
diff --git a/versioned_docs/version-v5/native/kommunicate.md b/versioned_docs/version-v5/native/kommunicate.md
deleted file mode 100644
index 57f5b2be2b6..00000000000
--- a/versioned_docs/version-v5/native/kommunicate.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-sidebar_label: 'Kommunicate'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Kommunicate
-
-The plugin for the Kommunicate SDK.
-With the help of this plugin, you can easily add human + bot chat support functionality to you app.
-Refer to: TODO: insert site link
-For documentation: TODO: insert link
-
-
- github.com/Kommunicate-io/Kommunicate-Cordova-Ionic-PhoneGap-Chat-Plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Kommunicate } from '@awesome-cordova-plugins/Kommunicate';
-
-constructor(private kommunicate: Kommunicate) { }
-//also add [..., Kommunicate, ... ] inside the providers array, if required
-
-var kmUser = {
- userId : 'randomstring',
- authenticationTypeId : 1
-};
-
-this.kommunicate.login(kmUser)
- .then((res: any) => console.log("Sucessfully logged in." + res))
- .catch((error: any) => console.error("Error logging in." + error));
-
-var conversationObject = {
- isUnique : false
-};
-
-this.kommunicate.conversationBuilder(converationObject)
- .then((clientChannelKey: any) => console.log("Kommunicate create conversation successful the clientChannelKey is : " + clientChannelKey))
- .catch((error: any) => console.error("Error creating conversation." + error));
-
-```
diff --git a/versioned_docs/version-v5/native/kommunicate.mdx b/versioned_docs/version-v5/native/kommunicate.mdx
new file mode 100644
index 00000000000..c69dd4bbf4e
--- /dev/null
+++ b/versioned_docs/version-v5/native/kommunicate.mdx
@@ -0,0 +1,104 @@
+---
+sidebar_label: 'Kommunicate'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Kommunicate
+
+The plugin for the Kommunicate SDK.
+With the help of this plugin, you can easily add human + bot chat support functionality to you app.
+Refer to: TODO: insert site link
+For documentation: TODO: insert link
+
+
+ github.com/Kommunicate-io/Kommunicate-Cordova-Ionic-PhoneGap-Chat-Plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Kommunicate } from '@awesome-cordova-plugins/Kommunicate';
+
+constructor(private kommunicate: Kommunicate) { }
+//also add [..., Kommunicate, ... ] inside the providers array, if required
+
+var kmUser = {
+ userId : 'randomstring',
+ authenticationTypeId : 1
+};
+
+this.kommunicate.login(kmUser)
+ .then((res: any) => console.log("Sucessfully logged in." + res))
+ .catch((error: any) => console.error("Error logging in." + error));
+
+var conversationObject = {
+ isUnique : false
+};
+
+this.kommunicate.conversationBuilder(converationObject)
+ .then((clientChannelKey: any) => console.log("Kommunicate create conversation successful the clientChannelKey is : " + clientChannelKey))
+ .catch((error: any) => console.error("Error creating conversation." + error));
+
+```
diff --git a/versioned_docs/version-v5/native/launch-navigator.md b/versioned_docs/version-v5/native/launch-navigator.md
deleted file mode 100644
index a384c735a00..00000000000
--- a/versioned_docs/version-v5/native/launch-navigator.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-sidebar_label: 'Launch Navigator'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Launch Navigator
-
-Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
-
-
- github.com/dpa99c/phonegap-launch-navigator
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows
-- Windows Phone 8
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-Please refer to the plugin's repo for detailed usage. This docs page only explains the Native wrapper.
-
-```tsx
-import { LaunchNavigator, LaunchNavigatorOptions } from '@awesome-cordova-plugins/launch-navigator/ngx';
-
-constructor(private launchNavigator: LaunchNavigator) { }
-
-...
-
-let options: LaunchNavigatorOptions = {
- start: 'London, ON',
- app: LaunchNavigator.APPS.UBER
-}
-
-this.launchNavigator.navigate('Toronto, ON', options)
- .then(
- success => console.log('Launched navigator'),
- error => console.log('Error launching navigator', error)
- );
-```
diff --git a/versioned_docs/version-v5/native/launch-navigator.mdx b/versioned_docs/version-v5/native/launch-navigator.mdx
new file mode 100644
index 00000000000..11a8447f165
--- /dev/null
+++ b/versioned_docs/version-v5/native/launch-navigator.mdx
@@ -0,0 +1,98 @@
+---
+sidebar_label: 'Launch Navigator'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Launch Navigator
+
+Requires Cordova plugin: uk.co.workingedge.phonegap.plugin.launchnavigator. For more info, please see the [LaunchNavigator plugin docs](https://github.com/dpa99c/phonegap-launch-navigator).
+
+
+ github.com/dpa99c/phonegap-launch-navigator
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows
+- Windows Phone 8
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+Please refer to the plugin's repo for detailed usage. This docs page only explains the Native wrapper.
+
+```tsx
+import { LaunchNavigator, LaunchNavigatorOptions } from '@awesome-cordova-plugins/launch-navigator/ngx';
+
+constructor(private launchNavigator: LaunchNavigator) { }
+
+...
+
+let options: LaunchNavigatorOptions = {
+ start: 'London, ON',
+ app: LaunchNavigator.APPS.UBER
+}
+
+this.launchNavigator.navigate('Toronto, ON', options)
+ .then(
+ success => console.log('Launched navigator'),
+ error => console.log('Error launching navigator', error)
+ );
+```
diff --git a/versioned_docs/version-v5/native/launch-review.md b/versioned_docs/version-v5/native/launch-review.md
deleted file mode 100644
index 9877914e443..00000000000
--- a/versioned_docs/version-v5/native/launch-review.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-sidebar_label: 'Launch Review'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Launch Review
-
-Assists in leaving user reviews/ratings in the App Stores.
-
-- Launches the platform's App Store page for the current app in order for the user to leave a review.
-- On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
-
-
- github.com/dpa99c/cordova-launch-review
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { LaunchReview } from '@awesome-cordova-plugins/launch-review/ngx';
-
-constructor(private launchReview: LaunchReview) { }
-
-...
-
-this.launchReview.launch()
- .then(() => console.log('Successfully launched store app'));
-
-if(this.launchReview.isRatingSupported()){
- this.launchReview.rating()
- .then(() => console.log('Successfully launched rating dialog'));
-}
-```
diff --git a/versioned_docs/version-v5/native/launch-review.mdx b/versioned_docs/version-v5/native/launch-review.mdx
new file mode 100644
index 00000000000..629b8e77ad9
--- /dev/null
+++ b/versioned_docs/version-v5/native/launch-review.mdx
@@ -0,0 +1,93 @@
+---
+sidebar_label: 'Launch Review'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Launch Review
+
+Assists in leaving user reviews/ratings in the App Stores.
+
+- Launches the platform's App Store page for the current app in order for the user to leave a review.
+- On iOS (10.3 and above) invokes the native in-app rating dialog which allows a user to rate your app without needing to open the App Store.
+
+
+ github.com/dpa99c/cordova-launch-review
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { LaunchReview } from '@awesome-cordova-plugins/launch-review/ngx';
+
+constructor(private launchReview: LaunchReview) { }
+
+...
+
+this.launchReview.launch()
+ .then(() => console.log('Successfully launched store app'));
+
+if(this.launchReview.isRatingSupported()){
+ this.launchReview.rating()
+ .then(() => console.log('Successfully launched rating dialog'));
+}
+```
diff --git a/versioned_docs/version-v5/native/line-login.md b/versioned_docs/version-v5/native/line-login.md
deleted file mode 100644
index 1fe09c04178..00000000000
--- a/versioned_docs/version-v5/native/line-login.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-sidebar_label: 'Line Login'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Line Login
-
-The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
-
-
- github.com/nrikiji/cordova-line-login-plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { LineLogin } from '@awesome-cordova-plugins/line-login/ngx';
-
-
-constructor(private lineLogin: LineLogin) { }
-
-...
-
-
-this.lineLogin.initialize({ channel_id: "xxxxxxxxxx" })
-
-this.lineLogin.login()
- .then(result => console.log(result))
- .catch(error => console.log(error))
-
-```
diff --git a/versioned_docs/version-v5/native/line-login.mdx b/versioned_docs/version-v5/native/line-login.mdx
new file mode 100644
index 00000000000..7c6cbc2ad13
--- /dev/null
+++ b/versioned_docs/version-v5/native/line-login.mdx
@@ -0,0 +1,92 @@
+---
+sidebar_label: 'Line Login'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Line Login
+
+The function login, logs out, acquires, verifies, and refreshes the access token. The version of LineSDK you are using is as follows.
+
+
+ github.com/nrikiji/cordova-line-login-plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { LineLogin } from '@awesome-cordova-plugins/line-login/ngx';
+
+
+constructor(private lineLogin: LineLogin) { }
+
+...
+
+
+this.lineLogin.initialize({ channel_id: "xxxxxxxxxx" })
+
+this.lineLogin.login()
+ .then(result => console.log(result))
+ .catch(error => console.log(error))
+
+```
diff --git a/versioned_docs/version-v5/native/local-notifications.md b/versioned_docs/version-v5/native/local-notifications.md
deleted file mode 100644
index 01767dd661d..00000000000
--- a/versioned_docs/version-v5/native/local-notifications.md
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: 'Local Notifications: iOS & Android | Cordova Local Notifications'
-description: 'The Cordova Local Notifications Plugin allows you to display local notifications from your Ionic Framework application on iOS, Android, or Windows devices.'
-sidebar_label: 'Local Notifications'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Local Notifications
-
-This plugin allows you to display local notifications on the device
-
-
- github.com/katzer/cordova-plugin-local-notifications
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { LocalNotifications } from '@awesome-cordova-plugins/local-notifications/ngx';
-
-
-constructor(private localNotifications: LocalNotifications) { }
-
-...
-
-
-// Schedule a single notification
-this.localNotifications.schedule({
- id: 1,
- text: 'Single ILocalNotification',
- sound: isAndroid? 'file://sound.mp3': 'file://beep.caf',
- data: { secret: key }
-});
-
-
-// Schedule multiple notifications
-this.localNotifications.schedule([{
- id: 1,
- text: 'Multi ILocalNotification 1',
- sound: isAndroid ? 'file://sound.mp3': 'file://beep.caf',
- data: { secret:key }
- },{
- id: 2,
- title: 'Local ILocalNotification Example',
- text: 'Multi ILocalNotification 2',
- icon: 'http://example.com/icon.png'
-}]);
-
-
-// Schedule delayed notification
-this.localNotifications.schedule({
- text: 'Delayed ILocalNotification',
- trigger: {at: new Date(new Date().getTime() + 3600)},
- led: 'FF0000',
- sound: null
-});
-```
diff --git a/versioned_docs/version-v5/native/local-notifications.mdx b/versioned_docs/version-v5/native/local-notifications.mdx
new file mode 100644
index 00000000000..82613baad49
--- /dev/null
+++ b/versioned_docs/version-v5/native/local-notifications.mdx
@@ -0,0 +1,119 @@
+---
+title: 'Local Notifications: iOS & Android | Cordova Local Notifications'
+description: 'The Cordova Local Notifications Plugin allows you to display local notifications from your Ionic Framework application on iOS, Android, or Windows devices.'
+sidebar_label: 'Local Notifications'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Local Notifications
+
+This plugin allows you to display local notifications on the device
+
+
+ github.com/katzer/cordova-plugin-local-notifications
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { LocalNotifications } from '@awesome-cordova-plugins/local-notifications/ngx';
+
+
+constructor(private localNotifications: LocalNotifications) { }
+
+...
+
+
+// Schedule a single notification
+this.localNotifications.schedule({
+ id: 1,
+ text: 'Single ILocalNotification',
+ sound: isAndroid? 'file://sound.mp3': 'file://beep.caf',
+ data: { secret: key }
+});
+
+
+// Schedule multiple notifications
+this.localNotifications.schedule([{
+ id: 1,
+ text: 'Multi ILocalNotification 1',
+ sound: isAndroid ? 'file://sound.mp3': 'file://beep.caf',
+ data: { secret:key }
+ },{
+ id: 2,
+ title: 'Local ILocalNotification Example',
+ text: 'Multi ILocalNotification 2',
+ icon: 'http://example.com/icon.png'
+}]);
+
+
+// Schedule delayed notification
+this.localNotifications.schedule({
+ text: 'Delayed ILocalNotification',
+ trigger: {at: new Date(new Date().getTime() + 3600)},
+ led: 'FF0000',
+ sound: null
+});
+```
diff --git a/versioned_docs/version-v5/native/location-accuracy.md b/versioned_docs/version-v5/native/location-accuracy.md
deleted file mode 100644
index 8fc8a83c460..00000000000
--- a/versioned_docs/version-v5/native/location-accuracy.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-sidebar_label: 'Location Accuracy'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Location Accuracy
-
-This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
-
-
- github.com/dpa99c/cordova-plugin-request-location-accuracy
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { LocationAccuracy } from '@awesome-cordova-plugins/location-accuracy/ngx';
-
-constructor(private locationAccuracy: LocationAccuracy) { }
-
-...
-
-this.locationAccuracy.canRequest().then((canRequest: boolean) => {
-
- if(canRequest) {
- // the accuracy option will be ignored by iOS
- this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
- () => console.log('Request successful'),
- error => console.log('Error requesting location permissions', error)
- );
- }
-
-});
-
-```
diff --git a/versioned_docs/version-v5/native/location-accuracy.mdx b/versioned_docs/version-v5/native/location-accuracy.mdx
new file mode 100644
index 00000000000..3b8ef2adb65
--- /dev/null
+++ b/versioned_docs/version-v5/native/location-accuracy.mdx
@@ -0,0 +1,96 @@
+---
+sidebar_label: 'Location Accuracy'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Location Accuracy
+
+This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.
+
+
+ github.com/dpa99c/cordova-plugin-request-location-accuracy
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { LocationAccuracy } from '@awesome-cordova-plugins/location-accuracy/ngx';
+
+constructor(private locationAccuracy: LocationAccuracy) { }
+
+...
+
+this.locationAccuracy.canRequest().then((canRequest: boolean) => {
+
+ if(canRequest) {
+ // the accuracy option will be ignored by iOS
+ this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
+ () => console.log('Request successful'),
+ error => console.log('Error requesting location permissions', error)
+ );
+ }
+
+});
+
+```
diff --git a/versioned_docs/version-v5/native/lottie-splash-screen.md b/versioned_docs/version-v5/native/lottie-splash-screen.md
deleted file mode 100644
index 7349ec5ca64..00000000000
--- a/versioned_docs/version-v5/native/lottie-splash-screen.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-sidebar_label: 'Lottie Splash Screen'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Lottie Splash Screen
-
-Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
-
-
- github.com/timbru31/cordova-plugin-lottie-splashscreen
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { LottieSplashScreen } from '@awesome-cordova-plugins/lottie-splash-screen/ngx';
-
-
-constructor(private lottieSplashScreen: LottieSplashScreen) { }
-
-...
-
-
-this.lottieSplashScreen.show('www/lottie/animation.json', false, 1024, 768)
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/lottie-splash-screen.mdx b/versioned_docs/version-v5/native/lottie-splash-screen.mdx
new file mode 100644
index 00000000000..28e6486c18d
--- /dev/null
+++ b/versioned_docs/version-v5/native/lottie-splash-screen.mdx
@@ -0,0 +1,90 @@
+---
+sidebar_label: 'Lottie Splash Screen'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Lottie Splash Screen
+
+Cordova plugin to show bodymovin/Lottie animations as the splash screen with Airbnb's Lottie wrapper
+
+
+ github.com/timbru31/cordova-plugin-lottie-splashscreen
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { LottieSplashScreen } from '@awesome-cordova-plugins/lottie-splash-screen/ngx';
+
+
+constructor(private lottieSplashScreen: LottieSplashScreen) { }
+
+...
+
+
+this.lottieSplashScreen.show('www/lottie/animation.json', false, 1024, 768)
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/media-capture.md b/versioned_docs/version-v5/native/media-capture.md
deleted file mode 100644
index 62085c70145..00000000000
--- a/versioned_docs/version-v5/native/media-capture.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-sidebar_label: 'Media Capture'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Media Capture
-
-This plugin provides access to the device's audio, image, and video capture capabilities.
-
-Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
-
-
- github.com/apache/cordova-plugin-media-capture
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@awesome-cordova-plugins/media-capture/ngx';
-
-
-constructor(private mediaCapture: MediaCapture) { }
-
-...
-
-
-let options: CaptureImageOptions = { limit: 3 }
-this.mediaCapture.captureImage(options)
- .then(
- (data: MediaFile[]) => console.log(data),
- (err: CaptureError) => console.error(err)
- );
-
-```
diff --git a/versioned_docs/version-v5/native/media-capture.mdx b/versioned_docs/version-v5/native/media-capture.mdx
new file mode 100644
index 00000000000..58bb68cf8fd
--- /dev/null
+++ b/versioned_docs/version-v5/native/media-capture.mdx
@@ -0,0 +1,97 @@
+---
+sidebar_label: 'Media Capture'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Media Capture
+
+This plugin provides access to the device's audio, image, and video capture capabilities.
+
+Requires Cordova plugin: `cordova-plugin-media-capture`. For more info, please see the [Media Capture plugin docs](https://github.com/apache/cordova-plugin-media-capture).
+
+
+ github.com/apache/cordova-plugin-media-capture
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@awesome-cordova-plugins/media-capture/ngx';
+
+
+constructor(private mediaCapture: MediaCapture) { }
+
+...
+
+
+let options: CaptureImageOptions = { limit: 3 }
+this.mediaCapture.captureImage(options)
+ .then(
+ (data: MediaFile[]) => console.log(data),
+ (err: CaptureError) => console.error(err)
+ );
+
+```
diff --git a/versioned_docs/version-v5/native/media.md b/versioned_docs/version-v5/native/media.md
deleted file mode 100644
index c6a0f1aa08d..00000000000
--- a/versioned_docs/version-v5/native/media.md
+++ /dev/null
@@ -1,163 +0,0 @@
----
-sidebar_label: 'Media'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Media
-
-This plugin provides the ability to record and play back audio files on a device.
-
-
- github.com/apache/cordova-plugin-media
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Media, MediaObject } from '@awesome-cordova-plugins/media/ngx';
-
-
-constructor(private media: Media) { }
-
-
-...
-
-
-// Create a Media instance. Expects path to file or url as argument
-// We can optionally pass a second argument to track the status of the media
-
-const file: MediaObject = this.media.create('file.mp3');
-
-// to listen to plugin events:
-
-file.onStatusUpdate.subscribe(status => console.log(status)); // fires when file status changes
-
-file.onSuccess.subscribe(() => console.log('Action is successful'));
-
-file.onError.subscribe(error => console.log('Error!', error));
-
-// play the file
-file.play();
-
-// pause the file
-file.pause();
-
-// get current playback position
-file.getCurrentPosition().then((position) => {
- console.log(position);
-});
-
-// get file duration
-let duration = file.getDuration();
-console.log(duration);
-
-// skip to 10 seconds (expects int value in ms)
-file.seekTo(10000);
-
-// stop playing the file
-file.stop();
-
-// release the native audio resource
-// Platform Quirks:
-// iOS simply create a new instance and the old one will be overwritten
-// Android you must call release() to destroy instances of media when you are done
-file.release();
-
-
-
-// Recording to a file
-const file: MediaObject = this.media.create('path/to/file.mp3');
-
-file.startRecord();
-
-file.stopRecord();
-
-
-```
-
-Some hints if you are using iOS and recording doesn't work:
-1.) Try to use a absolute file path but remove beginning "file://".
-Then it looks like: `/var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/tmp/my_file.m4a`
-Example: `this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a')`
-2.) If that's not working, too, create the file before using.
-Example:
-
-```tsx
-import { Media, MediaObject } from '@awesome-cordova-plugins/media/ngx';
-import { File } from '@awesome-cordova-plugins/file/ngx';
-
-...
-
-constructor(private media: Media, private file: File) { }
-
-...
-
-this.file.createFile(this.file.tempDirectory, 'my_file.m4a', true).then(() => {
- let file = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a');
- file.startRecord();
- window.setTimeout(() => file.stopRecord(), 10000);
-});
-```
-
-You can find the reasons here: https://github.com/ionic-team/ionic-native/issues/1452#issuecomment-299605906
diff --git a/versioned_docs/version-v5/native/media.mdx b/versioned_docs/version-v5/native/media.mdx
new file mode 100644
index 00000000000..e1e3fafff39
--- /dev/null
+++ b/versioned_docs/version-v5/native/media.mdx
@@ -0,0 +1,163 @@
+---
+sidebar_label: 'Media'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Media
+
+This plugin provides the ability to record and play back audio files on a device.
+
+
+ github.com/apache/cordova-plugin-media
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Media, MediaObject } from '@awesome-cordova-plugins/media/ngx';
+
+
+constructor(private media: Media) { }
+
+
+...
+
+
+// Create a Media instance. Expects path to file or url as argument
+// We can optionally pass a second argument to track the status of the media
+
+const file: MediaObject = this.media.create('file.mp3');
+
+// to listen to plugin events:
+
+file.onStatusUpdate.subscribe(status => console.log(status)); // fires when file status changes
+
+file.onSuccess.subscribe(() => console.log('Action is successful'));
+
+file.onError.subscribe(error => console.log('Error!', error));
+
+// play the file
+file.play();
+
+// pause the file
+file.pause();
+
+// get current playback position
+file.getCurrentPosition().then((position) => {
+ console.log(position);
+});
+
+// get file duration
+let duration = file.getDuration();
+console.log(duration);
+
+// skip to 10 seconds (expects int value in ms)
+file.seekTo(10000);
+
+// stop playing the file
+file.stop();
+
+// release the native audio resource
+// Platform Quirks:
+// iOS simply create a new instance and the old one will be overwritten
+// Android you must call release() to destroy instances of media when you are done
+file.release();
+
+
+
+// Recording to a file
+const file: MediaObject = this.media.create('path/to/file.mp3');
+
+file.startRecord();
+
+file.stopRecord();
+
+
+```
+
+Some hints if you are using iOS and recording doesn't work:
+1.) Try to use a absolute file path but remove beginning "file://".
+Then it looks like: `/var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/tmp/my_file.m4a`
+Example: `this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a')`
+2.) If that's not working, too, create the file before using.
+Example:
+
+```tsx
+import { Media, MediaObject } from '@awesome-cordova-plugins/media/ngx';
+import { File } from '@awesome-cordova-plugins/file/ngx';
+
+...
+
+constructor(private media: Media, private file: File) { }
+
+...
+
+this.file.createFile(this.file.tempDirectory, 'my_file.m4a', true).then(() => {
+ let file = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a');
+ file.startRecord();
+ window.setTimeout(() => file.stopRecord(), 10000);
+});
+```
+
+You can find the reasons here: https://github.com/ionic-team/ionic-native/issues/1452#issuecomment-299605906
diff --git a/versioned_docs/version-v5/native/metrix.md b/versioned_docs/version-v5/native/metrix.md
deleted file mode 100644
index 88665cc8b26..00000000000
--- a/versioned_docs/version-v5/native/metrix.md
+++ /dev/null
@@ -1,87 +0,0 @@
----
-sidebar_label: 'Metrix'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Metrix
-
-This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
-
-Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
-
-
- github.com/metrixorg/MetrixSDK-CordovaPlugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
- import { Metrix, MetrixConfig } from '@awesome-cordova-plugins/metrix';
-
- constructor(private metrix: Metrix) { }
-
- ...
-
- const config = new MetrixConfig('APP-ID-HERE');
- // Set other config properties.
- metrix.create(config);
-
-```
diff --git a/versioned_docs/version-v5/native/metrix.mdx b/versioned_docs/version-v5/native/metrix.mdx
new file mode 100644
index 00000000000..dec157af897
--- /dev/null
+++ b/versioned_docs/version-v5/native/metrix.mdx
@@ -0,0 +1,87 @@
+---
+sidebar_label: 'Metrix'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Metrix
+
+This is the Ionic Cordova SDK of Metrix™. You can read more about Metrix™ at metrix.ir.
+
+Requires Cordova plugin: `ir.metrix.sdk`. For more info, please see the [Metrix Cordova SDK](https://github.com/metrixorg/MetrixSDK-CordovaPlugin)
+
+
+ github.com/metrixorg/MetrixSDK-CordovaPlugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+ import { Metrix, MetrixConfig } from '@awesome-cordova-plugins/metrix';
+
+ constructor(private metrix: Metrix) { }
+
+ ...
+
+ const config = new MetrixConfig('APP-ID-HERE');
+ // Set other config properties.
+ metrix.create(config);
+
+```
diff --git a/versioned_docs/version-v5/native/mixpanel.md b/versioned_docs/version-v5/native/mixpanel.md
deleted file mode 100644
index 258969fd1bc..00000000000
--- a/versioned_docs/version-v5/native/mixpanel.md
+++ /dev/null
@@ -1,87 +0,0 @@
----
-sidebar_label: 'Mixpanel'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Mixpanel
-
-Cordova Plugin that wraps Mixpanel SDK for Android and iOS
-
-
- github.com/samzilverberg/cordova-mixpanel-plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Mixpanel } from '@awesome-cordova-plugins/mixpanel/ngx';
-
-constructor(private mixpanel: Mixpanel, private mixpanelPeople: MixpanelPeople) { }
-
-...
-
-this.mixpanel.init(token)
- .then(onSuccess)
- .catch(onError);
-
-```
diff --git a/versioned_docs/version-v5/native/mixpanel.mdx b/versioned_docs/version-v5/native/mixpanel.mdx
new file mode 100644
index 00000000000..93d41ce1b10
--- /dev/null
+++ b/versioned_docs/version-v5/native/mixpanel.mdx
@@ -0,0 +1,87 @@
+---
+sidebar_label: 'Mixpanel'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Mixpanel
+
+Cordova Plugin that wraps Mixpanel SDK for Android and iOS
+
+
+ github.com/samzilverberg/cordova-mixpanel-plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Mixpanel } from '@awesome-cordova-plugins/mixpanel/ngx';
+
+constructor(private mixpanel: Mixpanel, private mixpanelPeople: MixpanelPeople) { }
+
+...
+
+this.mixpanel.init(token)
+ .then(onSuccess)
+ .catch(onError);
+
+```
diff --git a/versioned_docs/version-v5/native/mlkit-translate.md b/versioned_docs/version-v5/native/mlkit-translate.md
deleted file mode 100644
index ad87e8d07b1..00000000000
--- a/versioned_docs/version-v5/native/mlkit-translate.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-sidebar_label: 'MLKitTranslate'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# MLKitTranslate
-
-Plugin that implements MLKit Translation and Language Identification features.
-
-
- github.com/rigelglen/cordova-plugin-mlkit-translate
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { MLKitTranslate } from '@awesome-cordova-plugins/ml-kit-translate';
-
-
-constructor(private mlkitTranslate: MLKitTranslate) { }
-
-...
-
-this.mlkitTranslate.translate('Hello', 'en', 'es')
- .then((resultText: string) => console.log(res))
- .catch((error: string) => console.error(error));
-
-@interfaces
-LanguageModel
-```
diff --git a/versioned_docs/version-v5/native/mlkit-translate.mdx b/versioned_docs/version-v5/native/mlkit-translate.mdx
new file mode 100644
index 00000000000..8f8a62ea0cd
--- /dev/null
+++ b/versioned_docs/version-v5/native/mlkit-translate.mdx
@@ -0,0 +1,91 @@
+---
+sidebar_label: 'MLKitTranslate'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# MLKitTranslate
+
+Plugin that implements MLKit Translation and Language Identification features.
+
+
+ github.com/rigelglen/cordova-plugin-mlkit-translate
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { MLKitTranslate } from '@awesome-cordova-plugins/ml-kit-translate';
+
+
+constructor(private mlkitTranslate: MLKitTranslate) { }
+
+...
+
+this.mlkitTranslate.translate('Hello', 'en', 'es')
+ .then((resultText: string) => console.log(res))
+ .catch((error: string) => console.error(error));
+
+@interfaces
+LanguageModel
+```
diff --git a/versioned_docs/version-v5/native/mobile-messaging.md b/versioned_docs/version-v5/native/mobile-messaging.md
deleted file mode 100644
index 47ad73602c8..00000000000
--- a/versioned_docs/version-v5/native/mobile-messaging.md
+++ /dev/null
@@ -1,109 +0,0 @@
----
-sidebar_label: 'Mobile Messaging'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Mobile Messaging
-
-Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
-In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
-This document describes library integration steps for your Cordova project.
-
-For more info see [Cordova plugin docs](https://github.com/infobip/mobile-messaging-cordova-plugin)
-
-
- github.com/infobip/mobile-messaging-cordova-plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { MobileMessaging } from '@awesome-cordova-plugins/mobile-messaging/ngx';
-
-
-constructor(private mobileMessaging: MobileMessaging) { }
-
-...
-
-
- this.mobileMessaging.init({
- applicationCode: '<your_application_code>',
- geofencingEnabled: '<true/false>',
- defaultMessageStorage: '<true/false>',
- ios: {
- notificationTypes: ['alert', 'badge', 'sound']
- },
- android: {
- notificationIcon: <String; a resource name for a status bar icon (without extension), located in '/platforms/android/app/src/main/res/mipmap'>,
- multipleNotifications: <Boolean; set to 'true' to enable multiple notifications>,
- notificationAccentColor: <String; set to hex color value in format '#RRGGBB' or '#AARRGGBB'>
- }}, (err) => {
- ...
- });
-
- this.mobileMessaging.register('messageReceived').subscribe((message: Message) => {
- ...
- });
-
-```
diff --git a/versioned_docs/version-v5/native/mobile-messaging.mdx b/versioned_docs/version-v5/native/mobile-messaging.mdx
new file mode 100644
index 00000000000..4770742e430
--- /dev/null
+++ b/versioned_docs/version-v5/native/mobile-messaging.mdx
@@ -0,0 +1,109 @@
+---
+sidebar_label: 'Mobile Messaging'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Mobile Messaging
+
+Mobile Messaging SDK is designed and developed to easily enable push notification channel in your mobile application.
+In almost no time of implementation you get push notification in your application and access to the features of [Infobip IP Messaging Platform](https://portal.infobip.com/push/).
+This document describes library integration steps for your Cordova project.
+
+For more info see [Cordova plugin docs](https://github.com/infobip/mobile-messaging-cordova-plugin)
+
+
+ github.com/infobip/mobile-messaging-cordova-plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { MobileMessaging } from '@awesome-cordova-plugins/mobile-messaging/ngx';
+
+
+constructor(private mobileMessaging: MobileMessaging) { }
+
+...
+
+
+ this.mobileMessaging.init({
+ applicationCode: '<your_application_code>',
+ geofencingEnabled: '<true/false>',
+ defaultMessageStorage: '<true/false>',
+ ios: {
+ notificationTypes: ['alert', 'badge', 'sound']
+ },
+ android: {
+ notificationIcon: <String; a resource name for a status bar icon (without extension), located in '/platforms/android/app/src/main/res/mipmap'>,
+ multipleNotifications: <Boolean; set to 'true' to enable multiple notifications>,
+ notificationAccentColor: <String; set to hex color value in format '#RRGGBB' or '#AARRGGBB'>
+ }}, (err) => {
+ ...
+ });
+
+ this.mobileMessaging.register('messageReceived').subscribe((message: Message) => {
+ ...
+ });
+
+```
diff --git a/versioned_docs/version-v5/native/multiple-document-picker.md b/versioned_docs/version-v5/native/multiple-document-picker.md
deleted file mode 100644
index b0b6a9f4d7c..00000000000
--- a/versioned_docs/version-v5/native/multiple-document-picker.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-sidebar_label: 'Multiple Documents Picker'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Multiple Documents Picker
-
-This plugin allows users to pick multiple documents/images at once
-
-
- github.com/akeotech/cordova-plugin-multiple-documents-picker
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { MultipleDocumentsPicker } from '@awesome-cordova-plugins/multiple-document-picker/ngx';
-
-
-constructor(private multipleDocumentsPicker: MultipleDocumentsPicker) { }
-
-...
-
-
-this.multipleDocumentsPicker.pick(1)
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/multiple-document-picker.mdx b/versioned_docs/version-v5/native/multiple-document-picker.mdx
new file mode 100644
index 00000000000..0d87d31f6da
--- /dev/null
+++ b/versioned_docs/version-v5/native/multiple-document-picker.mdx
@@ -0,0 +1,90 @@
+---
+sidebar_label: 'Multiple Documents Picker'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Multiple Documents Picker
+
+This plugin allows users to pick multiple documents/images at once
+
+
+ github.com/akeotech/cordova-plugin-multiple-documents-picker
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { MultipleDocumentsPicker } from '@awesome-cordova-plugins/multiple-document-picker/ngx';
+
+
+constructor(private multipleDocumentsPicker: MultipleDocumentsPicker) { }
+
+...
+
+
+this.multipleDocumentsPicker.pick(1)
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/music-controls.md b/versioned_docs/version-v5/native/music-controls.md
deleted file mode 100644
index 1c6c6bdd29f..00000000000
--- a/versioned_docs/version-v5/native/music-controls.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-sidebar_label: 'Music Controls'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Music Controls
-
-Music controls for Cordova applications.
-Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
-Handle also headset event (plug, unplug, headset button).
-
-
- github.com/ghenry22/cordova-plugin-music-controls2
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows
-
-## Capacitor
-
-Not Compatible
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { MusicControls } from '@awesome-cordova-plugins/music-controls/ngx';
-
-constructor(private musicControls: MusicControls) { }
-
-...
-
-this.musicControls.create({
- track : 'Time is Running Out', // optional, default : ''
- artist : 'Muse', // optional, default : ''
- cover : 'albums/absolution.jpg', // optional, default : nothing
- // cover can be a local path (use fullpath 'file:///storage/emulated/...', or only 'my_image.jpg' if my_image.jpg is in the www folder of your app)
- // or a remote url ('http://...', 'https://...', 'ftp://...')
- isPlaying : true, // optional, default : true
- dismissable : true, // optional, default : false
-
- // hide previous/next/close buttons:
- hasPrev : false, // show previous button, optional, default: true
- hasNext : false, // show next button, optional, default: true
- hasClose : true, // show close button, optional, default: false
-
-// iOS only, optional
- album : 'Absolution', // optional, default: ''
- duration : 60, // optional, default: 0
- elapsed : 10, // optional, default: 0
- hasSkipForward : true, // show skip forward button, optional, default: false
- hasSkipBackward : true, // show skip backward button, optional, default: false
- skipForwardInterval: 15, // display number for skip forward, optional, default: 0
- skipBackwardInterval: 15, // display number for skip backward, optional, default: 0
- hasScrubbing: false, // enable scrubbing from control center and lockscreen progress bar, optional
-
- // Android only, optional
- // text displayed in the status bar when the notification (and the ticker) are updated, optional
- ticker : 'Now playing "Time is Running Out"',
- // All icons default to their built-in android equivalents
- playIcon: 'media_play',
- pauseIcon: 'media_pause',
- prevIcon: 'media_prev',
- nextIcon: 'media_next',
- closeIcon: 'media_close',
- notificationIcon: 'notification'
- });
-
- this.musicControls.subscribe().subscribe(action => {
-
- function events(action) {
- const message = JSON.parse(action).message;
- switch(message) {
- case 'music-controls-next':
- // Do something
- break;
- case 'music-controls-previous':
- // Do something
- break;
- case 'music-controls-pause':
- // Do something
- break;
- case 'music-controls-play':
- // Do something
- break;
- case 'music-controls-destroy':
- // Do something
- break;
-
- // External controls (iOS only)
- case 'music-controls-toggle-play-pause' :
- // Do something
- break;
- case 'music-controls-seek-to':
- const seekToInSeconds = JSON.parse(action).position;
- this.musicControls.updateElapsed({
- elapsed: seekToInSeconds,
- isPlaying: true
- });
- // Do something
- break;
- case 'music-controls-skip-forward':
- // Do something
- break;
- case 'music-controls-skip-backward':
- // Do something
- break;
-
- // Headset events (Android only)
- // All media button events are listed below
- case 'music-controls-media-button' :
- // Do something
- break;
- case 'music-controls-headset-unplugged':
- // Do something
- break;
- case 'music-controls-headset-plugged':
- // Do something
- break;
- default:
- break;
- }
- }
- });
-
- this.musicControls.listen(); // activates the observable above
-
- this.musicControls.updateIsPlaying(true);
-
-
-```
diff --git a/versioned_docs/version-v5/native/music-controls.mdx b/versioned_docs/version-v5/native/music-controls.mdx
new file mode 100644
index 00000000000..b52e611dd6b
--- /dev/null
+++ b/versioned_docs/version-v5/native/music-controls.mdx
@@ -0,0 +1,189 @@
+---
+sidebar_label: 'Music Controls'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Music Controls
+
+Music controls for Cordova applications.
+Display a 'media' notification with play/pause, previous, next buttons, allowing the user to control the play.
+Handle also headset event (plug, unplug, headset button).
+
+
+ github.com/ghenry22/cordova-plugin-music-controls2
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows
+
+## Capacitor
+
+Not Compatible
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { MusicControls } from '@awesome-cordova-plugins/music-controls/ngx';
+
+constructor(private musicControls: MusicControls) { }
+
+...
+
+this.musicControls.create({
+ track : 'Time is Running Out', // optional, default : ''
+ artist : 'Muse', // optional, default : ''
+ cover : 'albums/absolution.jpg', // optional, default : nothing
+ // cover can be a local path (use fullpath 'file:///storage/emulated/...', or only 'my_image.jpg' if my_image.jpg is in the www folder of your app)
+ // or a remote url ('http://...', 'https://...', 'ftp://...')
+ isPlaying : true, // optional, default : true
+ dismissable : true, // optional, default : false
+
+ // hide previous/next/close buttons:
+ hasPrev : false, // show previous button, optional, default: true
+ hasNext : false, // show next button, optional, default: true
+ hasClose : true, // show close button, optional, default: false
+
+// iOS only, optional
+ album : 'Absolution', // optional, default: ''
+ duration : 60, // optional, default: 0
+ elapsed : 10, // optional, default: 0
+ hasSkipForward : true, // show skip forward button, optional, default: false
+ hasSkipBackward : true, // show skip backward button, optional, default: false
+ skipForwardInterval: 15, // display number for skip forward, optional, default: 0
+ skipBackwardInterval: 15, // display number for skip backward, optional, default: 0
+ hasScrubbing: false, // enable scrubbing from control center and lockscreen progress bar, optional
+
+ // Android only, optional
+ // text displayed in the status bar when the notification (and the ticker) are updated, optional
+ ticker : 'Now playing "Time is Running Out"',
+ // All icons default to their built-in android equivalents
+ playIcon: 'media_play',
+ pauseIcon: 'media_pause',
+ prevIcon: 'media_prev',
+ nextIcon: 'media_next',
+ closeIcon: 'media_close',
+ notificationIcon: 'notification'
+ });
+
+ this.musicControls.subscribe().subscribe(action => {
+
+ function events(action) {
+ const message = JSON.parse(action).message;
+ switch(message) {
+ case 'music-controls-next':
+ // Do something
+ break;
+ case 'music-controls-previous':
+ // Do something
+ break;
+ case 'music-controls-pause':
+ // Do something
+ break;
+ case 'music-controls-play':
+ // Do something
+ break;
+ case 'music-controls-destroy':
+ // Do something
+ break;
+
+ // External controls (iOS only)
+ case 'music-controls-toggle-play-pause' :
+ // Do something
+ break;
+ case 'music-controls-seek-to':
+ const seekToInSeconds = JSON.parse(action).position;
+ this.musicControls.updateElapsed({
+ elapsed: seekToInSeconds,
+ isPlaying: true
+ });
+ // Do something
+ break;
+ case 'music-controls-skip-forward':
+ // Do something
+ break;
+ case 'music-controls-skip-backward':
+ // Do something
+ break;
+
+ // Headset events (Android only)
+ // All media button events are listed below
+ case 'music-controls-media-button' :
+ // Do something
+ break;
+ case 'music-controls-headset-unplugged':
+ // Do something
+ break;
+ case 'music-controls-headset-plugged':
+ // Do something
+ break;
+ default:
+ break;
+ }
+ }
+ });
+
+ this.musicControls.listen(); // activates the observable above
+
+ this.musicControls.updateIsPlaying(true);
+
+
+```
diff --git a/versioned_docs/version-v5/native/native-audio.md b/versioned_docs/version-v5/native/native-audio.md
deleted file mode 100644
index fd6ad275f70..00000000000
--- a/versioned_docs/version-v5/native/native-audio.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-sidebar_label: 'Native Audio'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Native Audio
-
-Native Audio Playback
-
-
- github.com/floatinghotpot/cordova-plugin-nativeaudio
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { NativeAudio } from '@awesome-cordova-plugins/native-audio/ngx';
-
-constructor(private nativeAudio: NativeAudio) { }
-
-...
-
-this.nativeAudio.preloadSimple('uniqueId1', 'path/to/file.mp3').then(onSuccess, onError);
-this.nativeAudio.preloadComplex('uniqueId2', 'path/to/file2.mp3', 1, 1, 0).then(onSuccess, onError);
-
-this.nativeAudio.play('uniqueId1').then(onSuccess, onError);
-
-// can optionally pass a callback to be called when the file is done playing
-this.nativeAudio.play('uniqueId1', () => console.log('uniqueId1 is done playing'));
-
-this.nativeAudio.loop('uniqueId2').then(onSuccess, onError);
-
-this.nativeAudio.setVolumeForComplexAsset('uniqueId2', 0.6).then(onSuccess,onError);
-
-this.nativeAudio.stop('uniqueId1').then(onSuccess,onError);
-
-this.nativeAudio.unload('uniqueId1').then(onSuccess,onError);
-
-```
diff --git a/versioned_docs/version-v5/native/native-audio.mdx b/versioned_docs/version-v5/native/native-audio.mdx
new file mode 100644
index 00000000000..d25ab236421
--- /dev/null
+++ b/versioned_docs/version-v5/native/native-audio.mdx
@@ -0,0 +1,101 @@
+---
+sidebar_label: 'Native Audio'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Native Audio
+
+Native Audio Playback
+
+
+ github.com/floatinghotpot/cordova-plugin-nativeaudio
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { NativeAudio } from '@awesome-cordova-plugins/native-audio/ngx';
+
+constructor(private nativeAudio: NativeAudio) { }
+
+...
+
+this.nativeAudio.preloadSimple('uniqueId1', 'path/to/file.mp3').then(onSuccess, onError);
+this.nativeAudio.preloadComplex('uniqueId2', 'path/to/file2.mp3', 1, 1, 0).then(onSuccess, onError);
+
+this.nativeAudio.play('uniqueId1').then(onSuccess, onError);
+
+// can optionally pass a callback to be called when the file is done playing
+this.nativeAudio.play('uniqueId1', () => console.log('uniqueId1 is done playing'));
+
+this.nativeAudio.loop('uniqueId2').then(onSuccess, onError);
+
+this.nativeAudio.setVolumeForComplexAsset('uniqueId2', 0.6).then(onSuccess,onError);
+
+this.nativeAudio.stop('uniqueId1').then(onSuccess,onError);
+
+this.nativeAudio.unload('uniqueId1').then(onSuccess,onError);
+
+```
diff --git a/versioned_docs/version-v5/native/native-geocoder.md b/versioned_docs/version-v5/native/native-geocoder.md
deleted file mode 100644
index 90439573449..00000000000
--- a/versioned_docs/version-v5/native/native-geocoder.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-sidebar_label: 'Native Geocoder'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Native Geocoder
-
-Cordova plugin for native forward and reverse geocoding
-
-
- github.com/sebastianbaar/cordova-plugin-nativegeocoder
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-- Android
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@awesome-cordova-plugins/native-geocoder/ngx';
-
-constructor(private nativeGeocoder: NativeGeocoder) { }
-
-...
-
-let options: NativeGeocoderOptions = {
- useLocale: true,
- maxResults: 5
-};
-
-this.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818, options)
- .then((result: NativeGeocoderResult[]) => console.log(JSON.stringify(result[0])))
- .catch((error: any) => console.log(error));
-
-this.nativeGeocoder.forwardGeocode('Berlin', options)
- .then((result: NativeGeocoderResult[]) => console.log('The coordinates are latitude=' + result[0].latitude + ' and longitude=' + result[0].longitude))
- .catch((error: any) => console.log(error));
-```
diff --git a/versioned_docs/version-v5/native/native-geocoder.mdx b/versioned_docs/version-v5/native/native-geocoder.mdx
new file mode 100644
index 00000000000..f82b7713bc5
--- /dev/null
+++ b/versioned_docs/version-v5/native/native-geocoder.mdx
@@ -0,0 +1,96 @@
+---
+sidebar_label: 'Native Geocoder'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Native Geocoder
+
+Cordova plugin for native forward and reverse geocoding
+
+
+ github.com/sebastianbaar/cordova-plugin-nativegeocoder
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+- Android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@awesome-cordova-plugins/native-geocoder/ngx';
+
+constructor(private nativeGeocoder: NativeGeocoder) { }
+
+...
+
+let options: NativeGeocoderOptions = {
+ useLocale: true,
+ maxResults: 5
+};
+
+this.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818, options)
+ .then((result: NativeGeocoderResult[]) => console.log(JSON.stringify(result[0])))
+ .catch((error: any) => console.log(error));
+
+this.nativeGeocoder.forwardGeocode('Berlin', options)
+ .then((result: NativeGeocoderResult[]) => console.log('The coordinates are latitude=' + result[0].latitude + ' and longitude=' + result[0].longitude))
+ .catch((error: any) => console.log(error));
+```
diff --git a/versioned_docs/version-v5/native/native-keyboard.md b/versioned_docs/version-v5/native/native-keyboard.md
deleted file mode 100644
index afa74683b6a..00000000000
--- a/versioned_docs/version-v5/native/native-keyboard.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-sidebar_label: 'Native Keyboard'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Native Keyboard
-
-A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
-
-
- github.com/EddyVerbruggen/cordova-plugin-native-keyboard
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```
-import { NativeKeyboard } from '@awesome-cordova-plugins/native-keyboard/ngx';
-
-
-constructor(private nativeKeyboard: NativeKeyboard) { }
-
-...
-
-
-```
diff --git a/versioned_docs/version-v5/native/native-keyboard.mdx b/versioned_docs/version-v5/native/native-keyboard.mdx
new file mode 100644
index 00000000000..dbb5e9e3b97
--- /dev/null
+++ b/versioned_docs/version-v5/native/native-keyboard.mdx
@@ -0,0 +1,86 @@
+---
+sidebar_label: 'Native Keyboard'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Native Keyboard
+
+A cross platform WhatsApp / Messenger / Slack -style keyboard even. For your Cordova app.
+
+
+ github.com/EddyVerbruggen/cordova-plugin-native-keyboard
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```
+import { NativeKeyboard } from '@awesome-cordova-plugins/native-keyboard/ngx';
+
+
+constructor(private nativeKeyboard: NativeKeyboard) { }
+
+...
+
+
+```
diff --git a/versioned_docs/version-v5/native/native-page-transitions.md b/versioned_docs/version-v5/native/native-page-transitions.md
deleted file mode 100644
index 6bc09cdb8ac..00000000000
--- a/versioned_docs/version-v5/native/native-page-transitions.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-sidebar_label: 'Native Page Transitions'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Native Page Transitions
-
-The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
-
-
- github.com/Telerik-Verified-Plugins/NativePageTransitions
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows Phone 8
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { NativePageTransitions, NativeTransitionOptions } from '@awesome-cordova-plugins/native-page-transitions/ngx';
-
-constructor(private nativePageTransitions: NativePageTransitions) { }
-
-...
-
-
-// example of adding a transition when a page/modal closes
-ionViewWillLeave() {
-
- let options: NativeTransitionOptions = {
- direction: 'up',
- duration: 500,
- slowdownfactor: 3,
- slidePixels: 20,
- iosdelay: 100,
- androiddelay: 150,
- fixedPixelsTop: 0,
- fixedPixelsBottom: 60
- }
-
- this.nativePageTransitions.slide(options)
- .then(onSuccess)
- .catch(onError);
-
-}
-
-
-// example of adding a transition when pushing a new page
-openPage(page: any) {
-
- this.nativePageTransitions.slide(options);
- this.navCtrl.push(page);
-
-}
-
-```
diff --git a/versioned_docs/version-v5/native/native-page-transitions.mdx b/versioned_docs/version-v5/native/native-page-transitions.mdx
new file mode 100644
index 00000000000..ac3e88da7f4
--- /dev/null
+++ b/versioned_docs/version-v5/native/native-page-transitions.mdx
@@ -0,0 +1,115 @@
+---
+sidebar_label: 'Native Page Transitions'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Native Page Transitions
+
+The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.
+
+
+ github.com/Telerik-Verified-Plugins/NativePageTransitions
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows Phone 8
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { NativePageTransitions, NativeTransitionOptions } from '@awesome-cordova-plugins/native-page-transitions/ngx';
+
+constructor(private nativePageTransitions: NativePageTransitions) { }
+
+...
+
+
+// example of adding a transition when a page/modal closes
+ionViewWillLeave() {
+
+ let options: NativeTransitionOptions = {
+ direction: 'up',
+ duration: 500,
+ slowdownfactor: 3,
+ slidePixels: 20,
+ iosdelay: 100,
+ androiddelay: 150,
+ fixedPixelsTop: 0,
+ fixedPixelsBottom: 60
+ }
+
+ this.nativePageTransitions.slide(options)
+ .then(onSuccess)
+ .catch(onError);
+
+}
+
+
+// example of adding a transition when pushing a new page
+openPage(page: any) {
+
+ this.nativePageTransitions.slide(options);
+ this.navCtrl.push(page);
+
+}
+
+```
diff --git a/versioned_docs/version-v5/native/native-storage.md b/versioned_docs/version-v5/native/native-storage.md
deleted file mode 100644
index e5d940242b6..00000000000
--- a/versioned_docs/version-v5/native/native-storage.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: 'Ionic Native Storage | Install Cordova Plugin Native Storage'
-description: 'Learn to use and install Native Storage of variables in Android and iOS on Ionic apps. Read to explore more about the cordova-plugin-nativestorage.'
-sidebar_label: 'Native Storage'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Native Storage
-
-Native storage of variables in Android and iOS
-
-
- github.com/TheCocoaProject/cordova-plugin-nativestorage
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-- macOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { NativeStorage } from '@awesome-cordova-plugins/native-storage/ngx';
-
-constructor(private nativeStorage: NativeStorage) { }
-
-...
-
-this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
- .then(
- () => console.log('Stored item!'),
- error => console.error('Error storing item', error)
- );
-
-this.nativeStorage.getItem('myitem')
- .then(
- data => console.log(data),
- error => console.error(error)
- );
-```
diff --git a/versioned_docs/version-v5/native/native-storage.mdx b/versioned_docs/version-v5/native/native-storage.mdx
new file mode 100644
index 00000000000..13990682a64
--- /dev/null
+++ b/versioned_docs/version-v5/native/native-storage.mdx
@@ -0,0 +1,100 @@
+---
+title: 'Ionic Native Storage | Install Cordova Plugin Native Storage'
+description: 'Learn to use and install Native Storage of variables in Android and iOS on Ionic apps. Read to explore more about the cordova-plugin-nativestorage.'
+sidebar_label: 'Native Storage'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Native Storage
+
+Native storage of variables in Android and iOS
+
+
+ github.com/TheCocoaProject/cordova-plugin-nativestorage
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+- macOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { NativeStorage } from '@awesome-cordova-plugins/native-storage/ngx';
+
+constructor(private nativeStorage: NativeStorage) { }
+
+...
+
+this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
+ .then(
+ () => console.log('Stored item!'),
+ error => console.error('Error storing item', error)
+ );
+
+this.nativeStorage.getItem('myitem')
+ .then(
+ data => console.log(data),
+ error => console.error(error)
+ );
+```
diff --git a/versioned_docs/version-v5/native/network-interface.md b/versioned_docs/version-v5/native/network-interface.md
deleted file mode 100644
index 940338b2ab7..00000000000
--- a/versioned_docs/version-v5/native/network-interface.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-sidebar_label: 'Network Interface'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Network Interface
-
-Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
-
-
- github.com/salbahra/cordova-plugin-networkinterface
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- BlackBerry 10
-- Browser
-- iOS
-- Windows
-- Windows Phone
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { NetworkInterface } from '@awesome-cordova-plugins/network-interface/ngx';
-
-constructor( private networkInterface: NetworkInterface ) {
-
- this.networkInterface.getWiFiIPAddress()
- .then(address => console.info(`IP: ${address.ip}, Subnet: ${address.subnet}`))
- .catch(error => console.error(`Unable to get IP: ${error}`));
-
- this.networkInterface.getCarrierIPAddress()
- .then(address => console.info(`IP: ${address.ip}, Subnet: ${address.subnet}`))
- .catch(error => console.error(`Unable to get IP: ${error}`));
-
- const url = 'www.github.com';
- this.networkInterface.getHttpProxyInformation(url)
- .then(proxy => console.info(`Type: ${proxy.type}, Host: ${proxy.host}, Port: ${proxy.port}`))
- .catch(error => console.error(`Unable to get proxy info: ${error}`));
-}
-```
diff --git a/versioned_docs/version-v5/native/network-interface.mdx b/versioned_docs/version-v5/native/network-interface.mdx
new file mode 100644
index 00000000000..1c37cb06d39
--- /dev/null
+++ b/versioned_docs/version-v5/native/network-interface.mdx
@@ -0,0 +1,99 @@
+---
+sidebar_label: 'Network Interface'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Network Interface
+
+Network interface information plugin for Cordova/PhoneGap that supports Android, Blackberry 10, Browser, iOS, and Windows Phone 8.
+
+
+ github.com/salbahra/cordova-plugin-networkinterface
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- BlackBerry 10
+- Browser
+- iOS
+- Windows
+- Windows Phone
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { NetworkInterface } from '@awesome-cordova-plugins/network-interface/ngx';
+
+constructor( private networkInterface: NetworkInterface ) {
+
+ this.networkInterface.getWiFiIPAddress()
+ .then(address => console.info(`IP: ${address.ip}, Subnet: ${address.subnet}`))
+ .catch(error => console.error(`Unable to get IP: ${error}`));
+
+ this.networkInterface.getCarrierIPAddress()
+ .then(address => console.info(`IP: ${address.ip}, Subnet: ${address.subnet}`))
+ .catch(error => console.error(`Unable to get IP: ${error}`));
+
+ const url = 'www.github.com';
+ this.networkInterface.getHttpProxyInformation(url)
+ .then(proxy => console.info(`Type: ${proxy.type}, Host: ${proxy.host}, Port: ${proxy.port}`))
+ .catch(error => console.error(`Unable to get proxy info: ${error}`));
+}
+```
diff --git a/versioned_docs/version-v5/native/network.md b/versioned_docs/version-v5/native/network.md
deleted file mode 100644
index c25a0813951..00000000000
--- a/versioned_docs/version-v5/native/network.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: 'Ionic Native Network Plugin: Cordova Plugin Network Information'
-description: 'The Ionic native network plugin requires the Cordova plugin: cordova-plugin-network-information. Read to learn more about this Ionic app feature and usage.'
-sidebar_label: 'Network'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Network
-
-Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
-
-
- github.com/apache/cordova-plugin-network-information
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Amazon Fire OS
-- Android
-- Browser
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Network } from '@awesome-cordova-plugins/network/ngx';
-
-constructor(private network: Network) { }
-
-...
-
-// watch network for a disconnection
-let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
- console.log('network was disconnected :-(');
-});
-
-// stop disconnect watch
-disconnectSubscription.unsubscribe();
-
-
-// watch network for a connection
-let connectSubscription = this.network.onConnect().subscribe(() => {
- console.log('network connected!');
- // We just got a connection but we need to wait briefly
- // before we determine the connection type. Might need to wait.
- // prior to doing any api requests as well.
- setTimeout(() => {
- if (this.network.type === 'wifi') {
- console.log('we got a wifi connection, woohoo!');
- }
- }, 3000);
-});
-
-// stop connect watch
-connectSubscription.unsubscribe();
-
-```
diff --git a/versioned_docs/version-v5/native/network.mdx b/versioned_docs/version-v5/native/network.mdx
new file mode 100644
index 00000000000..d65aa2b0d3f
--- /dev/null
+++ b/versioned_docs/version-v5/native/network.mdx
@@ -0,0 +1,114 @@
+---
+title: 'Ionic Native Network Plugin: Cordova Plugin Network Information'
+description: 'The Ionic native network plugin requires the Cordova plugin: cordova-plugin-network-information. Read to learn more about this Ionic app feature and usage.'
+sidebar_label: 'Network'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Network
+
+Requires Cordova plugin: cordova-plugin-network-information. For more info, please see the [Network plugin docs](https://github.com/apache/cordova-plugin-network-information).
+
+
+ github.com/apache/cordova-plugin-network-information
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Amazon Fire OS
+- Android
+- Browser
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Network } from '@awesome-cordova-plugins/network/ngx';
+
+constructor(private network: Network) { }
+
+...
+
+// watch network for a disconnection
+let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
+ console.log('network was disconnected :-(');
+});
+
+// stop disconnect watch
+disconnectSubscription.unsubscribe();
+
+
+// watch network for a connection
+let connectSubscription = this.network.onConnect().subscribe(() => {
+ console.log('network connected!');
+ // We just got a connection but we need to wait briefly
+ // before we determine the connection type. Might need to wait.
+ // prior to doing any api requests as well.
+ setTimeout(() => {
+ if (this.network.type === 'wifi') {
+ console.log('we got a wifi connection, woohoo!');
+ }
+ }, 3000);
+});
+
+// stop connect watch
+connectSubscription.unsubscribe();
+
+```
diff --git a/versioned_docs/version-v5/native/nfc.md b/versioned_docs/version-v5/native/nfc.md
deleted file mode 100644
index 799489b6452..00000000000
--- a/versioned_docs/version-v5/native/nfc.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-sidebar_label: 'NFC'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# NFC
-
-The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
-
-Use to
-
-- read data from NFC tags
-- write data to NFC tags
-- send data to other NFC enabled devices
-- receive data from NFC devices
-
-This plugin uses NDEF (NFC Data Exchange Format) for maximum compatibilty between NFC devices, tag types, and operating systems.
-
-
- github.com/chariotsolutions/phonegap-nfc
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { NFC, Ndef } from '@awesome-cordova-plugins/nfc/ngx';
-
-constructor(private nfc: NFC, private ndef: Ndef) { }
-
-...
-
-// Read NFC Tag - Android
-// Once the reader mode is enabled, any tags that are scanned are sent to the subscriber
- let flags = this.nfc.FLAG_READER_NFC_A | this.nfc.FLAG_READER_NFC_V;
- this.readerMode$ = this.nfc.readerMode(flags).subscribe(
- tag => console.log(JSON.stringify(tag)),
- err => console.log('Error reading tag', err)
- );
-
-// Read NFC Tag - iOS
-// On iOS, a NFC reader session takes control from your app while scanning tags then returns a tag
-try {
- let tag = await this.nfc.scanNdef();
- console.log(JSON.stringify(tag));
- } catch (err) {
- console.log('Error reading tag', err);
- }
-
-```
-
-For more details on NFC tag operations see https://github.com/chariotsolutions/phonegap-nfc
diff --git a/versioned_docs/version-v5/native/nfc.mdx b/versioned_docs/version-v5/native/nfc.mdx
new file mode 100644
index 00000000000..cea0e81a90b
--- /dev/null
+++ b/versioned_docs/version-v5/native/nfc.mdx
@@ -0,0 +1,111 @@
+---
+sidebar_label: 'NFC'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# NFC
+
+The NFC plugin allows you to read and write NFC tags. You can also beam to, and receive from, other NFC enabled devices.
+
+Use to
+
+- read data from NFC tags
+- write data to NFC tags
+- send data to other NFC enabled devices
+- receive data from NFC devices
+
+This plugin uses NDEF (NFC Data Exchange Format) for maximum compatibilty between NFC devices, tag types, and operating systems.
+
+
+ github.com/chariotsolutions/phonegap-nfc
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { NFC, Ndef } from '@awesome-cordova-plugins/nfc/ngx';
+
+constructor(private nfc: NFC, private ndef: Ndef) { }
+
+...
+
+// Read NFC Tag - Android
+// Once the reader mode is enabled, any tags that are scanned are sent to the subscriber
+ let flags = this.nfc.FLAG_READER_NFC_A | this.nfc.FLAG_READER_NFC_V;
+ this.readerMode$ = this.nfc.readerMode(flags).subscribe(
+ tag => console.log(JSON.stringify(tag)),
+ err => console.log('Error reading tag', err)
+ );
+
+// Read NFC Tag - iOS
+// On iOS, a NFC reader session takes control from your app while scanning tags then returns a tag
+try {
+ let tag = await this.nfc.scanNdef();
+ console.log(JSON.stringify(tag));
+ } catch (err) {
+ console.log('Error reading tag', err);
+ }
+
+```
+
+For more details on NFC tag operations see https://github.com/chariotsolutions/phonegap-nfc
diff --git a/versioned_docs/version-v5/native/ocr.md b/versioned_docs/version-v5/native/ocr.md
deleted file mode 100644
index f648df386dd..00000000000
--- a/versioned_docs/version-v5/native/ocr.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-sidebar_label: 'OCR'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# OCR
-
-This plugin attempts to identify and extract text from an image.
-Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
-Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
-For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
-
-
- github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { OCR, OCRSourceType } from '@awesome-cordova-plugins/ocr/ngx';
-
-
-constructor(private ocr: OCR) { }
-
-...
-
-this.ocr.recText(OCRSourceType.NORMFILEURL, "file://path/to/image.png")
- .then((res: OCRResult) => console.log(JSON.stringify(res)))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/ocr.mdx b/versioned_docs/version-v5/native/ocr.mdx
new file mode 100644
index 00000000000..6f980341035
--- /dev/null
+++ b/versioned_docs/version-v5/native/ocr.mdx
@@ -0,0 +1,90 @@
+---
+sidebar_label: 'OCR'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# OCR
+
+This plugin attempts to identify and extract text from an image.
+Please note: This plugin depends on the GoogleMobileVision pod which is referencing UIWebview, that has been deprecated by Apple.
+Don't use this plugin in an app intended for App Store as you will get a review rejection from Apple: `Deprecated API Usage — Apple will stop accepting submissions of apps that use UIWebView APIs`
+For more info, please see the following Github issue [Google Mobile Vision relying on deprecated UIWebview](https://github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr/issues/27).
+
+
+ github.com/NeutrinosPlatform/cordova-plugin-mobile-ocr
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { OCR, OCRSourceType } from '@awesome-cordova-plugins/ocr/ngx';
+
+
+constructor(private ocr: OCR) { }
+
+...
+
+this.ocr.recText(OCRSourceType.NORMFILEURL, "file://path/to/image.png")
+ .then((res: OCRResult) => console.log(JSON.stringify(res)))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/onesignal.md b/versioned_docs/version-v5/native/onesignal.md
deleted file mode 100644
index bd9e6586f67..00000000000
--- a/versioned_docs/version-v5/native/onesignal.md
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: 'OneSignal | OneSignal Cordova SDK Push Notification Plugin'
-description: 'The OneSignal Cordova SDK plugin is a simple implementation for delivering push notifications on Ionic apps. Read our OneSignal Documentation to learn more.'
-sidebar_label: 'OneSignal'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# OneSignal
-
-The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
-OneSignal is a simple implementation for delivering push notifications.
-
-Please view the official [OneSignal Ionic SDK Installation](https://documentation.onesignal.com/docs/ionic-sdk-setup) guide
-for more information.
-
-#### Icons
-
-If you want to use generated icons with command `ionic cordova resources`:
-
-1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
-
-2. Configure the hook in your config.xml
-
-```
-
-
-
-```
-
-3. Put the following code in it:
-
-```
-#!/usr/bin/env node
-
-var fs = require('fs');
-var path = require('path');
-
-var filestocopy = [{
- "resources/android/icon/drawable-hdpi-icon.png":
- "platforms/android/app/src/main/res/drawable-hdpi/ic_stat_onesignal_default.png"
-}, {
- "resources/android/icon/drawable-mdpi-icon.png":
- "platforms/android/app/src/main/res/drawable-mdpi/ic_stat_onesignal_default.png"
-}, {
- "resources/android/icon/drawable-xhdpi-icon.png":
- "platforms/android/app/src/main/res/drawable-xhdpi/ic_stat_onesignal_default.png"
-}, {
- "resources/android/icon/drawable-xxhdpi-icon.png":
- "platforms/android/app/src/main/res/drawable-xxhdpi/ic_stat_onesignal_default.png"
-}, {
- "resources/android/icon/drawable-xxxhdpi-icon.png":
- "platforms/android/app/src/main/res/drawable-xxxhdpi/ic_stat_onesignal_default.png"
-} ];
-
-module.exports = function(context) {
-
- // no need to configure below
- var rootdir = context.opts.projectRoot;
-
- filestocopy.forEach(function(obj) {
- Object.keys(obj).forEach(function(key) {
- var val = obj[key];
- var srcfile = path.join(rootdir, key);
- var destfile = path.join(rootdir, val);
- console.log("copying "+srcfile+" to "+destfile);
- var destdir = path.dirname(destfile);
- if (fs.existsSync(srcfile) && fs.existsSync(destdir)) {
- fs.createReadStream(srcfile).pipe(
- fs.createWriteStream(destfile));
- }
- });
- });
-
-};
-```
-
-3. From the root of your project make the file executable:
- `$ chmod +x hooks/copy_android_notification_icons.js`
-
-
- github.com/OneSignal/OneSignal-Cordova-SDK
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Amazon Fire OS
-- Android
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { OneSignal } from '@awesome-cordova-plugins/onesignal/ngx';
-
-constructor(private oneSignal: OneSignal) { }
-
-...
-
-this.oneSignal.startInit('b2f7f966-d8cc-11e4-bed1-df8f05be55ba', '703322744261');
-
-this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);
-
-this.oneSignal.handleNotificationReceived().subscribe(() => {
- // do something when notification is received
-});
-
-this.oneSignal.handleNotificationOpened().subscribe(() => {
- // do something when a notification is opened
-});
-
-this.oneSignal.endInit();
-```
diff --git a/versioned_docs/version-v5/native/onesignal.mdx b/versioned_docs/version-v5/native/onesignal.mdx
new file mode 100644
index 00000000000..51910f6c789
--- /dev/null
+++ b/versioned_docs/version-v5/native/onesignal.mdx
@@ -0,0 +1,168 @@
+---
+title: 'OneSignal | OneSignal Cordova SDK Push Notification Plugin'
+description: 'The OneSignal Cordova SDK plugin is a simple implementation for delivering push notifications on Ionic apps. Read our OneSignal Documentation to learn more.'
+sidebar_label: 'OneSignal'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# OneSignal
+
+The OneSignal plugin is an client implementation for using the [OneSignal](https://onesignal.com/) Service.
+OneSignal is a simple implementation for delivering push notifications.
+
+Please view the official [OneSignal Ionic SDK Installation](https://documentation.onesignal.com/docs/ionic-sdk-setup) guide
+for more information.
+
+#### Icons
+
+If you want to use generated icons with command `ionic cordova resources`:
+
+1. Add a file to your `hooks` directory called `copy_android_notification_icons.js`
+
+2. Configure the hook in your config.xml
+
+```
+
+
+
+```
+
+3. Put the following code in it:
+
+```
+#!/usr/bin/env node
+
+var fs = require('fs');
+var path = require('path');
+
+var filestocopy = [{
+ "resources/android/icon/drawable-hdpi-icon.png":
+ "platforms/android/app/src/main/res/drawable-hdpi/ic_stat_onesignal_default.png"
+}, {
+ "resources/android/icon/drawable-mdpi-icon.png":
+ "platforms/android/app/src/main/res/drawable-mdpi/ic_stat_onesignal_default.png"
+}, {
+ "resources/android/icon/drawable-xhdpi-icon.png":
+ "platforms/android/app/src/main/res/drawable-xhdpi/ic_stat_onesignal_default.png"
+}, {
+ "resources/android/icon/drawable-xxhdpi-icon.png":
+ "platforms/android/app/src/main/res/drawable-xxhdpi/ic_stat_onesignal_default.png"
+}, {
+ "resources/android/icon/drawable-xxxhdpi-icon.png":
+ "platforms/android/app/src/main/res/drawable-xxxhdpi/ic_stat_onesignal_default.png"
+} ];
+
+module.exports = function(context) {
+
+ // no need to configure below
+ var rootdir = context.opts.projectRoot;
+
+ filestocopy.forEach(function(obj) {
+ Object.keys(obj).forEach(function(key) {
+ var val = obj[key];
+ var srcfile = path.join(rootdir, key);
+ var destfile = path.join(rootdir, val);
+ console.log("copying "+srcfile+" to "+destfile);
+ var destdir = path.dirname(destfile);
+ if (fs.existsSync(srcfile) && fs.existsSync(destdir)) {
+ fs.createReadStream(srcfile).pipe(
+ fs.createWriteStream(destfile));
+ }
+ });
+ });
+
+};
+```
+
+3. From the root of your project make the file executable:
+ `$ chmod +x hooks/copy_android_notification_icons.js`
+
+
+ github.com/OneSignal/OneSignal-Cordova-SDK
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Amazon Fire OS
+- Android
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { OneSignal } from '@awesome-cordova-plugins/onesignal/ngx';
+
+constructor(private oneSignal: OneSignal) { }
+
+...
+
+this.oneSignal.startInit('b2f7f966-d8cc-11e4-bed1-df8f05be55ba', '703322744261');
+
+this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);
+
+this.oneSignal.handleNotificationReceived().subscribe(() => {
+ // do something when notification is received
+});
+
+this.oneSignal.handleNotificationOpened().subscribe(() => {
+ // do something when a notification is opened
+});
+
+this.oneSignal.endInit();
+```
diff --git a/versioned_docs/version-v5/native/open-native-settings.md b/versioned_docs/version-v5/native/open-native-settings.md
deleted file mode 100644
index 82db03f4c8e..00000000000
--- a/versioned_docs/version-v5/native/open-native-settings.md
+++ /dev/null
@@ -1,161 +0,0 @@
----
-sidebar_label: 'Open Native Settings'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Open Native Settings
-
-Plugin to open native screens of iOS/android settings
-
-
- github.com/guyromb/Cordova-open-native-settings
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-You can open any of these settings:
-
-```
- "about", // ios
- "accessibility", // ios, android
- "account", // ios, android
- "airplane_mode", // ios, android
- "apn", // android
- "application_details", // ios, android
- "application_development", // android
- "application", // android
- "autolock", // ios
- "battery_optimization", // android
- "bluetooth", // ios, android
- "castle", // ios
- "captioning", // android
- "cast", // android
- "cellular_usage", // ios
- "configuration_list", // ios
- "data_roaming", // android
- "date", // ios, android
- "display", // ios, android
- "dream", // android
- "facetime", // ios
- "home", // android
- "keyboard", // ios, android
- "keyboard_subtype", // android
- "locale", // ios, android
-"location", // ios, android
-"locations", // ios
-"manage_all_applications", // android
-"manage_applications", // android
-"memory_card", // android
-"music", // ios
-"music_equalizer", // ios
-"music_volume", // ios
-"network", // ios, android
-"nike_ipod", // ios
-"nfcsharing", // android
-"nfc_payment", // android
-"nfc_settings", // android
-"notes", // ios
-"notification_id", // ios
-"passbook", // ios
-"phone", // ios
-"photos", // ios
-"print", // android
-"privacy", // android
-"quick_launch", // android
-"reset", // ios
-"ringtone", // ios
-"browser", // ios
-"search", // ios, android
-"security", // android
-"settings", // ios, android
-"show_regulatory_info",
-"sound", // ios, android
-"software_update", // ios
-"storage", // ios, android
-"store", // ios, android
-"sync", // android
-"tethering", // ios
-"twitter", // ios
-"touch", // ios
-"usage", // ios, android
-"user_dictionary", // android
-"video", // ios
-"voice_input", // android
-"vpn", // ios
-"wallpaper", // ios
-"wifi_ip", // android
-"wifi", // ios, android
-"wireless" // android
-```
-
-```tsx
-import { OpenNativeSettings } from '@awesome-cordova-plugins/open-native-settings/ngx';
-
-
-constructor(private openNativeSettings: OpenNativeSettings) { }
-
-...
-
-
-```
diff --git a/versioned_docs/version-v5/native/open-native-settings.mdx b/versioned_docs/version-v5/native/open-native-settings.mdx
new file mode 100644
index 00000000000..832f8919252
--- /dev/null
+++ b/versioned_docs/version-v5/native/open-native-settings.mdx
@@ -0,0 +1,161 @@
+---
+sidebar_label: 'Open Native Settings'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Open Native Settings
+
+Plugin to open native screens of iOS/android settings
+
+
+ github.com/guyromb/Cordova-open-native-settings
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+You can open any of these settings:
+
+```
+ "about", // ios
+ "accessibility", // ios, android
+ "account", // ios, android
+ "airplane_mode", // ios, android
+ "apn", // android
+ "application_details", // ios, android
+ "application_development", // android
+ "application", // android
+ "autolock", // ios
+ "battery_optimization", // android
+ "bluetooth", // ios, android
+ "castle", // ios
+ "captioning", // android
+ "cast", // android
+ "cellular_usage", // ios
+ "configuration_list", // ios
+ "data_roaming", // android
+ "date", // ios, android
+ "display", // ios, android
+ "dream", // android
+ "facetime", // ios
+ "home", // android
+ "keyboard", // ios, android
+ "keyboard_subtype", // android
+ "locale", // ios, android
+"location", // ios, android
+"locations", // ios
+"manage_all_applications", // android
+"manage_applications", // android
+"memory_card", // android
+"music", // ios
+"music_equalizer", // ios
+"music_volume", // ios
+"network", // ios, android
+"nike_ipod", // ios
+"nfcsharing", // android
+"nfc_payment", // android
+"nfc_settings", // android
+"notes", // ios
+"notification_id", // ios
+"passbook", // ios
+"phone", // ios
+"photos", // ios
+"print", // android
+"privacy", // android
+"quick_launch", // android
+"reset", // ios
+"ringtone", // ios
+"browser", // ios
+"search", // ios, android
+"security", // android
+"settings", // ios, android
+"show_regulatory_info",
+"sound", // ios, android
+"software_update", // ios
+"storage", // ios, android
+"store", // ios, android
+"sync", // android
+"tethering", // ios
+"twitter", // ios
+"touch", // ios
+"usage", // ios, android
+"user_dictionary", // android
+"video", // ios
+"voice_input", // android
+"vpn", // ios
+"wallpaper", // ios
+"wifi_ip", // android
+"wifi", // ios, android
+"wireless" // android
+```
+
+```tsx
+import { OpenNativeSettings } from '@awesome-cordova-plugins/open-native-settings/ngx';
+
+
+constructor(private openNativeSettings: OpenNativeSettings) { }
+
+...
+
+
+```
diff --git a/versioned_docs/version-v5/native/openalpr.md b/versioned_docs/version-v5/native/openalpr.md
deleted file mode 100644
index 6ad4fb2025f..00000000000
--- a/versioned_docs/version-v5/native/openalpr.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-sidebar_label: 'OpenALPR'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# OpenALPR
-
-This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
-
-
- github.com/iMicknl/cordova-plugin-openalpr
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { OpenALPR, OpenALPROptions, OpenALPRResult } from '@awesome-cordova-plugins/openalpr/ngx';
-
-
-constructor(private openALPR: OpenALPR) { }
-
-const scanOptions: OpenALPROptions = {
- country: this.openALPR.Country.EU,
- amount: 3
-}
-
-// To get imageData, you can use the @awesome-cordova-plugins/camera module for example. It works with DestinationType.FILE_URI and DATA_URL
-
-this.openALPR.scan(imageData, scanOptions)
- .then((res: [OpenALPRResult]) => console.log(res))
- .catch((error: Error) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/openalpr.mdx b/versioned_docs/version-v5/native/openalpr.mdx
new file mode 100644
index 00000000000..2564a30d15f
--- /dev/null
+++ b/versioned_docs/version-v5/native/openalpr.mdx
@@ -0,0 +1,92 @@
+---
+sidebar_label: 'OpenALPR'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# OpenALPR
+
+This Cordova plugin adds support for the OpenALPR (Automatic License Plate Recognition) library, which provides support for retrieving the license plate from a picture.
+
+
+ github.com/iMicknl/cordova-plugin-openalpr
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { OpenALPR, OpenALPROptions, OpenALPRResult } from '@awesome-cordova-plugins/openalpr/ngx';
+
+
+constructor(private openALPR: OpenALPR) { }
+
+const scanOptions: OpenALPROptions = {
+ country: this.openALPR.Country.EU,
+ amount: 3
+}
+
+// To get imageData, you can use the @awesome-cordova-plugins/camera module for example. It works with DestinationType.FILE_URI and DATA_URL
+
+this.openALPR.scan(imageData, scanOptions)
+ .then((res: [OpenALPRResult]) => console.log(res))
+ .catch((error: Error) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/pdf-generator.md b/versioned_docs/version-v5/native/pdf-generator.md
deleted file mode 100644
index 107ed720bb8..00000000000
--- a/versioned_docs/version-v5/native/pdf-generator.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-sidebar_label: 'PDFGenerator'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# PDFGenerator
-
-Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
-
-
- github.com/cesarvr/pdf-generator
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { PDFGenerator } from '@awesome-cordova-plugins/pdf-generator';
-
-constructor(private pdfGenerator: PDFGenerator) { }
-
-...
-
-this.pdfGenerator.fromURL(url, options).then(base64String => console.log(base64String));
-
-```
diff --git a/versioned_docs/version-v5/native/pdf-generator.mdx b/versioned_docs/version-v5/native/pdf-generator.mdx
new file mode 100644
index 00000000000..12604e10409
--- /dev/null
+++ b/versioned_docs/version-v5/native/pdf-generator.mdx
@@ -0,0 +1,85 @@
+---
+sidebar_label: 'PDFGenerator'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# PDFGenerator
+
+Simple plugin to generate (offline) pdf. The plugin transforms HTML to PDF and also provide the mechanism to share the pdf to other apps like Mail, etc.
+
+
+ github.com/cesarvr/pdf-generator
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { PDFGenerator } from '@awesome-cordova-plugins/pdf-generator';
+
+constructor(private pdfGenerator: PDFGenerator) { }
+
+...
+
+this.pdfGenerator.fromURL(url, options).then(base64String => console.log(base64String));
+
+```
diff --git a/versioned_docs/version-v5/native/photo-library.md b/versioned_docs/version-v5/native/photo-library.md
deleted file mode 100644
index b9a37450967..00000000000
--- a/versioned_docs/version-v5/native/photo-library.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-sidebar_label: 'Photo Library'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Photo Library
-
-The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
-Saving photos and videos to the library is also supported.
-cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
-
-
- github.com/terikon/cordova-plugin-photo-library
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { PhotoLibrary } from '@awesome-cordova-plugins/photo-library/ngx';
-
-constructor(private photoLibrary: PhotoLibrary) { }
-
-this.photoLibrary.requestAuthorization().then(() => {
- this.photoLibrary.getLibrary().subscribe({
- next: library => {
- library.forEach(function(libraryItem) {
- console.log(libraryItem.id); // ID of the photo
- console.log(libraryItem.photoURL); // Cross-platform access to photo
- console.log(libraryItem.thumbnailURL);// Cross-platform access to thumbnail
- console.log(libraryItem.fileName);
- console.log(libraryItem.width);
- console.log(libraryItem.height);
- console.log(libraryItem.creationDate);
- console.log(libraryItem.latitude);
- console.log(libraryItem.longitude);
- console.log(libraryItem.albumIds); // array of ids of appropriate AlbumItem, only of includeAlbumsData was used
- });
- },
- error: err => { console.log('could not get photos'); },
- complete: () => { console.log('done getting photos'); }
- });
-})
-.catch(err => console.log('permissions weren\'t granted'));
-
-```
diff --git a/versioned_docs/version-v5/native/photo-library.mdx b/versioned_docs/version-v5/native/photo-library.mdx
new file mode 100644
index 00000000000..8a85ef97a65
--- /dev/null
+++ b/versioned_docs/version-v5/native/photo-library.mdx
@@ -0,0 +1,107 @@
+---
+sidebar_label: 'Photo Library'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Photo Library
+
+The PhotoLibrary plugin allows access to photos from device by url. So you can use plain img tag to display photos and their thumbnails, and different 3rd party libraries as well.
+Saving photos and videos to the library is also supported.
+cdvphotolibrary urls should be trusted by Angular. See plugin homepage to learn how.
+
+
+ github.com/terikon/cordova-plugin-photo-library
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { PhotoLibrary } from '@awesome-cordova-plugins/photo-library/ngx';
+
+constructor(private photoLibrary: PhotoLibrary) { }
+
+this.photoLibrary.requestAuthorization().then(() => {
+ this.photoLibrary.getLibrary().subscribe({
+ next: library => {
+ library.forEach(function(libraryItem) {
+ console.log(libraryItem.id); // ID of the photo
+ console.log(libraryItem.photoURL); // Cross-platform access to photo
+ console.log(libraryItem.thumbnailURL);// Cross-platform access to thumbnail
+ console.log(libraryItem.fileName);
+ console.log(libraryItem.width);
+ console.log(libraryItem.height);
+ console.log(libraryItem.creationDate);
+ console.log(libraryItem.latitude);
+ console.log(libraryItem.longitude);
+ console.log(libraryItem.albumIds); // array of ids of appropriate AlbumItem, only of includeAlbumsData was used
+ });
+ },
+ error: err => { console.log('could not get photos'); },
+ complete: () => { console.log('done getting photos'); }
+ });
+})
+.catch(err => console.log('permissions weren\'t granted'));
+
+```
diff --git a/versioned_docs/version-v5/native/photo-viewer.md b/versioned_docs/version-v5/native/photo-viewer.md
deleted file mode 100644
index 413c354e904..00000000000
--- a/versioned_docs/version-v5/native/photo-viewer.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-sidebar_label: 'Photo Viewer'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Photo Viewer
-
-This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
-
-
- github.com/sarriaroman/photoviewer
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { PhotoViewer } from '@awesome-cordova-plugins/photo-viewer/ngx';
-
-constructor(private photoViewer: PhotoViewer) { }
-
-...
-
-this.photoViewer.show('https://mysite.com/path/to/image.jpg');
-
-this.photoViewer.show('https://mysite.com/path/to/image.jpg', 'My image title', {share: false});
-
-this.photoViewer.show('https://mysecuresite.com/path/to/image.jpg', 'My image title', {share: false, headers: '{username:foo,password:bar}'});
-```
diff --git a/versioned_docs/version-v5/native/photo-viewer.mdx b/versioned_docs/version-v5/native/photo-viewer.mdx
new file mode 100644
index 00000000000..d68361ba6de
--- /dev/null
+++ b/versioned_docs/version-v5/native/photo-viewer.mdx
@@ -0,0 +1,89 @@
+---
+sidebar_label: 'Photo Viewer'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Photo Viewer
+
+This plugin can display your image in full screen with the ability to pan, zoom, and share the image.
+
+
+ github.com/sarriaroman/photoviewer
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { PhotoViewer } from '@awesome-cordova-plugins/photo-viewer/ngx';
+
+constructor(private photoViewer: PhotoViewer) { }
+
+...
+
+this.photoViewer.show('https://mysite.com/path/to/image.jpg');
+
+this.photoViewer.show('https://mysite.com/path/to/image.jpg', 'My image title', {share: false});
+
+this.photoViewer.show('https://mysecuresite.com/path/to/image.jpg', 'My image title', {share: false, headers: '{username:foo,password:bar}'});
+```
diff --git a/versioned_docs/version-v5/native/printer.md b/versioned_docs/version-v5/native/printer.md
deleted file mode 100644
index 8a256bc2939..00000000000
--- a/versioned_docs/version-v5/native/printer.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-sidebar_label: 'Printer'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Printer
-
-Prints documents or HTML rendered content
-
-
- github.com/katzer/cordova-plugin-printer
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Printer, PrintOptions } from '@awesome-cordova-plugins/printer/ngx';
-
-constructor(private printer: Printer) { }
-
-...
-
-this.printer.isAvailable().then(onSuccess, onError);
-
-let options: PrintOptions = {
- name: 'MyDocument',
- duplex: true,
- orientation: 'landscape',
- monochrome: true
-}
-
-this.printer.print(content, options).then(onSuccess, onError);
-```
diff --git a/versioned_docs/version-v5/native/printer.mdx b/versioned_docs/version-v5/native/printer.mdx
new file mode 100644
index 00000000000..d3ac964842f
--- /dev/null
+++ b/versioned_docs/version-v5/native/printer.mdx
@@ -0,0 +1,93 @@
+---
+sidebar_label: 'Printer'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Printer
+
+Prints documents or HTML rendered content
+
+
+ github.com/katzer/cordova-plugin-printer
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Printer, PrintOptions } from '@awesome-cordova-plugins/printer/ngx';
+
+constructor(private printer: Printer) { }
+
+...
+
+this.printer.isAvailable().then(onSuccess, onError);
+
+let options: PrintOptions = {
+ name: 'MyDocument',
+ duplex: true,
+ orientation: 'landscape',
+ monochrome: true
+}
+
+this.printer.print(content, options).then(onSuccess, onError);
+```
diff --git a/versioned_docs/version-v5/native/pspdfkit-cordova.md b/versioned_docs/version-v5/native/pspdfkit-cordova.md
deleted file mode 100644
index bd3c4882691..00000000000
--- a/versioned_docs/version-v5/native/pspdfkit-cordova.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-sidebar_label: 'PSPDFKit-Cordova'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# PSPDFKit-Cordova
-
-The official plugin to use PSPDFKit with Cordova and Ionic.
-
-
- github.com/PSPDFKit/PSPDFKit-Cordova
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { PSPDFKit } from '@awesome-cordova-plugins/pspdfkit-cordova/ngx';
-
-
-constructor(private pspdfkit: PSPDFKit) { }
-
-...
-
-// Set your license key here.
-this.pspdfkit.setLicenseKey("YOUR KEY");
-
-// Show a PDF in single page mode, with a black background.
-this.pspdfkit.present('document.pdf', {pageMode: 'single', backgroundColor: "black"})
- .then(result => {
- console.log(result); // Success
- })
- .catch(error => {
- console.log(error); // Failed
- });
-}
-
-// Scroll to page at index 1.
-this.pspdfkit.setPage(1, true);
-
-```
diff --git a/versioned_docs/version-v5/native/pspdfkit-cordova.mdx b/versioned_docs/version-v5/native/pspdfkit-cordova.mdx
new file mode 100644
index 00000000000..c1ac5f052c7
--- /dev/null
+++ b/versioned_docs/version-v5/native/pspdfkit-cordova.mdx
@@ -0,0 +1,100 @@
+---
+sidebar_label: 'PSPDFKit-Cordova'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# PSPDFKit-Cordova
+
+The official plugin to use PSPDFKit with Cordova and Ionic.
+
+
+ github.com/PSPDFKit/PSPDFKit-Cordova
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { PSPDFKit } from '@awesome-cordova-plugins/pspdfkit-cordova/ngx';
+
+
+constructor(private pspdfkit: PSPDFKit) { }
+
+...
+
+// Set your license key here.
+this.pspdfkit.setLicenseKey("YOUR KEY");
+
+// Show a PDF in single page mode, with a black background.
+this.pspdfkit.present('document.pdf', {pageMode: 'single', backgroundColor: "black"})
+ .then(result => {
+ console.log(result); // Success
+ })
+ .catch(error => {
+ console.log(error); // Failed
+ });
+}
+
+// Scroll to page at index 1.
+this.pspdfkit.setPage(1, true);
+
+```
diff --git a/versioned_docs/version-v5/native/purchases.md b/versioned_docs/version-v5/native/purchases.md
deleted file mode 100644
index e7288c19a1c..00000000000
--- a/versioned_docs/version-v5/native/purchases.md
+++ /dev/null
@@ -1,122 +0,0 @@
----
-sidebar_label: 'Purchases'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Purchases
-
-Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
-
-## Features
-
-| | RevenueCat |
-| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| ✅ | Server-side receipt validation |
-| ➡️ | [Webhooks](https://docs.revenuecat.com/docs/webhooks) - enhanced server-to-server communication with events for purchases, renewals, cancellations, and more |
-| 🎯 | Subscription status tracking - know whether a user is subscribed whether they're on iOS, Android or web |
-| 📊 | Analytics - automatic calculation of metrics like conversion, mrr, and churn |
-| 📝 | [Online documentation](https://docs.revenuecat.com/docs) up to date |
-| 🔀 | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it |
-| 💯 | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases) |
-| 📮 | Great support - [Help Center](https://revenuecat.zendesk.com) |
-| 🤩 | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap) |
-
-## Getting Started
-
-For more detailed information, you can view our complete documentation at [docs.revenuecat.com](https://docs.revenuecat.com/docs).
-
-
- github.com/RevenueCat/cordova-plugin-purchases
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-#### 1. Get a RevenueCat API key
-
-Log in to the [RevenueCat dashboard](https://app.revenuecat.com) and obtain a free API key for your application.
-
-#### 2. Initialize the SDK
-
-You should only configure _Purchases_ once (usually on app launch) as soon as your app has a unique user id for your user. This can be when a user logs in if you have accounts or on launch if you can generate a random user identifier.
-
-```tsx
- import { Platform } from "@ionic/angular";
- import { Purchases } from "@awesome-cordova-plugins/purchases/ngx";
-
- constructor(public platform: Platform, private purchases: Purchases) {
- platform.ready().then(() => {
- this.purchases.setDebugLogsEnabled(true); // Enable to get debug logs
- this.purchases.setup("my_api_key", "my_app_user_id");
- }
- }
-```
-
-#### 3. Quickstart
-
-Please follow the [Quickstart Guide](https://docs.revenuecat.com/docs/) for more information on how to use the SDK
-
-### Requirements
-
-Requires XCode 11.0+ and minimum target iOS 9.0+
-This plugin has been tested with cordova-plugin-purchases@
diff --git a/versioned_docs/version-v5/native/purchases.mdx b/versioned_docs/version-v5/native/purchases.mdx
new file mode 100644
index 00000000000..01af5df5959
--- /dev/null
+++ b/versioned_docs/version-v5/native/purchases.mdx
@@ -0,0 +1,122 @@
+---
+sidebar_label: 'Purchases'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Purchases
+
+Purchases is a cross platform solution for managing in-app subscriptions. A backend is also provided via [RevenueCat](https://www.revenuecat.com)
+
+## Features
+
+| | RevenueCat |
+| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ✅ | Server-side receipt validation |
+| ➡️ | [Webhooks](https://docs.revenuecat.com/docs/webhooks) - enhanced server-to-server communication with events for purchases, renewals, cancellations, and more |
+| 🎯 | Subscription status tracking - know whether a user is subscribed whether they're on iOS, Android or web |
+| 📊 | Analytics - automatic calculation of metrics like conversion, mrr, and churn |
+| 📝 | [Online documentation](https://docs.revenuecat.com/docs) up to date |
+| 🔀 | [Integrations](https://www.revenuecat.com/integrations) - over a dozen integrations to easily send purchase data where you need it |
+| 💯 | Well maintained - [frequent releases](https://github.com/RevenueCat/cordova-plugin-purchases/releases) |
+| 📮 | Great support - [Help Center](https://revenuecat.zendesk.com) |
+| 🤩 | Awesome [new features](https://trello.com/b/RZRnWRbI/revenuecat-product-roadmap) |
+
+## Getting Started
+
+For more detailed information, you can view our complete documentation at [docs.revenuecat.com](https://docs.revenuecat.com/docs).
+
+
+ github.com/RevenueCat/cordova-plugin-purchases
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+#### 1. Get a RevenueCat API key
+
+Log in to the [RevenueCat dashboard](https://app.revenuecat.com) and obtain a free API key for your application.
+
+#### 2. Initialize the SDK
+
+You should only configure _Purchases_ once (usually on app launch) as soon as your app has a unique user id for your user. This can be when a user logs in if you have accounts or on launch if you can generate a random user identifier.
+
+```tsx
+ import { Platform } from "@ionic/angular";
+ import { Purchases } from "@awesome-cordova-plugins/purchases/ngx";
+
+ constructor(public platform: Platform, private purchases: Purchases) {
+ platform.ready().then(() => {
+ this.purchases.setDebugLogsEnabled(true); // Enable to get debug logs
+ this.purchases.setup("my_api_key", "my_app_user_id");
+ }
+ }
+```
+
+#### 3. Quickstart
+
+Please follow the [Quickstart Guide](https://docs.revenuecat.com/docs/) for more information on how to use the SDK
+
+### Requirements
+
+Requires XCode 11.0+ and minimum target iOS 9.0+
+This plugin has been tested with cordova-plugin-purchases@
diff --git a/versioned_docs/version-v5/native/push.md b/versioned_docs/version-v5/native/push.md
deleted file mode 100644
index de211458bcc..00000000000
--- a/versioned_docs/version-v5/native/push.md
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: 'PhoneGap Plugin for Push Notifications With Cordova and Ionic'
-description: 'Register and receive push notifications on your Ionic apps using the Cordova plugin: phonegap-plugin-push. Read for how to install on supported platforms.'
-sidebar_label: 'Push'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Push
-
-Register and receive push notifications.
-
-Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
-
-For TypeScript users, see the [Push plugin docs about using TypeScript for custom notifications](https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/TYPESCRIPT.md).
-
-
- github.com/phonegap/phonegap-plugin-push
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Push, PushObject, PushOptions } from '@awesome-cordova-plugins/push/ngx';
-
-constructor(private push: Push) { }
-
-...
-
-
-// to check if we have permission
-this.push.hasPermission()
- .then((res: any) => {
-
- if (res.isEnabled) {
- console.log('We have permission to send push notifications');
- } else {
- console.log('We do not have permission to send push notifications');
- }
-
- });
-
-// Create a channel (Android O and above). You'll need to provide the id, description and importance properties.
-this.push.createChannel({
- id: "testchannel1",
- description: "My first test channel",
- // The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest.
- importance: 3,
- //badge is used to if badge appears on the app icon see https://developer.android.com/reference/android/app/NotificationChannel.html#setShowBadge(boolean).
- //false = no badge on app icon.
- //true = badge on app icon
- badge: false
-}).then(() => console.log('Channel created'));
-
-// Delete a channel (Android O and above)
-this.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted'));
-
-// Return a list of currently configured channels
-this.push.listChannels().then((channels) => console.log('List of channels', channels))
-
-// to initialize push notifications
-
-const options: PushOptions = {
- android: {},
- ios: {
- alert: 'true',
- badge: true,
- sound: 'false'
- },
- windows: {},
- browser: {
- pushServiceURL: 'http://push.api.phonegap.com/v1/push'
- }
-}
-
-const pushObject: PushObject = this.push.init(options);
-
-
-pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification));
-
-pushObject.on('registration').subscribe((registration: any) => console.log('Device registered', registration));
-
-pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
-
-
-```
diff --git a/versioned_docs/version-v5/native/push.mdx b/versioned_docs/version-v5/native/push.mdx
new file mode 100644
index 00000000000..7f41642bf7c
--- /dev/null
+++ b/versioned_docs/version-v5/native/push.mdx
@@ -0,0 +1,146 @@
+---
+title: 'PhoneGap Plugin for Push Notifications With Cordova and Ionic'
+description: 'Register and receive push notifications on your Ionic apps using the Cordova plugin: phonegap-plugin-push. Read for how to install on supported platforms.'
+sidebar_label: 'Push'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Push
+
+Register and receive push notifications.
+
+Requires Cordova plugin: `phonegap-plugin-push`. For more info, please see the [Push plugin docs](https://github.com/phonegap/phonegap-plugin-push).
+
+For TypeScript users, see the [Push plugin docs about using TypeScript for custom notifications](https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/TYPESCRIPT.md).
+
+
+ github.com/phonegap/phonegap-plugin-push
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Push, PushObject, PushOptions } from '@awesome-cordova-plugins/push/ngx';
+
+constructor(private push: Push) { }
+
+...
+
+
+// to check if we have permission
+this.push.hasPermission()
+ .then((res: any) => {
+
+ if (res.isEnabled) {
+ console.log('We have permission to send push notifications');
+ } else {
+ console.log('We do not have permission to send push notifications');
+ }
+
+ });
+
+// Create a channel (Android O and above). You'll need to provide the id, description and importance properties.
+this.push.createChannel({
+ id: "testchannel1",
+ description: "My first test channel",
+ // The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest.
+ importance: 3,
+ //badge is used to if badge appears on the app icon see https://developer.android.com/reference/android/app/NotificationChannel.html#setShowBadge(boolean).
+ //false = no badge on app icon.
+ //true = badge on app icon
+ badge: false
+}).then(() => console.log('Channel created'));
+
+// Delete a channel (Android O and above)
+this.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted'));
+
+// Return a list of currently configured channels
+this.push.listChannels().then((channels) => console.log('List of channels', channels))
+
+// to initialize push notifications
+
+const options: PushOptions = {
+ android: {},
+ ios: {
+ alert: 'true',
+ badge: true,
+ sound: 'false'
+ },
+ windows: {},
+ browser: {
+ pushServiceURL: 'http://push.api.phonegap.com/v1/push'
+ }
+}
+
+const pushObject: PushObject = this.push.init(options);
+
+
+pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification));
+
+pushObject.on('registration').subscribe((registration: any) => console.log('Device registered', registration));
+
+pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
+
+
+```
diff --git a/versioned_docs/version-v5/native/pushape-push.md b/versioned_docs/version-v5/native/pushape-push.md
deleted file mode 100644
index c395223022e..00000000000
--- a/versioned_docs/version-v5/native/pushape-push.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-sidebar_label: 'PushapePush'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# PushapePush
-
-Register and receive push notifications.
-This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
-
-Pushape service: @link https://glue-labs.com/pushape-invio-notifiche-push-ios-android-api-sdk
-
-Requires Cordova plugin: `pushape-cordova-push`. For more info, please see the [Pushape plugin docs](https://github.com/gluelabs/pushape-cordova-push).
-
-For TypeScript users, see the [Pushape plugin docs about using TypeScript for custom notifications](https://github.com/gluelabs/pushape-cordova-push/blob/master/docs/PUSHAPE_TYPESCRIPT.md).
-
-
- github.com/gluelabs/pushape-cordova-push
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { PushapePush } from '@awesome-cordova-plugins/pushape-push/ngx';
-
-
-constructor(private readonly pushapePush: PushapePush) { }
-
-...
-
-
-
-```
diff --git a/versioned_docs/version-v5/native/pushape-push.mdx b/versioned_docs/version-v5/native/pushape-push.mdx
new file mode 100644
index 00000000000..59d5f94c65e
--- /dev/null
+++ b/versioned_docs/version-v5/native/pushape-push.mdx
@@ -0,0 +1,94 @@
+---
+sidebar_label: 'PushapePush'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# PushapePush
+
+Register and receive push notifications.
+This plugin extends functionalities of Push native plugin in order to use it with Pushape service.
+
+Pushape service: @link https://glue-labs.com/pushape-invio-notifiche-push-ios-android-api-sdk
+
+Requires Cordova plugin: `pushape-cordova-push`. For more info, please see the [Pushape plugin docs](https://github.com/gluelabs/pushape-cordova-push).
+
+For TypeScript users, see the [Pushape plugin docs about using TypeScript for custom notifications](https://github.com/gluelabs/pushape-cordova-push/blob/master/docs/PUSHAPE_TYPESCRIPT.md).
+
+
+ github.com/gluelabs/pushape-cordova-push
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { PushapePush } from '@awesome-cordova-plugins/pushape-push/ngx';
+
+
+constructor(private readonly pushapePush: PushapePush) { }
+
+...
+
+
+
+```
diff --git a/versioned_docs/version-v5/native/safari-view-controller.md b/versioned_docs/version-v5/native/safari-view-controller.md
deleted file mode 100644
index 06f56ce773a..00000000000
--- a/versioned_docs/version-v5/native/safari-view-controller.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-sidebar_label: 'Safari View Controller'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Safari View Controller
-
-For displaying read-only web content.
-
-Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
-
-
- github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SafariViewController } from '@awesome-cordova-plugins/safari-view-controller/ngx';
-
-constructor(private safariViewController: SafariViewController) { }
-
-...
-
-this.safariViewController.isAvailable()
- .then((available: boolean) => {
- if (available) {
-
- this.safariViewController.show({
- url: 'http://ionic.io',
- hidden: false,
- animated: false,
- transition: 'curl',
- enterReaderModeIfAvailable: true,
- tintColor: '#ff0000'
- })
- .subscribe((result: any) => {
- if(result.event === 'opened') console.log('Opened');
- else if(result.event === 'loaded') console.log('Loaded');
- else if(result.event === 'closed') console.log('Closed');
- },
- (error: any) => console.error(error)
- );
-
- } else {
- // use fallback browser, example InAppBrowser
- }
- }
- );
-```
diff --git a/versioned_docs/version-v5/native/safari-view-controller.mdx b/versioned_docs/version-v5/native/safari-view-controller.mdx
new file mode 100644
index 00000000000..97cd91c8aba
--- /dev/null
+++ b/versioned_docs/version-v5/native/safari-view-controller.mdx
@@ -0,0 +1,111 @@
+---
+sidebar_label: 'Safari View Controller'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Safari View Controller
+
+For displaying read-only web content.
+
+Requires Cordova plugin: `cordova-plugin-safariviewcontroller`. For more info, please see the [Safari View Controller plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller).
+
+
+ github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SafariViewController } from '@awesome-cordova-plugins/safari-view-controller/ngx';
+
+constructor(private safariViewController: SafariViewController) { }
+
+...
+
+this.safariViewController.isAvailable()
+ .then((available: boolean) => {
+ if (available) {
+
+ this.safariViewController.show({
+ url: 'http://ionic.io',
+ hidden: false,
+ animated: false,
+ transition: 'curl',
+ enterReaderModeIfAvailable: true,
+ tintColor: '#ff0000'
+ })
+ .subscribe((result: any) => {
+ if(result.event === 'opened') console.log('Opened');
+ else if(result.event === 'loaded') console.log('Loaded');
+ else if(result.event === 'closed') console.log('Closed');
+ },
+ (error: any) => console.error(error)
+ );
+
+ } else {
+ // use fallback browser, example InAppBrowser
+ }
+ }
+ );
+```
diff --git a/versioned_docs/version-v5/native/screen-orientation.md b/versioned_docs/version-v5/native/screen-orientation.md
deleted file mode 100644
index 52d5a8edb88..00000000000
--- a/versioned_docs/version-v5/native/screen-orientation.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-sidebar_label: 'Screen Orientation'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Screen Orientation
-
-Cordova plugin to set/lock the screen orientation in a common way.
-
-Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
-
-
- github.com/apache/cordova-plugin-screen-orientation
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation/ngx';
-
-constructor(private screenOrientation: ScreenOrientation) { }
-
-...
-
-
-// get current
-console.log(this.screenOrientation.type); // logs the current orientation, example: 'landscape'
-
-// set to landscape
-this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
-
-// allow user rotate
-this.screenOrientation.unlock();
-
-// detect orientation changes
-this.screenOrientation.onChange().subscribe(
- () => {
- console.log("Orientation Changed");
- }
-);
-
-```
diff --git a/versioned_docs/version-v5/native/screen-orientation.mdx b/versioned_docs/version-v5/native/screen-orientation.mdx
new file mode 100644
index 00000000000..3fb0c37a78e
--- /dev/null
+++ b/versioned_docs/version-v5/native/screen-orientation.mdx
@@ -0,0 +1,104 @@
+---
+sidebar_label: 'Screen Orientation'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Screen Orientation
+
+Cordova plugin to set/lock the screen orientation in a common way.
+
+Requires Cordova plugin: `cordova-plugin-screen-orientation`. For more info, please see the [Screen Orientation plugin docs](https://github.com/apache/cordova-plugin-screen-orientation).
+
+
+ github.com/apache/cordova-plugin-screen-orientation
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation/ngx';
+
+constructor(private screenOrientation: ScreenOrientation) { }
+
+...
+
+
+// get current
+console.log(this.screenOrientation.type); // logs the current orientation, example: 'landscape'
+
+// set to landscape
+this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
+
+// allow user rotate
+this.screenOrientation.unlock();
+
+// detect orientation changes
+this.screenOrientation.onChange().subscribe(
+ () => {
+ console.log("Orientation Changed");
+ }
+);
+
+```
diff --git a/versioned_docs/version-v5/native/service-discovery.md b/versioned_docs/version-v5/native/service-discovery.md
deleted file mode 100644
index 7918888ab78..00000000000
--- a/versioned_docs/version-v5/native/service-discovery.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-sidebar_label: 'ServiceDiscovery'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# ServiceDiscovery
-
-Simple plugin to get any SSDP / UPnP / DLNA service on a local network
-
-
- github.com/scottdermott/cordova-plugin-discovery
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { ServiceDiscovery } from '@awesome-cordova-plugins/service-discovery';
-
-
-constructor(private serviceDiscovery: ServiceDiscovery) { }
-
-...
-
-
-this.serviceDiscovery.getNetworkServices('ssdp:all')
- .then(devices => console.log(devices))
- .catch(error => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/service-discovery.mdx b/versioned_docs/version-v5/native/service-discovery.mdx
new file mode 100644
index 00000000000..938a1f0cf8f
--- /dev/null
+++ b/versioned_docs/version-v5/native/service-discovery.mdx
@@ -0,0 +1,90 @@
+---
+sidebar_label: 'ServiceDiscovery'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# ServiceDiscovery
+
+Simple plugin to get any SSDP / UPnP / DLNA service on a local network
+
+
+ github.com/scottdermott/cordova-plugin-discovery
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { ServiceDiscovery } from '@awesome-cordova-plugins/service-discovery';
+
+
+constructor(private serviceDiscovery: ServiceDiscovery) { }
+
+...
+
+
+this.serviceDiscovery.getNetworkServices('ssdp:all')
+ .then(devices => console.log(devices))
+ .catch(error => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/shake.md b/versioned_docs/version-v5/native/shake.md
deleted file mode 100644
index f671de5d8fc..00000000000
--- a/versioned_docs/version-v5/native/shake.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-sidebar_label: 'Shake'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Shake
-
-Handles shake gesture
-
-
- github.com/leecrossley/cordova-plugin-shake
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Shake } from '@awesome-cordova-plugins/shake/ngx';
-
-constructor(private shake: Shake) { }
-
-...
-
-const watch = this.shake.startWatch(60).subscribe(() => {
- // do something
- });
-
-watch.unsubscribe();
-```
diff --git a/versioned_docs/version-v5/native/shake.mdx b/versioned_docs/version-v5/native/shake.mdx
new file mode 100644
index 00000000000..707912d3f44
--- /dev/null
+++ b/versioned_docs/version-v5/native/shake.mdx
@@ -0,0 +1,86 @@
+---
+sidebar_label: 'Shake'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Shake
+
+Handles shake gesture
+
+
+ github.com/leecrossley/cordova-plugin-shake
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Shake } from '@awesome-cordova-plugins/shake/ngx';
+
+constructor(private shake: Shake) { }
+
+...
+
+const watch = this.shake.startWatch(60).subscribe(() => {
+ // do something
+ });
+
+watch.unsubscribe();
+```
diff --git a/versioned_docs/version-v5/native/sign-in-with-apple.md b/versioned_docs/version-v5/native/sign-in-with-apple.md
deleted file mode 100644
index aa9f1d12d0f..00000000000
--- a/versioned_docs/version-v5/native/sign-in-with-apple.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-sidebar_label: 'Sign In With Apple'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Sign In With Apple
-
-Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
-Instead of filling out forms, verifying email addresses, and choosing new passwords,
-they can use Sign in with Apple to set up an account and start using your app right away.
-All accounts are protected with two-factor authentication for superior security,
-and Apple will not track users’ activity in your app or website.
-_Source:_ https://developer.apple.com/sign-in-with-apple/
-
-
- github.com/twogate/cordova-plugin-sign-in-with-apple
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SignInWithApple, AppleSignInResponse, AppleSignInErrorResponse, ASAuthorizationAppleIDRequest } from '@awesome-cordova-plugins/sign-in-with-apple/ngx';
-
-
-constructor(private signInWithApple: SignInWithApple) { }
-
-...
-
-
- this.signInWithApple.signin({
- requestedScopes: [
- ASAuthorizationAppleIDRequest.ASAuthorizationScopeFullName,
- ASAuthorizationAppleIDRequest.ASAuthorizationScopeEmail
- ]
- })
- .then((res: AppleSignInResponse) => {
- // https://developer.apple.com/documentation/signinwithapplerestapi/verifying_a_user
- alert('Send token to apple for verification: ' + res.identityToken);
- console.log(res);
- })
- .catch((error: AppleSignInErrorResponse) => {
- alert(error.code + ' ' + error.localizedDescription);
- console.error(error);
- });
-
-```
diff --git a/versioned_docs/version-v5/native/sign-in-with-apple.mdx b/versioned_docs/version-v5/native/sign-in-with-apple.mdx
new file mode 100644
index 00000000000..d60e48c333d
--- /dev/null
+++ b/versioned_docs/version-v5/native/sign-in-with-apple.mdx
@@ -0,0 +1,106 @@
+---
+sidebar_label: 'Sign In With Apple'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Sign In With Apple
+
+Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID.
+Instead of filling out forms, verifying email addresses, and choosing new passwords,
+they can use Sign in with Apple to set up an account and start using your app right away.
+All accounts are protected with two-factor authentication for superior security,
+and Apple will not track users’ activity in your app or website.
+_Source:_ https://developer.apple.com/sign-in-with-apple/
+
+
+ github.com/twogate/cordova-plugin-sign-in-with-apple
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SignInWithApple, AppleSignInResponse, AppleSignInErrorResponse, ASAuthorizationAppleIDRequest } from '@awesome-cordova-plugins/sign-in-with-apple/ngx';
+
+
+constructor(private signInWithApple: SignInWithApple) { }
+
+...
+
+
+ this.signInWithApple.signin({
+ requestedScopes: [
+ ASAuthorizationAppleIDRequest.ASAuthorizationScopeFullName,
+ ASAuthorizationAppleIDRequest.ASAuthorizationScopeEmail
+ ]
+ })
+ .then((res: AppleSignInResponse) => {
+ // https://developer.apple.com/documentation/signinwithapplerestapi/verifying_a_user
+ alert('Send token to apple for verification: ' + res.identityToken);
+ console.log(res);
+ })
+ .catch((error: AppleSignInErrorResponse) => {
+ alert(error.code + ' ' + error.localizedDescription);
+ console.error(error);
+ });
+
+```
diff --git a/versioned_docs/version-v5/native/smartlook.md b/versioned_docs/version-v5/native/smartlook.md
deleted file mode 100644
index a1abfa0206e..00000000000
--- a/versioned_docs/version-v5/native/smartlook.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-sidebar_label: 'Smartlook'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Smartlook
-
-Official Smartlook SDK plugin.
-Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
-
-
- github.com/smartlook/cordova-smartlook.git
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Smartlook, SmartlookSetupConfig } from '@awesome-cordova-plugins/smartlook/ngx';
-
-...
-
-@Component( ... )
-export class AppComponent {
- constructor(private smartlook: Smartlook) {
- this.platform.ready().then(() => {
- this.smartlook.setupAndStartRecording(new SmartlookSetupConfig("YOUR API KEY"));
- }
- }
-}
-```
diff --git a/versioned_docs/version-v5/native/smartlook.mdx b/versioned_docs/version-v5/native/smartlook.mdx
new file mode 100644
index 00000000000..72cc0854e72
--- /dev/null
+++ b/versioned_docs/version-v5/native/smartlook.mdx
@@ -0,0 +1,91 @@
+---
+sidebar_label: 'Smartlook'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Smartlook
+
+Official Smartlook SDK plugin.
+Full documentation can be found here: https://smartlook.github.io/docs/sdk/ionic/
+
+
+ github.com/smartlook/cordova-smartlook.git
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Smartlook, SmartlookSetupConfig } from '@awesome-cordova-plugins/smartlook/ngx';
+
+...
+
+@Component( ... )
+export class AppComponent {
+ constructor(private smartlook: Smartlook) {
+ this.platform.ready().then(() => {
+ this.smartlook.setupAndStartRecording(new SmartlookSetupConfig("YOUR API KEY"));
+ }
+ }
+}
+```
diff --git a/versioned_docs/version-v5/native/sms-retriever.md b/versioned_docs/version-v5/native/sms-retriever.md
deleted file mode 100644
index 5e587ac7330..00000000000
--- a/versioned_docs/version-v5/native/sms-retriever.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-sidebar_label: 'Sms Retriever'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Sms Retriever
-
-This plugin retrives the SMS which arrive without requiring READ permissions.
-
-
- github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SmsRetriever } from '@awesome-cordova-plugins/sms-retriever';
-
-
-constructor(private smsRetriever: SmsRetriever) { }
-
-...
-
-
-this.smsRetriever.getAppHash()
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-this.smsRetriever.startWatching()
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/sms-retriever.mdx b/versioned_docs/version-v5/native/sms-retriever.mdx
new file mode 100644
index 00000000000..550dc0bba41
--- /dev/null
+++ b/versioned_docs/version-v5/native/sms-retriever.mdx
@@ -0,0 +1,93 @@
+---
+sidebar_label: 'Sms Retriever'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Sms Retriever
+
+This plugin retrives the SMS which arrive without requiring READ permissions.
+
+
+ github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SmsRetriever } from '@awesome-cordova-plugins/sms-retriever';
+
+
+constructor(private smsRetriever: SmsRetriever) { }
+
+...
+
+
+this.smsRetriever.getAppHash()
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+this.smsRetriever.startWatching()
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/sms.md b/versioned_docs/version-v5/native/sms.md
deleted file mode 100644
index 3f7c413a721..00000000000
--- a/versioned_docs/version-v5/native/sms.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-sidebar_label: 'SMS'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# SMS
-
-Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
-
-
- github.com/cordova-sms/cordova-sms-plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows
-- Windows Phone 8
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SMS } from '@awesome-cordova-plugins/sms/ngx';
-
-constructor(private sms: SMS) { }
-
-
-...
-
-
-// Send a text message using default options
-this.sms.send('416123456', 'Hello world!');
-```
diff --git a/versioned_docs/version-v5/native/sms.mdx b/versioned_docs/version-v5/native/sms.mdx
new file mode 100644
index 00000000000..533a924488e
--- /dev/null
+++ b/versioned_docs/version-v5/native/sms.mdx
@@ -0,0 +1,88 @@
+---
+sidebar_label: 'SMS'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# SMS
+
+Requires Cordova plugin: cordova-sms-plugin. For more info, please see the [SMS plugin docs](https://github.com/cordova-sms/cordova-sms-plugin).
+
+
+ github.com/cordova-sms/cordova-sms-plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows
+- Windows Phone 8
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SMS } from '@awesome-cordova-plugins/sms/ngx';
+
+constructor(private sms: SMS) { }
+
+
+...
+
+
+// Send a text message using default options
+this.sms.send('416123456', 'Hello world!');
+```
diff --git a/versioned_docs/version-v5/native/social-sharing.md b/versioned_docs/version-v5/native/social-sharing.md
deleted file mode 100644
index 68eb9fd500d..00000000000
--- a/versioned_docs/version-v5/native/social-sharing.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: 'Social Sharing | Cordova Social Sharing Plugin for Ionic Apps'
-description: 'Social sharing for Ionic apps allows you to share text, files, images, and links via social networks, SMS, and email—read to learn about this Cordova Plugin.'
-sidebar_label: 'Social Sharing'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Social Sharing
-
-Share text, files, images, and links via social networks, sms, and email.
-
-For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
-
-
- github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-- Windows
-- Windows Phone
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SocialSharing } from '@awesome-cordova-plugins/social-sharing/ngx';
-
-constructor(private socialSharing: SocialSharing) { }
-
-...
-
-// Check if sharing via email is supported
-this.socialSharing.canShareViaEmail().then(() => {
- // Sharing via email is possible
-}).catch(() => {
- // Sharing via email is not possible
-});
-
-// Share via email
-this.socialSharing.shareViaEmail('Body', 'Subject', ['recipient@example.org']).then(() => {
- // Success!
-}).catch(() => {
- // Error!
-});
-```
diff --git a/versioned_docs/version-v5/native/social-sharing.mdx b/versioned_docs/version-v5/native/social-sharing.mdx
new file mode 100644
index 00000000000..7ab1215b196
--- /dev/null
+++ b/versioned_docs/version-v5/native/social-sharing.mdx
@@ -0,0 +1,104 @@
+---
+title: 'Social Sharing | Cordova Social Sharing Plugin for Ionic Apps'
+description: 'Social sharing for Ionic apps allows you to share text, files, images, and links via social networks, SMS, and email—read to learn about this Cordova Plugin.'
+sidebar_label: 'Social Sharing'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Social Sharing
+
+Share text, files, images, and links via social networks, sms, and email.
+
+For Browser usage check out the Web Share API docs: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5-web-share-api
+
+
+ github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+- Windows
+- Windows Phone
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SocialSharing } from '@awesome-cordova-plugins/social-sharing/ngx';
+
+constructor(private socialSharing: SocialSharing) { }
+
+...
+
+// Check if sharing via email is supported
+this.socialSharing.canShareViaEmail().then(() => {
+ // Sharing via email is possible
+}).catch(() => {
+ // Sharing via email is not possible
+});
+
+// Share via email
+this.socialSharing.shareViaEmail('Body', 'Subject', ['recipient@example.org']).then(() => {
+ // Success!
+}).catch(() => {
+ // Error!
+});
+```
diff --git a/versioned_docs/version-v5/native/speech-recognition.md b/versioned_docs/version-v5/native/speech-recognition.md
deleted file mode 100644
index e7f3b735890..00000000000
--- a/versioned_docs/version-v5/native/speech-recognition.md
+++ /dev/null
@@ -1,118 +0,0 @@
----
-sidebar_label: 'Speech Recognition'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Speech Recognition
-
-This plugin does speech recognition using cloud services
-
-
- github.com/pbakondy/cordova-plugin-speechrecognition
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SpeechRecognition } from '@awesome-cordova-plugins/speech-recognition/ngx';
-
-constructor(private speechRecognition: SpeechRecognition) { }
-
-...
-
-
-
-// Check feature available
-this.speechRecognition.isRecognitionAvailable()
- .then((available: boolean) => console.log(available))
-
-// Start the recognition process
-this.speechRecognition.startListening(options)
- .subscribe(
- (matches: string[]) => console.log(matches),
- (onerror) => console.log('error:', onerror)
- )
-
-// Stop the recognition process (iOS only)
-this.speechRecognition.stopListening()
-
-// Get the list of supported languages
-this.speechRecognition.getSupportedLanguages()
- .then(
- (languages: string[]) => console.log(languages),
- (error) => console.log(error)
- )
-
-// Check permission
-this.speechRecognition.hasPermission()
- .then((hasPermission: boolean) => console.log(hasPermission))
-
-// Request permissions
-this.speechRecognition.requestPermission()
- .then(
- () => console.log('Granted'),
- () => console.log('Denied')
- )
-
-```
diff --git a/versioned_docs/version-v5/native/speech-recognition.mdx b/versioned_docs/version-v5/native/speech-recognition.mdx
new file mode 100644
index 00000000000..028443c33d5
--- /dev/null
+++ b/versioned_docs/version-v5/native/speech-recognition.mdx
@@ -0,0 +1,118 @@
+---
+sidebar_label: 'Speech Recognition'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Speech Recognition
+
+This plugin does speech recognition using cloud services
+
+
+ github.com/pbakondy/cordova-plugin-speechrecognition
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SpeechRecognition } from '@awesome-cordova-plugins/speech-recognition/ngx';
+
+constructor(private speechRecognition: SpeechRecognition) { }
+
+...
+
+
+
+// Check feature available
+this.speechRecognition.isRecognitionAvailable()
+ .then((available: boolean) => console.log(available))
+
+// Start the recognition process
+this.speechRecognition.startListening(options)
+ .subscribe(
+ (matches: string[]) => console.log(matches),
+ (onerror) => console.log('error:', onerror)
+ )
+
+// Stop the recognition process (iOS only)
+this.speechRecognition.stopListening()
+
+// Get the list of supported languages
+this.speechRecognition.getSupportedLanguages()
+ .then(
+ (languages: string[]) => console.log(languages),
+ (error) => console.log(error)
+ )
+
+// Check permission
+this.speechRecognition.hasPermission()
+ .then((hasPermission: boolean) => console.log(hasPermission))
+
+// Request permissions
+this.speechRecognition.requestPermission()
+ .then(
+ () => console.log('Granted'),
+ () => console.log('Denied')
+ )
+
+```
diff --git a/versioned_docs/version-v5/native/spinner-dialog.md b/versioned_docs/version-v5/native/spinner-dialog.md
deleted file mode 100644
index 78456f1dcbb..00000000000
--- a/versioned_docs/version-v5/native/spinner-dialog.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-sidebar_label: 'Spinner Dialog'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Spinner Dialog
-
-Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
-
-Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
-
-
- github.com/greybax/cordova-plugin-native-spinner
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows Phone 8
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SpinnerDialog } from '@awesome-cordova-plugins/spinner-dialog/ngx';
-
-constructor(private spinnerDialog: SpinnerDialog) { }
-
-...
-
-this.spinnerDialog.show();
-
-this.spinnerDialog.hide();
-```
diff --git a/versioned_docs/version-v5/native/spinner-dialog.mdx b/versioned_docs/version-v5/native/spinner-dialog.mdx
new file mode 100644
index 00000000000..c190ed6f9ad
--- /dev/null
+++ b/versioned_docs/version-v5/native/spinner-dialog.mdx
@@ -0,0 +1,91 @@
+---
+sidebar_label: 'Spinner Dialog'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Spinner Dialog
+
+Cordova plugin for showing a native spinner based on Paldom/SpinnerDialog.
+
+Requires Cordova plugin: `cordova-plugin-native-spinner`. For more info, please see the [Spinner Dialog plugin docs](https://github.com/greybax/cordova-plugin-native-spinner).
+
+
+ github.com/greybax/cordova-plugin-native-spinner
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows Phone 8
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SpinnerDialog } from '@awesome-cordova-plugins/spinner-dialog/ngx';
+
+constructor(private spinnerDialog: SpinnerDialog) { }
+
+...
+
+this.spinnerDialog.show();
+
+this.spinnerDialog.hide();
+```
diff --git a/versioned_docs/version-v5/native/splash-screen.md b/versioned_docs/version-v5/native/splash-screen.md
deleted file mode 100644
index ed5fbb83119..00000000000
--- a/versioned_docs/version-v5/native/splash-screen.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: 'Splash Screen | Cordova Splash Screen Plugin for Android & iOS'
-description: 'This Cordova plugin displays and hides a splash screen during application launch. Show and hide the splash screen after the Android or iOS app has loaded.'
-sidebar_label: 'Splash Screen'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Splash Screen
-
-This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
-
-
- github.com/apache/cordova-plugin-splashscreen
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Amazon Fire OS
-- Android
-- iOS
-- Windows
-
-## Capacitor
-
-Not Compatible
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SplashScreen } from '@awesome-cordova-plugins/splash-screen/ngx';
-
-constructor(private splashScreen: SplashScreen) { }
-
-...
-
-this.splashScreen.show();
-
-this.splashScreen.hide();
-```
diff --git a/versioned_docs/version-v5/native/splash-screen.mdx b/versioned_docs/version-v5/native/splash-screen.mdx
new file mode 100644
index 00000000000..051bafa3b22
--- /dev/null
+++ b/versioned_docs/version-v5/native/splash-screen.mdx
@@ -0,0 +1,95 @@
+---
+title: 'Splash Screen | Cordova Splash Screen Plugin for Android & iOS'
+description: 'This Cordova plugin displays and hides a splash screen during application launch. Show and hide the splash screen after the Android or iOS app has loaded.'
+sidebar_label: 'Splash Screen'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Splash Screen
+
+This plugin displays and hides a splash screen during application launch. The methods below allows showing and hiding the splashscreen after the app has loaded.
+
+
+ github.com/apache/cordova-plugin-splashscreen
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Amazon Fire OS
+- Android
+- iOS
+- Windows
+
+## Capacitor
+
+Not Compatible
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SplashScreen } from '@awesome-cordova-plugins/splash-screen/ngx';
+
+constructor(private splashScreen: SplashScreen) { }
+
+...
+
+this.splashScreen.show();
+
+this.splashScreen.hide();
+```
diff --git a/versioned_docs/version-v5/native/spotify-auth.md b/versioned_docs/version-v5/native/spotify-auth.md
deleted file mode 100644
index 832138055b5..00000000000
--- a/versioned_docs/version-v5/native/spotify-auth.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-sidebar_label: 'Spotify Auth'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Spotify Auth
-
-Cordova plugin for authenticating with Spotify
-
-> https://github.com/Festify/cordova-spotify-oauth
-
-
- github.com/Festify/cordova-spotify-oauth
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SpotifyAuth } from '@awesome-cordova-plugins/spotify-auth/ngx';
-
-// [...]
-
-constructor(private spotifyAuth: SpotifyAuth) { }
-
-// [...]
-
-const config = {
- clientId: "<SPOTIFY CLIENT ID>",
- redirectUrl: "<REDIRECT URL, MUST MATCH WITH AUTH ENDPOINT AND SPOTIFY DEV CONSOLE>",
- scopes: ["streaming"], // see Spotify Dev console for all scopes
- tokenExchangeUrl: "<URL OF TOKEN EXCHANGE HTTP ENDPOINT>",
- tokenRefreshUrl: "<URL OF TOKEN REFRESH HTTP ENDPOINT>",
-};
-
-...
-
-this.spotifyAuth.authorize(config)
- .then(({ accessToken, expiresAt }) => {
- console.log(`Got an access token, its ${accessToken}!`);
- console.log(`Its going to expire in ${expiresAt - Date.now()}ms.`);
- });
-
-// [...]
-
-this.spotifyAuth.forget();
-
-// [...]
-```
diff --git a/versioned_docs/version-v5/native/spotify-auth.mdx b/versioned_docs/version-v5/native/spotify-auth.mdx
new file mode 100644
index 00000000000..c33e982d9c9
--- /dev/null
+++ b/versioned_docs/version-v5/native/spotify-auth.mdx
@@ -0,0 +1,108 @@
+---
+sidebar_label: 'Spotify Auth'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Spotify Auth
+
+Cordova plugin for authenticating with Spotify
+
+> https://github.com/Festify/cordova-spotify-oauth
+
+
+ github.com/Festify/cordova-spotify-oauth
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SpotifyAuth } from '@awesome-cordova-plugins/spotify-auth/ngx';
+
+// [...]
+
+constructor(private spotifyAuth: SpotifyAuth) { }
+
+// [...]
+
+const config = {
+ clientId: "<SPOTIFY CLIENT ID>",
+ redirectUrl: "<REDIRECT URL, MUST MATCH WITH AUTH ENDPOINT AND SPOTIFY DEV CONSOLE>",
+ scopes: ["streaming"], // see Spotify Dev console for all scopes
+ tokenExchangeUrl: "<URL OF TOKEN EXCHANGE HTTP ENDPOINT>",
+ tokenRefreshUrl: "<URL OF TOKEN REFRESH HTTP ENDPOINT>",
+};
+
+...
+
+this.spotifyAuth.authorize(config)
+ .then(({ accessToken, expiresAt }) => {
+ console.log(`Got an access token, its ${accessToken}!`);
+ console.log(`Its going to expire in ${expiresAt - Date.now()}ms.`);
+ });
+
+// [...]
+
+this.spotifyAuth.forget();
+
+// [...]
+```
diff --git a/versioned_docs/version-v5/native/sqlite-db-copy.md b/versioned_docs/version-v5/native/sqlite-db-copy.md
deleted file mode 100644
index 195d00f76de..00000000000
--- a/versioned_docs/version-v5/native/sqlite-db-copy.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-sidebar_label: 'Sqlite Db Copy'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Sqlite Db Copy
-
-This plugin does something
-
-
- github.com/an-rahulpandey/cordova-plugin-dbcopy
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SqliteDbCopy } from '@awesome-cordova-plugins/sqlite-db-copy/ngx';
-
-
-constructor(private sqliteDbCopy: SqliteDbCopy) { }
-
-...
-
-
-this.sqliteDbCopy.copy('sample.db', 0)
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/sqlite-db-copy.mdx b/versioned_docs/version-v5/native/sqlite-db-copy.mdx
new file mode 100644
index 00000000000..12e8b559509
--- /dev/null
+++ b/versioned_docs/version-v5/native/sqlite-db-copy.mdx
@@ -0,0 +1,90 @@
+---
+sidebar_label: 'Sqlite Db Copy'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Sqlite Db Copy
+
+This plugin does something
+
+
+ github.com/an-rahulpandey/cordova-plugin-dbcopy
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SqliteDbCopy } from '@awesome-cordova-plugins/sqlite-db-copy/ngx';
+
+
+constructor(private sqliteDbCopy: SqliteDbCopy) { }
+
+...
+
+
+this.sqliteDbCopy.copy('sample.db', 0)
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/sqlite-porter.md b/versioned_docs/version-v5/native/sqlite-porter.md
deleted file mode 100644
index b46dcf3cc69..00000000000
--- a/versioned_docs/version-v5/native/sqlite-porter.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-sidebar_label: 'SQLite Porter'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# SQLite Porter
-
-This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
-
-
- github.com/dpa99c/cordova-sqlite-porter
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Amazon Fire OS
-- Android
-- BlackBerry 10
-- Browser
-- iOS
-- Tizen
-- Windows
-- Windows Phone
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SQLitePorter } from '@awesome-cordova-plugins/sqlite-porter/ngx';
-
-
-constructor(private sqlitePorter: SQLitePorter) { }
-
-...
-
-let db = window.openDatabase('Test', '1.0', 'TestDB', 1 * 1024);
-// or we can use SQLite plugin
-// we will assume that we injected SQLite into this component as sqlite
-this.sqlite.create({
- name: 'data.db',
- location: 'default'
-})
- .then((db: any) => {
- let dbInstance = db._objectInstance;
- // we can pass db._objectInstance as the database option in all SQLitePorter methods
- });
-
-
-let sql = 'CREATE TABLE Artist ([Id] PRIMARY KEY, [Title]);' +
- 'INSERT INTO Artist(Id,Title) VALUES ("1","Fred");';
-
-this.sqlitePorter.importSqlToDb(db, sql)
- .then(() => console.log('Imported'))
- .catch(e => console.error(e));
-
-
-```
diff --git a/versioned_docs/version-v5/native/sqlite-porter.mdx b/versioned_docs/version-v5/native/sqlite-porter.mdx
new file mode 100644
index 00000000000..49c41b42b8f
--- /dev/null
+++ b/versioned_docs/version-v5/native/sqlite-porter.mdx
@@ -0,0 +1,112 @@
+---
+sidebar_label: 'SQLite Porter'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# SQLite Porter
+
+This Cordova/Phonegap plugin can be used to import/export to/from a SQLite database using either SQL or JSON.
+
+
+ github.com/dpa99c/cordova-sqlite-porter
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Amazon Fire OS
+- Android
+- BlackBerry 10
+- Browser
+- iOS
+- Tizen
+- Windows
+- Windows Phone
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SQLitePorter } from '@awesome-cordova-plugins/sqlite-porter/ngx';
+
+
+constructor(private sqlitePorter: SQLitePorter) { }
+
+...
+
+let db = window.openDatabase('Test', '1.0', 'TestDB', 1 * 1024);
+// or we can use SQLite plugin
+// we will assume that we injected SQLite into this component as sqlite
+this.sqlite.create({
+ name: 'data.db',
+ location: 'default'
+})
+ .then((db: any) => {
+ let dbInstance = db._objectInstance;
+ // we can pass db._objectInstance as the database option in all SQLitePorter methods
+ });
+
+
+let sql = 'CREATE TABLE Artist ([Id] PRIMARY KEY, [Title]);' +
+ 'INSERT INTO Artist(Id,Title) VALUES ("1","Fred");';
+
+this.sqlitePorter.importSqlToDb(db, sql)
+ .then(() => console.log('Imported'))
+ .catch(e => console.error(e));
+
+
+```
diff --git a/versioned_docs/version-v5/native/sqlite.md b/versioned_docs/version-v5/native/sqlite.md
deleted file mode 100644
index e28752ad5b5..00000000000
--- a/versioned_docs/version-v5/native/sqlite.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: "SQLite | Install Cordova SQLite Plugin for iOS and Android Apps"
-description: "Access SQLite databases on supported iOS, Android, macOS, and Windows devices by installing the Cordova SQLite Plugin for Ionic Framework Applications."
-sidebar_label: "SQLite
-"
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# SQLite
-
-Access SQLite databases on the device.
-
-
- github.com/litehelpers/Cordova-sqlite-storage
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- macOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SQLite, SQLiteObject } from '@awesome-cordova-plugins/sqlite/ngx';
-
-constructor(private sqlite: SQLite) { }
-
-...
-
-this.sqlite.create({
- name: 'data.db',
- location: 'default'
-})
- .then((db: SQLiteObject) => {
-
-
- db.executeSql('create table danceMoves(name VARCHAR(32))', [])
- .then(() => console.log('Executed SQL'))
- .catch(e => console.log(e));
-
-
- })
- .catch(e => console.log(e));
-
-```
diff --git a/versioned_docs/version-v5/native/sqlite.mdx b/versioned_docs/version-v5/native/sqlite.mdx
new file mode 100644
index 00000000000..79a0b14f0b3
--- /dev/null
+++ b/versioned_docs/version-v5/native/sqlite.mdx
@@ -0,0 +1,102 @@
+---
+title: "SQLite | Install Cordova SQLite Plugin for iOS and Android Apps"
+description: "Access SQLite databases on supported iOS, Android, macOS, and Windows devices by installing the Cordova SQLite Plugin for Ionic Framework Applications."
+sidebar_label: "SQLite
+"
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# SQLite
+
+Access SQLite databases on the device.
+
+
+ github.com/litehelpers/Cordova-sqlite-storage
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- macOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SQLite, SQLiteObject } from '@awesome-cordova-plugins/sqlite/ngx';
+
+constructor(private sqlite: SQLite) { }
+
+...
+
+this.sqlite.create({
+ name: 'data.db',
+ location: 'default'
+})
+ .then((db: SQLiteObject) => {
+
+
+ db.executeSql('create table danceMoves(name VARCHAR(32))', [])
+ .then(() => console.log('Executed SQL'))
+ .catch(e => console.log(e));
+
+
+ })
+ .catch(e => console.log(e));
+
+```
diff --git a/versioned_docs/version-v5/native/star-prnt.md b/versioned_docs/version-v5/native/star-prnt.md
deleted file mode 100644
index b6f89e3e8a7..00000000000
--- a/versioned_docs/version-v5/native/star-prnt.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-sidebar_label: 'StarPRNT'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# StarPRNT
-
-- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
-
-
- github.com/auctifera-josed/starprnt
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { StarPRNT } from '@awesome-cordova-plugins/star-prnt/ngx';
-
-
-constructor(private starprnt: StarPRNT) { }
-
-...
-
-
-this.starprnt.portDiscovery('all')
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/star-prnt.mdx b/versioned_docs/version-v5/native/star-prnt.mdx
new file mode 100644
index 00000000000..cd1197aa538
--- /dev/null
+++ b/versioned_docs/version-v5/native/star-prnt.mdx
@@ -0,0 +1,89 @@
+---
+sidebar_label: 'StarPRNT'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# StarPRNT
+
+- Ionic Native wrappers for the starprnt cordova plugin for Star Micronics Bluetooth/LAN printers
+
+
+ github.com/auctifera-josed/starprnt
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { StarPRNT } from '@awesome-cordova-plugins/star-prnt/ngx';
+
+
+constructor(private starprnt: StarPRNT) { }
+
+...
+
+
+this.starprnt.portDiscovery('all')
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/status-bar.md b/versioned_docs/version-v5/native/status-bar.md
deleted file mode 100644
index 585f957caf0..00000000000
--- a/versioned_docs/version-v5/native/status-bar.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: 'Status Bar | Cordova StatusBar Plugin for iOS and Android Apps'
-description: 'Manage the appearance of the native status bar with the Cordova StatusBar Plugin. Learn how to install status bar on supported iOS and Android platforms.'
-sidebar_label: 'Status Bar'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Status Bar
-
-Manage the appearance of the native status bar.
-
-Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
-
-
- github.com/apache/cordova-plugin-statusbar
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows
-
-## Capacitor
-
-Not Compatible
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { StatusBar } from '@awesome-cordova-plugins/status-bar/ngx';
-
-constructor(private statusBar: StatusBar) { }
-
-...
-
-// let status bar overlay webview
-this.statusBar.overlaysWebView(true);
-
-// set status bar to white
-this.statusBar.backgroundColorByHexString('#ffffff');
-```
diff --git a/versioned_docs/version-v5/native/status-bar.mdx b/versioned_docs/version-v5/native/status-bar.mdx
new file mode 100644
index 00000000000..c3f955e51a8
--- /dev/null
+++ b/versioned_docs/version-v5/native/status-bar.mdx
@@ -0,0 +1,97 @@
+---
+title: 'Status Bar | Cordova StatusBar Plugin for iOS and Android Apps'
+description: 'Manage the appearance of the native status bar with the Cordova StatusBar Plugin. Learn how to install status bar on supported iOS and Android platforms.'
+sidebar_label: 'Status Bar'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Status Bar
+
+Manage the appearance of the native status bar.
+
+Requires Cordova plugin: `cordova-plugin-statusbar`. For more info, please see the [StatusBar plugin docs](https://github.com/apache/cordova-plugin-statusbar).
+
+
+ github.com/apache/cordova-plugin-statusbar
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows
+
+## Capacitor
+
+Not Compatible
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { StatusBar } from '@awesome-cordova-plugins/status-bar/ngx';
+
+constructor(private statusBar: StatusBar) { }
+
+...
+
+// let status bar overlay webview
+this.statusBar.overlaysWebView(true);
+
+// set status bar to white
+this.statusBar.backgroundColorByHexString('#ffffff');
+```
diff --git a/versioned_docs/version-v5/native/streaming-media.md b/versioned_docs/version-v5/native/streaming-media.md
deleted file mode 100644
index e3d28e2feed..00000000000
--- a/versioned_docs/version-v5/native/streaming-media.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-sidebar_label: 'Streaming Media'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Streaming Media
-
-This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
-
-
- github.com/nchutchind/cordova-plugin-streaming-media
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Amazon Fire OS
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { StreamingMedia, StreamingVideoOptions } from '@awesome-cordova-plugins/streaming-media/ngx';
-
-constructor(private streamingMedia: StreamingMedia) { }
-
-let options: StreamingVideoOptions = {
- successCallback: () => { console.log('Video played') },
- errorCallback: (e) => { console.log('Error streaming') },
- orientation: 'landscape',
- shouldAutoClose: true,
- controls: false
-};
-
-this.streamingMedia.playVideo('https://path/to/video/stream', options);
-
-```
diff --git a/versioned_docs/version-v5/native/streaming-media.mdx b/versioned_docs/version-v5/native/streaming-media.mdx
new file mode 100644
index 00000000000..090580cf018
--- /dev/null
+++ b/versioned_docs/version-v5/native/streaming-media.mdx
@@ -0,0 +1,93 @@
+---
+sidebar_label: 'Streaming Media'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Streaming Media
+
+This plugin allows you to stream audio and video in a fullscreen, native player on iOS and Android.
+
+
+ github.com/nchutchind/cordova-plugin-streaming-media
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Amazon Fire OS
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { StreamingMedia, StreamingVideoOptions } from '@awesome-cordova-plugins/streaming-media/ngx';
+
+constructor(private streamingMedia: StreamingMedia) { }
+
+let options: StreamingVideoOptions = {
+ successCallback: () => { console.log('Video played') },
+ errorCallback: (e) => { console.log('Error streaming') },
+ orientation: 'landscape',
+ shouldAutoClose: true,
+ controls: false
+};
+
+this.streamingMedia.playVideo('https://path/to/video/stream', options);
+
+```
diff --git a/versioned_docs/version-v5/native/stripe.md b/versioned_docs/version-v5/native/stripe.md
deleted file mode 100644
index abaf9ee7e09..00000000000
--- a/versioned_docs/version-v5/native/stripe.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-sidebar_label: 'Stripe'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Stripe
-
-A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
-
-
- github.com/zyramedia/cordova-plugin-stripe
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- Browser
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Stripe } from '@awesome-cordova-plugins/stripe/ngx';
-
-constructor(private stripe: Stripe) { }
-
-...
-
-this.stripe.setPublishableKey('my_publishable_key');
-
-let card = {
- number: '4242424242424242',
- expMonth: 12,
- expYear: 2020,
- cvc: '220'
-}
-
-this.stripe.createCardToken(card)
- .then(token => console.log(token.id))
- .catch(error => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/stripe.mdx b/versioned_docs/version-v5/native/stripe.mdx
new file mode 100644
index 00000000000..e4f2fcec226
--- /dev/null
+++ b/versioned_docs/version-v5/native/stripe.mdx
@@ -0,0 +1,96 @@
+---
+sidebar_label: 'Stripe'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Stripe
+
+A plugin that allows you to use Stripe's Native SDKs for Android and iOS.
+
+
+ github.com/zyramedia/cordova-plugin-stripe
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- Browser
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Stripe } from '@awesome-cordova-plugins/stripe/ngx';
+
+constructor(private stripe: Stripe) { }
+
+...
+
+this.stripe.setPublishableKey('my_publishable_key');
+
+let card = {
+ number: '4242424242424242',
+ expMonth: 12,
+ expYear: 2020,
+ cvc: '220'
+}
+
+this.stripe.createCardToken(card)
+ .then(token => console.log(token.id))
+ .catch(error => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/sum-up.md b/versioned_docs/version-v5/native/sum-up.md
deleted file mode 100644
index e318ef84c6b..00000000000
--- a/versioned_docs/version-v5/native/sum-up.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-sidebar_label: 'SumUp'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# SumUp
-
-Plugin to communicate with a SumUp payment terminal
-
-
- github.com/mariusbackes/cordova-plugin-sumup
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { SumUp } from '@awesome-cordova-plugins/sum-up';
-
-
-constructor(private sumUp: SumUp) { }
-
-const sumUpKeys: SumUpKeys = new SumUpKeys();
-sumUpKeys.affiliateKey = 'YOUR_API_KEY'; // if not provided in installation
-sumUpKeys.accessToken = 'YOUR_ACCESS_TOKEN';
-
-this.sumUp.login(sumUpKeys)
- .then((res: SumUpResponse) => console.log(res))
- .catch((error: SumUpResponse) => console.error(error));
-
- this.sumUp.auth('YOUR_ACCESS_TOKEN')
- .then((res: SumUpResponse) => console.log(res))
- .catch((error: SumUpResponse) => console.error(error));
-
- this.sumUp.getSettings()
- .then((res: SumUpResponse) => console.log(res))
- .catch((error: SumUpResponse) => console.error(error));
-
- this.sumUp.logout()
- .then((res: SumUpResponse) => console.log(res))
- .catch((error: SumUpResponse) => console.error(error));
-
- this.sumUp.isLoggedIn()
- .then((res: SumUpLoginStatus) => console.log(res))
- .catch((error: SumUpLoginStatus) => console.error(error));
-
- this.sumUp.prepare()
- .then((res: SumUpResponse) => console.log(res))
- .catch((error: SumUpResponse) => console.error(error));
-
-this.sumUp.closeConnection()
- .then((res: SumUpResponse) => console.log(res))
- .catch((error: SumUpResponse) => console.error(error));
-
-this.sumUp.pay(10.0, 'EUR')
- .then((res: SumUpPayment) => console.log(res))
- .catch((error: SumUpPayment) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/sum-up.mdx b/versioned_docs/version-v5/native/sum-up.mdx
new file mode 100644
index 00000000000..3298dbfc293
--- /dev/null
+++ b/versioned_docs/version-v5/native/sum-up.mdx
@@ -0,0 +1,117 @@
+---
+sidebar_label: 'SumUp'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# SumUp
+
+Plugin to communicate with a SumUp payment terminal
+
+
+ github.com/mariusbackes/cordova-plugin-sumup
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { SumUp } from '@awesome-cordova-plugins/sum-up';
+
+
+constructor(private sumUp: SumUp) { }
+
+const sumUpKeys: SumUpKeys = new SumUpKeys();
+sumUpKeys.affiliateKey = 'YOUR_API_KEY'; // if not provided in installation
+sumUpKeys.accessToken = 'YOUR_ACCESS_TOKEN';
+
+this.sumUp.login(sumUpKeys)
+ .then((res: SumUpResponse) => console.log(res))
+ .catch((error: SumUpResponse) => console.error(error));
+
+ this.sumUp.auth('YOUR_ACCESS_TOKEN')
+ .then((res: SumUpResponse) => console.log(res))
+ .catch((error: SumUpResponse) => console.error(error));
+
+ this.sumUp.getSettings()
+ .then((res: SumUpResponse) => console.log(res))
+ .catch((error: SumUpResponse) => console.error(error));
+
+ this.sumUp.logout()
+ .then((res: SumUpResponse) => console.log(res))
+ .catch((error: SumUpResponse) => console.error(error));
+
+ this.sumUp.isLoggedIn()
+ .then((res: SumUpLoginStatus) => console.log(res))
+ .catch((error: SumUpLoginStatus) => console.error(error));
+
+ this.sumUp.prepare()
+ .then((res: SumUpResponse) => console.log(res))
+ .catch((error: SumUpResponse) => console.error(error));
+
+this.sumUp.closeConnection()
+ .then((res: SumUpResponse) => console.log(res))
+ .catch((error: SumUpResponse) => console.error(error));
+
+this.sumUp.pay(10.0, 'EUR')
+ .then((res: SumUpPayment) => console.log(res))
+ .catch((error: SumUpPayment) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/taptic-engine.md b/versioned_docs/version-v5/native/taptic-engine.md
deleted file mode 100644
index ee86ecd23d2..00000000000
--- a/versioned_docs/version-v5/native/taptic-engine.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-sidebar_label: 'Taptic Engine'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Taptic Engine
-
-An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
-
-
- github.com/EddyVerbruggen/cordova-plugin-taptic-engine
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { TapticEngine } from '@awesome-cordova-plugins/taptic-engine/ngx';
-
-...
-
-constructor(private taptic: TapticEngine) { }
-
-...
-
-this.taptic.selection();
-
-this.taptic.notification();
-
-this.taptic.impact();
-
-```
diff --git a/versioned_docs/version-v5/native/taptic-engine.mdx b/versioned_docs/version-v5/native/taptic-engine.mdx
new file mode 100644
index 00000000000..dcdfcda74b8
--- /dev/null
+++ b/versioned_docs/version-v5/native/taptic-engine.mdx
@@ -0,0 +1,91 @@
+---
+sidebar_label: 'Taptic Engine'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Taptic Engine
+
+An Ionic plugin to use Taptic Engine API on iPhone 7, 7 Plus or newer.
+
+
+ github.com/EddyVerbruggen/cordova-plugin-taptic-engine
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { TapticEngine } from '@awesome-cordova-plugins/taptic-engine/ngx';
+
+...
+
+constructor(private taptic: TapticEngine) { }
+
+...
+
+this.taptic.selection();
+
+this.taptic.notification();
+
+this.taptic.impact();
+
+```
diff --git a/versioned_docs/version-v5/native/tealium-adidentifier.md b/versioned_docs/version-v5/native/tealium-adidentifier.md
deleted file mode 100644
index d08610c1d8a..00000000000
--- a/versioned_docs/version-v5/native/tealium-adidentifier.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-sidebar_label: 'TealiumAdIdentifier'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# TealiumAdIdentifier
-
-This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
-Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
-
-
- github.com/Tealium/cordova-plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```
-import { TealiumAdIdentifier } from '@awesome-cordova-plugins/tealium-adidentifier/ngx';
-
-
-constructor(private adIdentifier: TealiumAdIdentifier) { }
-
-...
-
-
-this.adIdentifier.setPersistent("main");
-this.adIdentifier.setVolatile("main");
-
-```
diff --git a/versioned_docs/version-v5/native/tealium-adidentifier.mdx b/versioned_docs/version-v5/native/tealium-adidentifier.mdx
new file mode 100644
index 00000000000..b5f9a737a16
--- /dev/null
+++ b/versioned_docs/version-v5/native/tealium-adidentifier.mdx
@@ -0,0 +1,90 @@
+---
+sidebar_label: 'TealiumAdIdentifier'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# TealiumAdIdentifier
+
+This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
+Makes the IDFA and Google Ad Identifier available in the Tealium data layer.
+
+
+ github.com/Tealium/cordova-plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```
+import { TealiumAdIdentifier } from '@awesome-cordova-plugins/tealium-adidentifier/ngx';
+
+
+constructor(private adIdentifier: TealiumAdIdentifier) { }
+
+...
+
+
+this.adIdentifier.setPersistent("main");
+this.adIdentifier.setVolatile("main");
+
+```
diff --git a/versioned_docs/version-v5/native/tealium-installreferrer.md b/versioned_docs/version-v5/native/tealium-installreferrer.md
deleted file mode 100644
index d9be83679d8..00000000000
--- a/versioned_docs/version-v5/native/tealium-installreferrer.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-sidebar_label: 'TealiumInstallReferrer'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# TealiumInstallReferrer
-
-This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
-Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
-
-
- github.com/Tealium/cordova-plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```
-import { TealiumInstallReferrer } from '@awesome-cordova-plugins/tealium-installreferrer/ngx';
-
-
-constructor(private installReferrer: TealiumInstallReferrer) { }
-
-
-this.installReferrer.setPersistent("main");
-this.installReferrer.setVolatile("main");
-
-
-
-```
diff --git a/versioned_docs/version-v5/native/tealium-installreferrer.mdx b/versioned_docs/version-v5/native/tealium-installreferrer.mdx
new file mode 100644
index 00000000000..0c07e2fae3d
--- /dev/null
+++ b/versioned_docs/version-v5/native/tealium-installreferrer.mdx
@@ -0,0 +1,89 @@
+---
+sidebar_label: 'TealiumInstallReferrer'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# TealiumInstallReferrer
+
+This module depends on the [Tealium Cordova Plugin](https://github.com/tealium/cordova-plugin). Without it, this module will not do anything.
+Implements a Broadcast Receiver for the INSTALL_REFERRER intent.
+
+
+ github.com/Tealium/cordova-plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```
+import { TealiumInstallReferrer } from '@awesome-cordova-plugins/tealium-installreferrer/ngx';
+
+
+constructor(private installReferrer: TealiumInstallReferrer) { }
+
+
+this.installReferrer.setPersistent("main");
+this.installReferrer.setVolatile("main");
+
+
+
+```
diff --git a/versioned_docs/version-v5/native/tealium.md b/versioned_docs/version-v5/native/tealium.md
deleted file mode 100644
index afb02e4ff6a..00000000000
--- a/versioned_docs/version-v5/native/tealium.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-sidebar_label: 'Tealium'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Tealium
-
-This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
-
-For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
-
-
- github.com/Tealium/cordova-plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```
-import { Tealium, TealConfig } from '@awesome-cordova-plugins/tealium/ngx';
-
-
-constructor(private tealium: Tealium) { }
-
-...
-
-let tealConfig: TealConfig = {
- account: "<your-account>",
- profile: "<your-profile>",
- environment: "<your-environment>", // usually "dev", "qa" or "prod"
- isLifecycleEnabled: "true", // pass "false" to disable lifecycle tracking
- isCrashReporterEnabled: "false", // pass "true" to enable crash reporter (Android only)
- instance: "<your-instance-name" // an arbitrary instance name. use the same instance name for all subsequent API calls
-}
-
-this.tealium.init(tealConfig).then(()=>{
- this.tealium.trackView({"screen_name": "homescreen"});
-});
-
-```
diff --git a/versioned_docs/version-v5/native/tealium.mdx b/versioned_docs/version-v5/native/tealium.mdx
new file mode 100644
index 00000000000..321f89f18b6
--- /dev/null
+++ b/versioned_docs/version-v5/native/tealium.mdx
@@ -0,0 +1,98 @@
+---
+sidebar_label: 'Tealium'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Tealium
+
+This plugin provides a TypeScript wrapper around the [Tealium](https://www.tealium.com) Cordova plugin for Ionic Native.
+
+For full documentation, see [https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618](https://community.tealiumiq.com/t5/Mobile-Libraries/Tealium-for-Cordova/ta-p/17618)
+
+
+ github.com/Tealium/cordova-plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```
+import { Tealium, TealConfig } from '@awesome-cordova-plugins/tealium/ngx';
+
+
+constructor(private tealium: Tealium) { }
+
+...
+
+let tealConfig: TealConfig = {
+ account: "<your-account>",
+ profile: "<your-profile>",
+ environment: "<your-environment>", // usually "dev", "qa" or "prod"
+ isLifecycleEnabled: "true", // pass "false" to disable lifecycle tracking
+ isCrashReporterEnabled: "false", // pass "true" to enable crash reporter (Android only)
+ instance: "<your-instance-name" // an arbitrary instance name. use the same instance name for all subsequent API calls
+}
+
+this.tealium.init(tealConfig).then(()=>{
+ this.tealium.trackView({"screen_name": "homescreen"});
+});
+
+```
diff --git a/versioned_docs/version-v5/native/theme-detection.md b/versioned_docs/version-v5/native/theme-detection.md
deleted file mode 100644
index 4c80836bda0..00000000000
--- a/versioned_docs/version-v5/native/theme-detection.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-sidebar_label: 'Theme Detection'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Theme Detection
-
-Cordova plugin to detect whether dark mode is enabled or not
-
-
- github.com/mariusbackes/cordova-plugin-theme-detection
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-- Android
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { ThemeDetection } from '@awesome-cordova-plugins/theme-detection';
-
-
-constructor(private themeDetection: ThemeDetection) { }
-
-...
-
-this.themeDetection.isAvailable()
- .then((res: ThemeDetectionResponse) => {
- if(res.value) {
- this.themeDetection.isDarkModeEnabled().then((res: ThemeDetectionResponse) => {
- console.log(res);
- })
- .catch((error: any) => console.error(error));
- }
- })
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/theme-detection.mdx b/versioned_docs/version-v5/native/theme-detection.mdx
new file mode 100644
index 00000000000..365c3de4fa1
--- /dev/null
+++ b/versioned_docs/version-v5/native/theme-detection.mdx
@@ -0,0 +1,96 @@
+---
+sidebar_label: 'Theme Detection'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Theme Detection
+
+Cordova plugin to detect whether dark mode is enabled or not
+
+
+ github.com/mariusbackes/cordova-plugin-theme-detection
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+- Android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { ThemeDetection } from '@awesome-cordova-plugins/theme-detection';
+
+
+constructor(private themeDetection: ThemeDetection) { }
+
+...
+
+this.themeDetection.isAvailable()
+ .then((res: ThemeDetectionResponse) => {
+ if(res.value) {
+ this.themeDetection.isDarkModeEnabled().then((res: ThemeDetectionResponse) => {
+ console.log(res);
+ })
+ .catch((error: any) => console.error(error));
+ }
+ })
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/three-dee-touch.md b/versioned_docs/version-v5/native/three-dee-touch.md
deleted file mode 100644
index f34303700e6..00000000000
--- a/versioned_docs/version-v5/native/three-dee-touch.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-sidebar_label: '3D Touch'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# 3D Touch
-
-The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
-
-Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
-
-
- github.com/EddyVerbruggen/cordova-plugin-3dtouch
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-Please do refer to the original plugin's repo for detailed usage. The usage example here might not be sufficient.
-
-```tsx
-import { ThreeDeeTouch, ThreeDeeTouchQuickAction, ThreeDeeTouchForceTouch } from '@awesome-cordova-plugins/three-dee-touch/ngx';
-
-constructor(private threeDeeTouch: ThreeDeeTouch) { }
-
-...
-
-this.threeDeeTouch.isAvailable().then(isAvailable => console.log('3D Touch available? ' + isAvailable));
-
-this.threeDeeTouch.watchForceTouches()
- .subscribe(
- (data: ThreeDeeTouchForceTouch) => {
- console.log('Force touch %' + data.force);
- console.log('Force touch timestamp: ' + data.timestamp);
- console.log('Force touch x: ' + data.x);
- console.log('Force touch y: ' + data.y);
- }
- );
-
-
-let actions: ThreeDeeTouchQuickAction[] = [
- {
- type: 'checkin',
- title: 'Check in',
- subtitle: 'Quickly check in',
- iconType: 'Compose'
- },
- {
- type: 'share',
- title: 'Share',
- subtitle: 'Share like you care',
- iconType: 'Share'
- },
- {
- type: 'search',
- title: 'Search',
- iconType: 'Search'
- },
- {
- title: 'Show favorites',
- iconTemplate: 'HeartTemplate'
- }
-];
-
-this.threeDeeTouch.configureQuickActions(actions);
-
-this.threeDeeTouch.onHomeIconPressed().subscribe(
- (payload) => {
- // returns an object that is the button you presed
- console.log('Pressed the ${payload.title} button')
- console.log(payload.type)
-
- }
-)
-```
diff --git a/versioned_docs/version-v5/native/three-dee-touch.mdx b/versioned_docs/version-v5/native/three-dee-touch.mdx
new file mode 100644
index 00000000000..b547fefd8a4
--- /dev/null
+++ b/versioned_docs/version-v5/native/three-dee-touch.mdx
@@ -0,0 +1,134 @@
+---
+sidebar_label: '3D Touch'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# 3D Touch
+
+The 3D Touch plugin adds 3D Touch capabilities to your Cordova app.
+
+Requires Cordova plugin: `cordova-plugin-3dtouch`. For more info, please see the [3D Touch plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-3dtouch).
+
+
+ github.com/EddyVerbruggen/cordova-plugin-3dtouch
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+Please do refer to the original plugin's repo for detailed usage. The usage example here might not be sufficient.
+
+```tsx
+import { ThreeDeeTouch, ThreeDeeTouchQuickAction, ThreeDeeTouchForceTouch } from '@awesome-cordova-plugins/three-dee-touch/ngx';
+
+constructor(private threeDeeTouch: ThreeDeeTouch) { }
+
+...
+
+this.threeDeeTouch.isAvailable().then(isAvailable => console.log('3D Touch available? ' + isAvailable));
+
+this.threeDeeTouch.watchForceTouches()
+ .subscribe(
+ (data: ThreeDeeTouchForceTouch) => {
+ console.log('Force touch %' + data.force);
+ console.log('Force touch timestamp: ' + data.timestamp);
+ console.log('Force touch x: ' + data.x);
+ console.log('Force touch y: ' + data.y);
+ }
+ );
+
+
+let actions: ThreeDeeTouchQuickAction[] = [
+ {
+ type: 'checkin',
+ title: 'Check in',
+ subtitle: 'Quickly check in',
+ iconType: 'Compose'
+ },
+ {
+ type: 'share',
+ title: 'Share',
+ subtitle: 'Share like you care',
+ iconType: 'Share'
+ },
+ {
+ type: 'search',
+ title: 'Search',
+ iconType: 'Search'
+ },
+ {
+ title: 'Show favorites',
+ iconTemplate: 'HeartTemplate'
+ }
+];
+
+this.threeDeeTouch.configureQuickActions(actions);
+
+this.threeDeeTouch.onHomeIconPressed().subscribe(
+ (payload) => {
+ // returns an object that is the button you presed
+ console.log('Pressed the ${payload.title} button')
+ console.log(payload.type)
+
+ }
+)
+```
diff --git a/versioned_docs/version-v5/native/toast.md b/versioned_docs/version-v5/native/toast.md
deleted file mode 100644
index 881f22db2cf..00000000000
--- a/versioned_docs/version-v5/native/toast.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-sidebar_label: 'Toast'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Toast
-
-This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
-
-Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
-
-
- github.com/EddyVerbruggen/Toast-PhoneGap-Plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- BlackBerry 10
-- iOS
-- Windows
-- Windows Phone 8
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Toast } from '@awesome-cordova-plugins/toast/ngx';
-
-constructor(private toast: Toast) { }
-
-...
-
-this.toast.show(`I'm a toast`, '5000', 'center').subscribe(
- toast => {
- console.log(toast);
- }
-);
-```
diff --git a/versioned_docs/version-v5/native/toast.mdx b/versioned_docs/version-v5/native/toast.mdx
new file mode 100644
index 00000000000..c98bd4c92ad
--- /dev/null
+++ b/versioned_docs/version-v5/native/toast.mdx
@@ -0,0 +1,92 @@
+---
+sidebar_label: 'Toast'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Toast
+
+This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.
+
+Requires Cordova plugin: `cordova-plugin-x-toast`. For more info, please see the [Toast plugin docs](https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin).
+
+
+ github.com/EddyVerbruggen/Toast-PhoneGap-Plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- BlackBerry 10
+- iOS
+- Windows
+- Windows Phone 8
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Toast } from '@awesome-cordova-plugins/toast/ngx';
+
+constructor(private toast: Toast) { }
+
+...
+
+this.toast.show(`I'm a toast`, '5000', 'center').subscribe(
+ toast => {
+ console.log(toast);
+ }
+);
+```
diff --git a/versioned_docs/version-v5/native/touch-id.md b/versioned_docs/version-v5/native/touch-id.md
deleted file mode 100644
index ebce241e46a..00000000000
--- a/versioned_docs/version-v5/native/touch-id.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-sidebar_label: 'Touch ID'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Touch ID
-
-Scan the fingerprint of a user with the TouchID sensor.
-
-Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
-
-
- github.com/EddyVerbruggen/cordova-plugin-touch-id
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { TouchID } from '@awesome-cordova-plugins/touch-id/ngx';
-
-constructor(private touchId: TouchID) { }
-
-...
-
-this.touchId.isAvailable()
- .then(
- res => console.log('TouchID is available!'),
- err => console.error('TouchID is not available', err)
- );
-
-this.touchId.verifyFingerprint('Scan your fingerprint please')
- .then(
- res => console.log('Ok', res),
- err => console.error('Error', err)
- );
-```
-
-### Error Codes
-
-The plugin will reject for various reasons. Your app will most likely need to respond to the cases differently.
-
-Here is a list of some of the error codes:
-
-- `-1` - Fingerprint scan failed more than 3 times
-- `-2` or `-128` - User tapped the 'Cancel' button
-- `-3` - User tapped the 'Enter Passcode' or 'Enter Password' button
-- `-4` - The scan was cancelled by the system (Home button for example)
-- `-6` - TouchID is not Available
-- `-8` - TouchID is locked out from too many tries
diff --git a/versioned_docs/version-v5/native/touch-id.mdx b/versioned_docs/version-v5/native/touch-id.mdx
new file mode 100644
index 00000000000..ba97f8389b2
--- /dev/null
+++ b/versioned_docs/version-v5/native/touch-id.mdx
@@ -0,0 +1,107 @@
+---
+sidebar_label: 'Touch ID'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Touch ID
+
+Scan the fingerprint of a user with the TouchID sensor.
+
+Requires Cordova plugin: `cordova-plugin-touch-id`. For more info, please see the [TouchID plugin docs](https://github.com/EddyVerbruggen/cordova-plugin-touch-id).
+
+
+ github.com/EddyVerbruggen/cordova-plugin-touch-id
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { TouchID } from '@awesome-cordova-plugins/touch-id/ngx';
+
+constructor(private touchId: TouchID) { }
+
+...
+
+this.touchId.isAvailable()
+ .then(
+ res => console.log('TouchID is available!'),
+ err => console.error('TouchID is not available', err)
+ );
+
+this.touchId.verifyFingerprint('Scan your fingerprint please')
+ .then(
+ res => console.log('Ok', res),
+ err => console.error('Error', err)
+ );
+```
+
+### Error Codes
+
+The plugin will reject for various reasons. Your app will most likely need to respond to the cases differently.
+
+Here is a list of some of the error codes:
+
+- `-1` - Fingerprint scan failed more than 3 times
+- `-2` or `-128` - User tapped the 'Cancel' button
+- `-3` - User tapped the 'Enter Passcode' or 'Enter Password' button
+- `-4` - The scan was cancelled by the system (Home button for example)
+- `-6` - TouchID is not Available
+- `-8` - TouchID is locked out from too many tries
diff --git a/versioned_docs/version-v5/native/unvired-cordova-sdk.md b/versioned_docs/version-v5/native/unvired-cordova-sdk.md
deleted file mode 100644
index 56a5b875386..00000000000
--- a/versioned_docs/version-v5/native/unvired-cordova-sdk.md
+++ /dev/null
@@ -1,205 +0,0 @@
----
-sidebar_label: 'Unvired Cordova SDK'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Unvired Cordova SDK
-
-## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
-
-## iOS Requirements
-
-This plugin uses Cocoapods to install dependent libraries. Please make sure you have a valid Cocoapods installation.
-Once you have it ready, do update the cocoapods repo by running the following command before you install this plugin.
-
-```
-pod repo update
-```
-
-
- github.com/unvired/cordova-plugin-unvired-sdk/
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- iOS
-- Android
-- Windows
-- Browser
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { UnviredCordovaSDK } from '@awesome-cordova-plugins/unvired-cordova-sdk/ngx';
-
-
-constructor(private unviredSDK: UnviredCordovaSDK) { }
-
-...
-// This is usually done in app.component.ts of your app.
-// Before you can interact with UMP, you need to initialize the SDK and authenticate with UMP.
-// SDK Initialization
-let loginParameters = new LoginParameters()
-loginParameters.appName = 'UNVIRED_DIGITAL_FORMS'
-loginParameters.metadataPath = '../assets/metadata.json'
-let loginResult: LoginResult
-try {
- loginResult = await this.unviredSDK.login(loginParameters)
-}
-catch (error) {
- this.unviredSDK.logError("AppComponent", "Initialize", "Error during login: " + error)
-}
-
-
-switch (loginResult.type) {
-case LoginListenerType.auth_activation_required:
-// App is not activated. i.e, User is using the app for the very first time.
-// App needs to be activated before it can interact with UMP.
-// At this point of time, you basically navigate to a login screen & accept username / password from the user.
-// Set the username & password to loginParameters object and call authenticateAndActivate
-try {
- // Execute this block of code in a login screen.
-let loginParameters = new LoginParameters();
-loginParameters.url = '<UMP_URL>';
-loginParameters.company = '<Company>';
-loginParameters.username = '<Username>';
-loginParameters.password = '<Password>';
-loginParameters.loginType = LoginType.unvired;
-let authenticateActivateResult: AuthenticateActivateResult = await this.unviredSDK.authenticateAndActivate(loginParameters);
-if (authenticateActivateResult.type === AuthenticateAndActivateResultType.auth_activation_success) {
-// App is fully setup. Navigate to your app's home screen.
-} else if (authenticateActivateResult.type === AuthenticateAndActivateResultType.auth_activation_error) {
-console.log("Error during login: " + authenticateActivateResult.error)
-} catch (error) {
-this.unviredSDK.logError('LoginPage', 'auth_activation_required', 'ERROR: ' + error);
-}
-break;
-
-
-
-case LoginListenerType.app_requires_login:
-// App is already activated. But, the user needs to enter credentials because the setting LOCAL_PASSWORD is set to YES in Unvired Admin Cockpit.
-// To set LOCAL_PASSWORD property for your app, contact your administrator.
-try {
- // Execute this block of code in a login screen.
- let loginParameters = new LoginParameters()
- loginParameters.username = '<Username>';
- loginParameters.password = '<Password>';
- let authenticateLocalResult: AuthenticateLocalResult = await this.unviredSDK.authenticateLocal(loginParameters);
- if (authenticateLocalResult.type === AuthenticateLocalResultType.login_success) {
- // App is fully setup. Navigate to your app's home screen.
- } else if (authenticateLocalResult.type === AuthenticateLocalResultType.login_error) {
- console.log("Error during local login: " + authenticateActivateResult.error)
- } catch (error) {
- this.unviredSDK.logError('LoginPage', 'app_requires_login', 'ERROR: ' + error);
-}
-break;
-
-
-
-case login_success:
-// The setting LOCAL_PASSWORD is set to false.
-// App is fully initialized. Users can interact with the UMP
-// Navigate to Home screen
-break;
-}
-
-
-
-
-
-// Synchronization APIs
-// Make sync call.
-let result = await this.unviredSDK.syncForeground(RequestType.QUERY, null, {"CUSTOMER_HEADER": {"field1" : "value1", "field2" : "value2"}}, 'UNVIRED_DIGITAL_FORMS_PA_MOBILE_GET_USERS', true)
-
-// Make async call.
-let result = await this.unviredSDK.syncBackground(RequestType.QUERY, null, inputObj, 'UNVIRED_DIGITAL_FORMS_PA_MOBILE_GET_USERS', 'INPUT_GET_USERS', 'GUID', false)
-// Note: Subscribe to NotificationListener to get updates on data processing in background
-// However, only one screen can listen to background data updates at any point of time.
-this.unviredSDK.registerNotifListener().subscribe( data => {
-switch (data.type) {
-case NotificationListenerType.dataSend:
-break;
-case NotificationListenerType.dataChanged:
-break;
-case NotificationListenerType.dataReceived:
-break;
-.
-.
-.
-}})
-
-
-
-
-
-// Database APIs
-// Insert a record onto database
-this.unviredsdk.dbInsert("CUSTOMER_HEADER", {"NAME":"USER","NO":"0039"}, true);
-
-// Update a record in database
-this.unviredSDK.dbUpdate('CUSTOMER_HEADER', {"NAME":"UPDATED_USER","NO":"UPDATED_NO"}, "FORM_ID = '5caed815892215034dacad56'")
-
-// Delete a record in database
-this.unviredSDK.dbDelete('CUSTOMER_HEADER', "FORM_ID = '5caed815892215034dacad56'")
-
-// Execute a SQL Query
-this.unviredSDK.dbExecuteStatement('SELECT * FROM CUSTOMER_HEADER WHERE CUSTOMER_ID = "0039"')
-
-```
diff --git a/versioned_docs/version-v5/native/unvired-cordova-sdk.mdx b/versioned_docs/version-v5/native/unvired-cordova-sdk.mdx
new file mode 100644
index 00000000000..2f4ff636ad5
--- /dev/null
+++ b/versioned_docs/version-v5/native/unvired-cordova-sdk.mdx
@@ -0,0 +1,205 @@
+---
+sidebar_label: 'Unvired Cordova SDK'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Unvired Cordova SDK
+
+## This plugin lets you build apps which connect to Unvired Mobile Platform (UMP).
+
+## iOS Requirements
+
+This plugin uses Cocoapods to install dependent libraries. Please make sure you have a valid Cocoapods installation.
+Once you have it ready, do update the cocoapods repo by running the following command before you install this plugin.
+
+```
+pod repo update
+```
+
+
+ github.com/unvired/cordova-plugin-unvired-sdk/
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- iOS
+- Android
+- Windows
+- Browser
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { UnviredCordovaSDK } from '@awesome-cordova-plugins/unvired-cordova-sdk/ngx';
+
+
+constructor(private unviredSDK: UnviredCordovaSDK) { }
+
+...
+// This is usually done in app.component.ts of your app.
+// Before you can interact with UMP, you need to initialize the SDK and authenticate with UMP.
+// SDK Initialization
+let loginParameters = new LoginParameters()
+loginParameters.appName = 'UNVIRED_DIGITAL_FORMS'
+loginParameters.metadataPath = '../assets/metadata.json'
+let loginResult: LoginResult
+try {
+ loginResult = await this.unviredSDK.login(loginParameters)
+}
+catch (error) {
+ this.unviredSDK.logError("AppComponent", "Initialize", "Error during login: " + error)
+}
+
+
+switch (loginResult.type) {
+case LoginListenerType.auth_activation_required:
+// App is not activated. i.e, User is using the app for the very first time.
+// App needs to be activated before it can interact with UMP.
+// At this point of time, you basically navigate to a login screen & accept username / password from the user.
+// Set the username & password to loginParameters object and call authenticateAndActivate
+try {
+ // Execute this block of code in a login screen.
+let loginParameters = new LoginParameters();
+loginParameters.url = '<UMP_URL>';
+loginParameters.company = '<Company>';
+loginParameters.username = '<Username>';
+loginParameters.password = '<Password>';
+loginParameters.loginType = LoginType.unvired;
+let authenticateActivateResult: AuthenticateActivateResult = await this.unviredSDK.authenticateAndActivate(loginParameters);
+if (authenticateActivateResult.type === AuthenticateAndActivateResultType.auth_activation_success) {
+// App is fully setup. Navigate to your app's home screen.
+} else if (authenticateActivateResult.type === AuthenticateAndActivateResultType.auth_activation_error) {
+console.log("Error during login: " + authenticateActivateResult.error)
+} catch (error) {
+this.unviredSDK.logError('LoginPage', 'auth_activation_required', 'ERROR: ' + error);
+}
+break;
+
+
+
+case LoginListenerType.app_requires_login:
+// App is already activated. But, the user needs to enter credentials because the setting LOCAL_PASSWORD is set to YES in Unvired Admin Cockpit.
+// To set LOCAL_PASSWORD property for your app, contact your administrator.
+try {
+ // Execute this block of code in a login screen.
+ let loginParameters = new LoginParameters()
+ loginParameters.username = '<Username>';
+ loginParameters.password = '<Password>';
+ let authenticateLocalResult: AuthenticateLocalResult = await this.unviredSDK.authenticateLocal(loginParameters);
+ if (authenticateLocalResult.type === AuthenticateLocalResultType.login_success) {
+ // App is fully setup. Navigate to your app's home screen.
+ } else if (authenticateLocalResult.type === AuthenticateLocalResultType.login_error) {
+ console.log("Error during local login: " + authenticateActivateResult.error)
+ } catch (error) {
+ this.unviredSDK.logError('LoginPage', 'app_requires_login', 'ERROR: ' + error);
+}
+break;
+
+
+
+case login_success:
+// The setting LOCAL_PASSWORD is set to false.
+// App is fully initialized. Users can interact with the UMP
+// Navigate to Home screen
+break;
+}
+
+
+
+
+
+// Synchronization APIs
+// Make sync call.
+let result = await this.unviredSDK.syncForeground(RequestType.QUERY, null, {"CUSTOMER_HEADER": {"field1" : "value1", "field2" : "value2"}}, 'UNVIRED_DIGITAL_FORMS_PA_MOBILE_GET_USERS', true)
+
+// Make async call.
+let result = await this.unviredSDK.syncBackground(RequestType.QUERY, null, inputObj, 'UNVIRED_DIGITAL_FORMS_PA_MOBILE_GET_USERS', 'INPUT_GET_USERS', 'GUID', false)
+// Note: Subscribe to NotificationListener to get updates on data processing in background
+// However, only one screen can listen to background data updates at any point of time.
+this.unviredSDK.registerNotifListener().subscribe( data => {
+switch (data.type) {
+case NotificationListenerType.dataSend:
+break;
+case NotificationListenerType.dataChanged:
+break;
+case NotificationListenerType.dataReceived:
+break;
+.
+.
+.
+}})
+
+
+
+
+
+// Database APIs
+// Insert a record onto database
+this.unviredsdk.dbInsert("CUSTOMER_HEADER", {"NAME":"USER","NO":"0039"}, true);
+
+// Update a record in database
+this.unviredSDK.dbUpdate('CUSTOMER_HEADER', {"NAME":"UPDATED_USER","NO":"UPDATED_NO"}, "FORM_ID = '5caed815892215034dacad56'")
+
+// Delete a record in database
+this.unviredSDK.dbDelete('CUSTOMER_HEADER', "FORM_ID = '5caed815892215034dacad56'")
+
+// Execute a SQL Query
+this.unviredSDK.dbExecuteStatement('SELECT * FROM CUSTOMER_HEADER WHERE CUSTOMER_ID = "0039"')
+
+```
diff --git a/versioned_docs/version-v5/native/uptime.md b/versioned_docs/version-v5/native/uptime.md
deleted file mode 100644
index ff6c196af25..00000000000
--- a/versioned_docs/version-v5/native/uptime.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-sidebar_label: 'Uptime'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Uptime
-
-This plugin provides the time spent in milliseconds since boot (uptime).
-
-
- github.com/s1lviu/cordova-plugin-uptime
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Uptime } from '@awesome-cordova-plugins/uptime/ngx';
-
-constructor(private uptime: Uptime) { }
-
-...
-
-this.uptime.getUptime(includeDeepSleep)
- .then(uptime => console.log(uptime))
- .catch(error => console.log(error));
-
-```
diff --git a/versioned_docs/version-v5/native/uptime.mdx b/versioned_docs/version-v5/native/uptime.mdx
new file mode 100644
index 00000000000..e144a6bfef4
--- /dev/null
+++ b/versioned_docs/version-v5/native/uptime.mdx
@@ -0,0 +1,86 @@
+---
+sidebar_label: 'Uptime'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Uptime
+
+This plugin provides the time spent in milliseconds since boot (uptime).
+
+
+ github.com/s1lviu/cordova-plugin-uptime
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Uptime } from '@awesome-cordova-plugins/uptime/ngx';
+
+constructor(private uptime: Uptime) { }
+
+...
+
+this.uptime.getUptime(includeDeepSleep)
+ .then(uptime => console.log(uptime))
+ .catch(error => console.log(error));
+
+```
diff --git a/versioned_docs/version-v5/native/urbanairship.md b/versioned_docs/version-v5/native/urbanairship.md
deleted file mode 100644
index eecb56d4232..00000000000
--- a/versioned_docs/version-v5/native/urbanairship.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-sidebar_label: 'UrbanAirShip'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# UrbanAirShip
-
-This plugin does something
-
-
- npmjs.com/package/urbanairship-cordova
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { UrbanAirShip } from '@awesome-cordova-plugins/urbanairship/ngx';
-
-
-constructor(private urbanAirShip: UrbanAirShip) { }
-
-...
-
-
-this.urbanAirShip.takeOff(config)
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/urbanairship.mdx b/versioned_docs/version-v5/native/urbanairship.mdx
new file mode 100644
index 00000000000..719af7f3fe5
--- /dev/null
+++ b/versioned_docs/version-v5/native/urbanairship.mdx
@@ -0,0 +1,89 @@
+---
+sidebar_label: 'UrbanAirShip'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# UrbanAirShip
+
+This plugin does something
+
+
+ npmjs.com/package/urbanairship-cordova
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { UrbanAirShip } from '@awesome-cordova-plugins/urbanairship/ngx';
+
+
+constructor(private urbanAirShip: UrbanAirShip) { }
+
+...
+
+
+this.urbanAirShip.takeOff(config)
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/usabilla-cordova-sdk.md b/versioned_docs/version-v5/native/usabilla-cordova-sdk.md
deleted file mode 100644
index 4a56bb350f8..00000000000
--- a/versioned_docs/version-v5/native/usabilla-cordova-sdk.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-sidebar_label: 'Usabilla'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Usabilla
-
-Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
-This document describes library integration steps for your Cordova project.
-
-For more info see [Cordova plugin docs](https://github.com/usabilla/usabilla-u4a-cordova)
-
-
- github.com/usabilla/usabilla-u4a-cordova
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Usabilla } from '@awesome-cordova-plugins/usabilla-cordova-sdk/ngx';
-
-
-constructor(private usabilla: Usabilla) { }
-
-...
-
-
- this.usabilla.initialize(
- appID: '<your_application_id>',
- custom_vars: {
- "key": "value"
- });
-
- this.usabilla.loadFeedbackForm(
- formID : '<your_form_id>'
- );
-
-```
diff --git a/versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx b/versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx
new file mode 100644
index 00000000000..bd5e6d5d9a9
--- /dev/null
+++ b/versioned_docs/version-v5/native/usabilla-cordova-sdk.mdx
@@ -0,0 +1,99 @@
+---
+sidebar_label: 'Usabilla'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Usabilla
+
+Usabilla SDK is designed and developed to collect feedback from your users with great ease and flexibility through your mobile application.
+This document describes library integration steps for your Cordova project.
+
+For more info see [Cordova plugin docs](https://github.com/usabilla/usabilla-u4a-cordova)
+
+
+ github.com/usabilla/usabilla-u4a-cordova
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Usabilla } from '@awesome-cordova-plugins/usabilla-cordova-sdk/ngx';
+
+
+constructor(private usabilla: Usabilla) { }
+
+...
+
+
+ this.usabilla.initialize(
+ appID: '<your_application_id>',
+ custom_vars: {
+ "key": "value"
+ });
+
+ this.usabilla.loadFeedbackForm(
+ formID : '<your_form_id>'
+ );
+
+```
diff --git a/versioned_docs/version-v5/native/vibes.md b/versioned_docs/version-v5/native/vibes.md
deleted file mode 100644
index 90ad45231a7..00000000000
--- a/versioned_docs/version-v5/native/vibes.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-sidebar_label: 'Vibes'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Vibes
-
-This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
-
-
- github.com/vibes/vibes-cordova.git
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Vibes } from '@awesome-cordova-plugins/vibes/ngx';
-
-
-constructor(private vibes: Vibes) { }
-
-...
-
-
-this.vibes.registerDevice()
- .then((res: any) => console.log(`device registration success: ${res}`)) // retrieve and save the device_id from `res` JSON object
- .catch((error: any) => console.error('Error registering device', error));
-
-this.vibes.registerPush()
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error('Error registering push', error));
-
-this.vibes.getVibesDeviceInfo()
- .then((res: any) => console.log(res)) // retrieve the `device_id` and `push_token` from the JSON object
- .catch((error: any) => console.error('Error retrieving deviceinfo', error));
-
-this.vibes.fetchInboxMessages()
- .then((res: any) => console.log(res)) // fetches inbox messages for this person.
- .catch((error: any) => console.error('Error fetching inbox messages for this person', error));
-```
diff --git a/versioned_docs/version-v5/native/vibes.mdx b/versioned_docs/version-v5/native/vibes.mdx
new file mode 100644
index 00000000000..4add667eb77
--- /dev/null
+++ b/versioned_docs/version-v5/native/vibes.mdx
@@ -0,0 +1,99 @@
+---
+sidebar_label: 'Vibes'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Vibes
+
+This plugin enables integration with the Vibes Push SDK to your Cordova project with Android and iOS supported.
+
+
+ github.com/vibes/vibes-cordova.git
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Vibes } from '@awesome-cordova-plugins/vibes/ngx';
+
+
+constructor(private vibes: Vibes) { }
+
+...
+
+
+this.vibes.registerDevice()
+ .then((res: any) => console.log(`device registration success: ${res}`)) // retrieve and save the device_id from `res` JSON object
+ .catch((error: any) => console.error('Error registering device', error));
+
+this.vibes.registerPush()
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error('Error registering push', error));
+
+this.vibes.getVibesDeviceInfo()
+ .then((res: any) => console.log(res)) // retrieve the `device_id` and `push_token` from the JSON object
+ .catch((error: any) => console.error('Error retrieving deviceinfo', error));
+
+this.vibes.fetchInboxMessages()
+ .then((res: any) => console.log(res)) // fetches inbox messages for this person.
+ .catch((error: any) => console.error('Error fetching inbox messages for this person', error));
+```
diff --git a/versioned_docs/version-v5/native/vibration.md b/versioned_docs/version-v5/native/vibration.md
deleted file mode 100644
index f863c053693..00000000000
--- a/versioned_docs/version-v5/native/vibration.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-sidebar_label: 'Vibration'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Vibration
-
-Vibrates the device
-
-
- github.com/apache/cordova-plugin-vibration
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Vibration } from '@awesome-cordova-plugins/vibration/ngx';
-
-constructor(private vibration: Vibration) { }
-
-...
-
-// Vibrate the device for a second
-// Duration is ignored on iOS.
-this.vibration.vibrate(1000);
-
-// Vibrate 2 seconds
-// Pause for 1 second
-// Vibrate for 2 seconds
-// Patterns work on Android and Windows only
-this.vibration.vibrate([2000,1000,2000]);
-
-// Stop any current vibrations immediately
-// Works on Android and Windows only
-this.vibration.vibrate(0);
-```
diff --git a/versioned_docs/version-v5/native/vibration.mdx b/versioned_docs/version-v5/native/vibration.mdx
new file mode 100644
index 00000000000..b224be0c558
--- /dev/null
+++ b/versioned_docs/version-v5/native/vibration.mdx
@@ -0,0 +1,97 @@
+---
+sidebar_label: 'Vibration'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Vibration
+
+Vibrates the device
+
+
+ github.com/apache/cordova-plugin-vibration
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Vibration } from '@awesome-cordova-plugins/vibration/ngx';
+
+constructor(private vibration: Vibration) { }
+
+...
+
+// Vibrate the device for a second
+// Duration is ignored on iOS.
+this.vibration.vibrate(1000);
+
+// Vibrate 2 seconds
+// Pause for 1 second
+// Vibrate for 2 seconds
+// Patterns work on Android and Windows only
+this.vibration.vibrate([2000,1000,2000]);
+
+// Stop any current vibrations immediately
+// Works on Android and Windows only
+this.vibration.vibrate(0);
+```
diff --git a/versioned_docs/version-v5/native/video-editor.md b/versioned_docs/version-v5/native/video-editor.md
deleted file mode 100644
index ddfe47114e5..00000000000
--- a/versioned_docs/version-v5/native/video-editor.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-sidebar_label: 'Video Editor'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Video Editor
-
-Edit videos using native device APIs
-
-
- github.com/jbavari/cordova-plugin-video-editor
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-- Windows
-- Windows Phone 8
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { VideoEditor } from '@awesome-cordova-plugins/video-editor/ngx';
-
-constructor(private videoEditor: VideoEditor) { }
-
-...
-
-this.videoEditor.transcodeVideo({
- fileUri: '/path/to/input.mov',
- outputFileName: 'output.mp4',
- outputFileType: VideoEditor.OutputFileType.MPEG4
-})
-.then((fileUri: string) => console.log('video transcode success', fileUri))
-.catch((error: any) => console.log('video transcode error', error));
-
-```
diff --git a/versioned_docs/version-v5/native/video-editor.mdx b/versioned_docs/version-v5/native/video-editor.mdx
new file mode 100644
index 00000000000..6a633d35793
--- /dev/null
+++ b/versioned_docs/version-v5/native/video-editor.mdx
@@ -0,0 +1,94 @@
+---
+sidebar_label: 'Video Editor'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Video Editor
+
+Edit videos using native device APIs
+
+
+ github.com/jbavari/cordova-plugin-video-editor
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+- Windows
+- Windows Phone 8
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { VideoEditor } from '@awesome-cordova-plugins/video-editor/ngx';
+
+constructor(private videoEditor: VideoEditor) { }
+
+...
+
+this.videoEditor.transcodeVideo({
+ fileUri: '/path/to/input.mov',
+ outputFileName: 'output.mp4',
+ outputFileType: VideoEditor.OutputFileType.MPEG4
+})
+.then((fileUri: string) => console.log('video transcode success', fileUri))
+.catch((error: any) => console.log('video transcode error', error));
+
+```
diff --git a/versioned_docs/version-v5/native/video-player.md b/versioned_docs/version-v5/native/video-player.md
deleted file mode 100644
index a3be580e38b..00000000000
--- a/versioned_docs/version-v5/native/video-player.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-sidebar_label: 'Video Player'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Video Player
-
-A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
-
-Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
-
-
- github.com/moust/cordova-plugin-videoplayer
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { VideoPlayer } from '@awesome-cordova-plugins/video-player/ngx';
-
-constructor(private videoPlayer: VideoPlayer) { }
-
-...
-
-// Playing a video.
-this.videoPlayer.play('file:///android_asset/www/movie.mp4').then(() => {
- console.log('video completed');
-}).catch(err => {
- console.log(err);
-});
-
-```
diff --git a/versioned_docs/version-v5/native/video-player.mdx b/versioned_docs/version-v5/native/video-player.mdx
new file mode 100644
index 00000000000..88094ad1ae3
--- /dev/null
+++ b/versioned_docs/version-v5/native/video-player.mdx
@@ -0,0 +1,92 @@
+---
+sidebar_label: 'Video Player'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Video Player
+
+A Cordova plugin that simply allows you to immediately play a video in fullscreen mode.
+
+Requires Cordova plugin: `com.moust.cordova.videoplayer`. For more info, please see the [VideoPlayer plugin docs](https://github.com/moust/cordova-plugin-videoplayer).
+
+
+ github.com/moust/cordova-plugin-videoplayer
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { VideoPlayer } from '@awesome-cordova-plugins/video-player/ngx';
+
+constructor(private videoPlayer: VideoPlayer) { }
+
+...
+
+// Playing a video.
+this.videoPlayer.play('file:///android_asset/www/movie.mp4').then(() => {
+ console.log('video completed');
+}).catch(err => {
+ console.log(err);
+});
+
+```
diff --git a/versioned_docs/version-v5/native/web-intent.md b/versioned_docs/version-v5/native/web-intent.md
deleted file mode 100644
index 4eb61d3d90f..00000000000
--- a/versioned_docs/version-v5/native/web-intent.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-sidebar_label: 'Web Intent'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Web Intent
-
-This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
-
-
- github.com/darryncampbell/darryncampbell-cordova-plugin-intent
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-For usage information please refer to the plugin's Github repo.
-
-```tsx
-import { WebIntent } from '@awesome-cordova-plugins/web-intent/ngx';
-
-constructor(private webIntent: WebIntent) { }
-
-...
-
-const options = {
- action: this.webIntent.ACTION_VIEW,
- url: 'path/to/file',
- type: 'application/vnd.android.package-archive'
-}
-
-this.webIntent.startActivity(options).then(onSuccess, onError);
-
-```
diff --git a/versioned_docs/version-v5/native/web-intent.mdx b/versioned_docs/version-v5/native/web-intent.mdx
new file mode 100644
index 00000000000..1c289e7a5fc
--- /dev/null
+++ b/versioned_docs/version-v5/native/web-intent.mdx
@@ -0,0 +1,93 @@
+---
+sidebar_label: 'Web Intent'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Web Intent
+
+This Plugin provides a general purpose shim layer for the Android intent mechanism, exposing various ways to handle sending and receiving intents.
+
+
+ github.com/darryncampbell/darryncampbell-cordova-plugin-intent
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+For usage information please refer to the plugin's Github repo.
+
+```tsx
+import { WebIntent } from '@awesome-cordova-plugins/web-intent/ngx';
+
+constructor(private webIntent: WebIntent) { }
+
+...
+
+const options = {
+ action: this.webIntent.ACTION_VIEW,
+ url: 'path/to/file',
+ type: 'application/vnd.android.package-archive'
+}
+
+this.webIntent.startActivity(options).then(onSuccess, onError);
+
+```
diff --git a/versioned_docs/version-v5/native/web-server.md b/versioned_docs/version-v5/native/web-server.md
deleted file mode 100644
index 4d1f1b9533b..00000000000
--- a/versioned_docs/version-v5/native/web-server.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-sidebar_label: 'Web Server'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Web Server
-
-This plugin allows you to start a local dynamic content web server for android and iOS devices.
-
-
- github.com/bykof/cordova-plugin-webserver.git
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { WebServer } from '@awesome-cordova-plugins/web-server/ngx';
-
-
-constructor(private webServer: WebServer) { }
-
-...
-
-this.webServer.onRequest().subscribe(data => {
- console.log(data);
- const res: Response = {
- status: 200,
- body: '',
- headers: {
- 'Content-Type': 'text/html'
- }
- };
-
- this.webServer.sendResponse(data.requestId, res)
- .catch((error: any) => console.error(error));
-});
-
-this.webServer.start(80)
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/web-server.mdx b/versioned_docs/version-v5/native/web-server.mdx
new file mode 100644
index 00000000000..f50bcfe1f12
--- /dev/null
+++ b/versioned_docs/version-v5/native/web-server.mdx
@@ -0,0 +1,101 @@
+---
+sidebar_label: 'Web Server'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Web Server
+
+This plugin allows you to start a local dynamic content web server for android and iOS devices.
+
+
+ github.com/bykof/cordova-plugin-webserver.git
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { WebServer } from '@awesome-cordova-plugins/web-server/ngx';
+
+
+constructor(private webServer: WebServer) { }
+
+...
+
+this.webServer.onRequest().subscribe(data => {
+ console.log(data);
+ const res: Response = {
+ status: 200,
+ body: '',
+ headers: {
+ 'Content-Type': 'text/html'
+ }
+ };
+
+ this.webServer.sendResponse(data.requestId, res)
+ .catch((error: any) => console.error(error));
+});
+
+this.webServer.start(80)
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/web-socket-server.md b/versioned_docs/version-v5/native/web-socket-server.md
deleted file mode 100644
index 4f818669a5f..00000000000
--- a/versioned_docs/version-v5/native/web-socket-server.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-sidebar_label: 'WebSocket Server'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# WebSocket Server
-
-This plugin allows you to run a single, lightweight, barebone WebSocket Server.
-
-
- github.com/becvert/cordova-plugin-websocket-server
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { WebSocketServer } from '@awesome-cordova-plugins/web-socket-server';
-
-constructor(private wsserver: WebSocketServer) { }
-
-...
-
-// start websocket server
-this.wsserver.start(8888, {}).subscribe({
- next: server => console.log(`Listening on ${server.addr}:${server.port}`),
- error: error => console.log(`Unexpected error`, error);
-});
-
-// watch for any messages
-this.wsserver.watchMessage().subscribe(result => {
- console.log(`Received message ${result.msg} from ${result.conn.uuid}`);
-});
-
-// send message to connection with specified uuid
-this.wsserver.send({ uuid: '8e7c4f48-de68-4b6f-8fca-1067a353968d' }, 'Hello World');
-
-// stop websocket server
-this.wsserver.stop().then(server => {
- console.log(`Stop listening on ${server.addr}:${server.port}`);
-});
-
-```
diff --git a/versioned_docs/version-v5/native/web-socket-server.mdx b/versioned_docs/version-v5/native/web-socket-server.mdx
new file mode 100644
index 00000000000..36b89366142
--- /dev/null
+++ b/versioned_docs/version-v5/native/web-socket-server.mdx
@@ -0,0 +1,103 @@
+---
+sidebar_label: 'WebSocket Server'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# WebSocket Server
+
+This plugin allows you to run a single, lightweight, barebone WebSocket Server.
+
+
+ github.com/becvert/cordova-plugin-websocket-server
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { WebSocketServer } from '@awesome-cordova-plugins/web-socket-server';
+
+constructor(private wsserver: WebSocketServer) { }
+
+...
+
+// start websocket server
+this.wsserver.start(8888, {}).subscribe({
+ next: server => console.log(`Listening on ${server.addr}:${server.port}`),
+ error: error => console.log(`Unexpected error`, error);
+});
+
+// watch for any messages
+this.wsserver.watchMessage().subscribe(result => {
+ console.log(`Received message ${result.msg} from ${result.conn.uuid}`);
+});
+
+// send message to connection with specified uuid
+this.wsserver.send({ uuid: '8e7c4f48-de68-4b6f-8fca-1067a353968d' }, 'Hello World');
+
+// stop websocket server
+this.wsserver.stop().then(server => {
+ console.log(`Stop listening on ${server.addr}:${server.port}`);
+});
+
+```
diff --git a/versioned_docs/version-v5/native/webengage.md b/versioned_docs/version-v5/native/webengage.md
deleted file mode 100644
index 3b0fe5af85f..00000000000
--- a/versioned_docs/version-v5/native/webengage.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-sidebar_label: 'Webengage'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Webengage
-
-Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
-
-
- github.com/WebEngage/cordova-plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Webengage, WebengageUser, WebengagePush, WebengageNotification } from '@awesome-cordova-plugins/webengage/ngx';
-
-
-constructor(private webengage: Webengage, private webengageUser: WebengageUser, private webengagePush: WebengagePush, private webengageNotification: WebengageNotification ) { }
-
-...
-
-this.webengage.engage();
-```
diff --git a/versioned_docs/version-v5/native/webengage.mdx b/versioned_docs/version-v5/native/webengage.mdx
new file mode 100644
index 00000000000..33dc89a8f4f
--- /dev/null
+++ b/versioned_docs/version-v5/native/webengage.mdx
@@ -0,0 +1,85 @@
+---
+sidebar_label: 'Webengage'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Webengage
+
+Ionic-Native wrapper that wraps Webengage Cordova plugin for Android and iOS
+
+
+ github.com/WebEngage/cordova-plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Webengage, WebengageUser, WebengagePush, WebengageNotification } from '@awesome-cordova-plugins/webengage/ngx';
+
+
+constructor(private webengage: Webengage, private webengageUser: WebengageUser, private webengagePush: WebengagePush, private webengageNotification: WebengageNotification ) { }
+
+...
+
+this.webengage.engage();
+```
diff --git a/versioned_docs/version-v5/native/wechat.md b/versioned_docs/version-v5/native/wechat.md
deleted file mode 100644
index 4a16a0ff5ec..00000000000
--- a/versioned_docs/version-v5/native/wechat.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-sidebar_label: 'Wechat'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Wechat
-
-A cordova plugin, a JS version of Wechat SDK
-
-
- github.com/xu-li/cordova-plugin-wechat.git
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Wechat } from '@awesome-cordova-plugins/wechat/ngx';
-
-
-constructor(private wechat: Wechat) { }
-
-...
-
-
-this.wechat.functionName('Hello', 123)
- .then((res: any) => console.log(res))
- .catch((error: any) => console.error(error));
-
-```
diff --git a/versioned_docs/version-v5/native/wechat.mdx b/versioned_docs/version-v5/native/wechat.mdx
new file mode 100644
index 00000000000..a93a77f3c69
--- /dev/null
+++ b/versioned_docs/version-v5/native/wechat.mdx
@@ -0,0 +1,88 @@
+---
+sidebar_label: 'Wechat'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Wechat
+
+A cordova plugin, a JS version of Wechat SDK
+
+
+ github.com/xu-li/cordova-plugin-wechat.git
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Wechat } from '@awesome-cordova-plugins/wechat/ngx';
+
+
+constructor(private wechat: Wechat) { }
+
+...
+
+
+this.wechat.functionName('Hello', 123)
+ .then((res: any) => console.log(res))
+ .catch((error: any) => console.error(error));
+
+```
diff --git a/versioned_docs/version-v5/native/wheel-selector.md b/versioned_docs/version-v5/native/wheel-selector.md
deleted file mode 100644
index a9e125f147f..00000000000
--- a/versioned_docs/version-v5/native/wheel-selector.md
+++ /dev/null
@@ -1,176 +0,0 @@
----
-sidebar_label: 'WheelSelector Plugin'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# WheelSelector Plugin
-
-Native wheel selector for Cordova (Android/iOS).
-
-
- github.com/jasonmamy/cordova-wheel-selector-plugin
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```
-import { WheelSelector } from '@awesome-cordova-plugins/wheel-selector/ngx';
-
-
-constructor(private selector: WheelSelector) { }
-
-...
-
-const jsonData = {
- numbers: [
- { description: "1" },
- { description: "2" },
- { description: "3" }
- ],
- fruits: [
- { description: "Apple" },
- { description: "Banana" },
- { description: "Tangerine" }
- ],
- firstNames: [
- { name: "Fred", id: '1' },
- { name: "Jane", id: '2' },
- { name: "Bob", id: '3' },
- { name: "Earl", id: '4' },
- { name: "Eunice", id: '5' }
- ],
- lastNames: [
- { name: "Johnson", id: '100' },
- { name: "Doe", id: '101' },
- { name: "Kinishiwa", id: '102' },
- { name: "Gordon", id: '103' },
- { name: "Smith", id: '104' }
- ]
-}
-
-...
-
-// basic number selection, index is always returned in the result
- selectANumber() {
- this.selector.show({
- title: "How Many?",
- items: [
- this.jsonData.numbers
- ],
- }).then(
- result => {
- console.log(result[0].description + ' at index: ' + result[0].index);
- },
- err => console.log('Error: ', err)
- );
- }
-
- ...
-
- // basic selection, setting initial displayed default values: '3' 'Banana'
- selectFruit() {
- this.selector.show({
- title: "How Much?",
- items: [
- this.jsonData.numbers, this.jsonData.fruits
- ],
- positiveButtonText: "Ok",
- negativeButtonText: "Nope",
- defaultItems: [
- {index:0, value: this.jsonData.numbers[2].description},
- {index: 1, value: this.jsonData.fruits[3].description}
- ]
- }).then(
- result => {
- console.log(result[0].description + ' ' + result[1].description);
- },
- err => console.log('Error: ' + JSON.stringify(err))
- );
- }
-
- ...
-
- // more complex as overrides which key to display
- // then retrieve properties from original data
- selectNamesUsingDisplayKey() {
- this.selector.show({
- title: "Who?",
- items: [
- this.jsonData.firstNames, this.jsonData.lastNames
- ],
- displayKey: 'name',
- defaultItems: [
- {index:0, value: this.jsonData.firstNames[2].name},
- {index: 0, value: this.jsonData.lastNames[3].name}
- ]
- }).then(
- result => {
- console.log(result[0].name + ' (id= ' + this.jsonData.firstNames[result[0].index].id + '), ' +
- result[1].name + ' (id=' + this.jsonData.lastNames[result[1].index].id + ')');
- },
- err => console.log('Error: ' + JSON.stringify(err))
- );
- }
-
-```
diff --git a/versioned_docs/version-v5/native/wheel-selector.mdx b/versioned_docs/version-v5/native/wheel-selector.mdx
new file mode 100644
index 00000000000..a2311f0eac0
--- /dev/null
+++ b/versioned_docs/version-v5/native/wheel-selector.mdx
@@ -0,0 +1,176 @@
+---
+sidebar_label: 'WheelSelector Plugin'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# WheelSelector Plugin
+
+Native wheel selector for Cordova (Android/iOS).
+
+
+ github.com/jasonmamy/cordova-wheel-selector-plugin
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```
+import { WheelSelector } from '@awesome-cordova-plugins/wheel-selector/ngx';
+
+
+constructor(private selector: WheelSelector) { }
+
+...
+
+const jsonData = {
+ numbers: [
+ { description: "1" },
+ { description: "2" },
+ { description: "3" }
+ ],
+ fruits: [
+ { description: "Apple" },
+ { description: "Banana" },
+ { description: "Tangerine" }
+ ],
+ firstNames: [
+ { name: "Fred", id: '1' },
+ { name: "Jane", id: '2' },
+ { name: "Bob", id: '3' },
+ { name: "Earl", id: '4' },
+ { name: "Eunice", id: '5' }
+ ],
+ lastNames: [
+ { name: "Johnson", id: '100' },
+ { name: "Doe", id: '101' },
+ { name: "Kinishiwa", id: '102' },
+ { name: "Gordon", id: '103' },
+ { name: "Smith", id: '104' }
+ ]
+}
+
+...
+
+// basic number selection, index is always returned in the result
+ selectANumber() {
+ this.selector.show({
+ title: "How Many?",
+ items: [
+ this.jsonData.numbers
+ ],
+ }).then(
+ result => {
+ console.log(result[0].description + ' at index: ' + result[0].index);
+ },
+ err => console.log('Error: ', err)
+ );
+ }
+
+ ...
+
+ // basic selection, setting initial displayed default values: '3' 'Banana'
+ selectFruit() {
+ this.selector.show({
+ title: "How Much?",
+ items: [
+ this.jsonData.numbers, this.jsonData.fruits
+ ],
+ positiveButtonText: "Ok",
+ negativeButtonText: "Nope",
+ defaultItems: [
+ {index:0, value: this.jsonData.numbers[2].description},
+ {index: 1, value: this.jsonData.fruits[3].description}
+ ]
+ }).then(
+ result => {
+ console.log(result[0].description + ' ' + result[1].description);
+ },
+ err => console.log('Error: ' + JSON.stringify(err))
+ );
+ }
+
+ ...
+
+ // more complex as overrides which key to display
+ // then retrieve properties from original data
+ selectNamesUsingDisplayKey() {
+ this.selector.show({
+ title: "Who?",
+ items: [
+ this.jsonData.firstNames, this.jsonData.lastNames
+ ],
+ displayKey: 'name',
+ defaultItems: [
+ {index:0, value: this.jsonData.firstNames[2].name},
+ {index: 0, value: this.jsonData.lastNames[3].name}
+ ]
+ }).then(
+ result => {
+ console.log(result[0].name + ' (id= ' + this.jsonData.firstNames[result[0].index].id + '), ' +
+ result[1].name + ' (id=' + this.jsonData.lastNames[result[1].index].id + ')');
+ },
+ err => console.log('Error: ' + JSON.stringify(err))
+ );
+ }
+
+```
diff --git a/versioned_docs/version-v5/native/wifi-wizard-2.md b/versioned_docs/version-v5/native/wifi-wizard-2.md
deleted file mode 100644
index 575bc03482f..00000000000
--- a/versioned_docs/version-v5/native/wifi-wizard-2.md
+++ /dev/null
@@ -1,518 +0,0 @@
----
-sidebar_label: 'WifiWizard2'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# WifiWizard2
-
-WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
-
-This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
-
-
- github.com/tripflex/WifiWizard2
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-````tsx
-import { WifiWizard2 } from '@awesome-cordova-plugins/wifi-wizard-2/ngx';
-
-
-constructor(private wifiWizard2: WifiWizard2) { }
-
-
-# Global Functions
- These are functions that can be used by both Android and iOS applications
- ```tsx
- this.wifiWizard2.getConnectedSSID()
-````
-
-- Returns connected network SSID (only if connected) in success callback, otherwise fail callback will be called (if not connected or unable to retrieve)
-- This does **NOT** return the BSSID if unable to obtain SSID (like original WifiWizard did)
-
-```tsx
-this.wifiWizard2.getConnectedBSSID();
-```
-
-- Same as above, except BSSID (mac) is returned
-
-```tsx
-this.wifiWizard2.timeout(delay);
-```
-
-- `delay` should be time in milliseconds to delay
-- Helper async timeout delay, `delay` is optional, default is 2000ms = 2 seconds
-- This method always returns a resolved promise after the delay, it will never reject or throw an error
-
-**Example inside async function**
-
-```tsx
-async function example() {
- await this.wifiWizard2.timeout(4000);
- // do something after 4 seconds
-}
-```
-
-**Example inside standard non-async function**
-
-```tsx
-function example(){
- this.wifiWizard2.timeout(4000).then( function(){
- // do something after waiting 4 seconds
- }):
-}
-```
-
-**Thrown Errors**
-
-- `TIMEOUT_WAITING_FOR_SCAN` on timeout waiting for scan 10 seconds +
-- `SCAN_FAILED` if unable to start scan
-
-# iOS Functions
-
-For functionality, you need to note the following:
-
-- Connect/Disconnect only works for iOS11+
-- Can't run in the simulator so you need to attach an actual device when building with xCode
-- Will ensure 'HotspotConfiguration' and 'NetworkExtensions' capabilities are added to your xCode project
-- To connect to open network omit `ssidPassword` or call with `false`
-
-```tsx
-this.wifiWizard2.iOSConnectNetwork(ssid, ssidPassword);
-```
-
-```tsx
-this.wifiWizard2.iOSDisconnectNetwork(ssid);
-```
-
-# Android Functions
-
-- **WifiWizard2** _will automagically try to enable WiFi if it's disabled when calling any android related methods that require WiFi to be enabled_
-
-## Connect vs Enable
-
-When writing Android Java code, there is no `connect` methods, you basically either `enable` or `disable` a network. In the original versions of WifiWizard the `connect` method would basically just call `enable` in Android.
-I have changed the way this works in WifiWizard2 version 3.0.0+, converting it to a helper method to eliminate having to call `formatWifiConfig` then `add` and then `enable` ... the `connect` method will now automatically call `formatWifiConfig`, then call `add` to either add or update the network configuration, and then call `enable`.
-If the connect method is unable to update existing network configuration (added by user or other apps), but there is a valid network ID, it will still attempt to enable that network ID.
-
-```tsx
-this.wifiWizard2.connect(ssid, bindAll, password, algorithm, isHiddenSSID);
-```
-
-- `ssid` should be the SSID to connect to _required_
-- `bindAll` should be set to `true` to tell Android to route all connections from your Android app, through the wifi connection (default is `false`) _optional_
-- See `WifiWizard2.enable` for more details regarding `bindAll` feature
-- `algorithm` and `password` is not required if connecting to an open network
-- Currently `WPA` and `WEP` are only supported algorithms
-- For `WPA2` just pass `WPA` as the algorithm
-- Set `isHiddenSSID` to `true` if the network you're connecting to is hidden
-- These arguments are the same as for `formatWifiConfig`
-- This method essentially calls `formatWifiConfig` then `add` then `enable`
-- If unable to update network configuration (was added by user or other app), but a valid network ID exists, this method will still attempt to enable the network
-- Promise will not be returned until method has verified that connection to WiFi was in completed state (waits up to 60 seconds)
-
-**Thrown Errors**
-
-- `CONNECT_FAILED_TIMEOUT` unable to verify connection, timed out after 60 seconds
-- `INVALID_NETWORK_ID_TO_CONNECT` Unable to connect based on generated wifi config
-- `INTERPUT_EXCEPT_WHILE_CONNECTING` Interrupt exception while waiting for connection
-
-## Disconnect vs Disable
-
-Same as above for Connect vs Enable, except in this situation, `disconnect` will first disable the network, and then attempt to remove it (if SSID is passed)
-
-```tsx
-this.wifiWizard2.disconnect(ssid);
-```
-
-- `ssid` can either be an SSID (string) or a network ID (integer)
-- `ssid` is **OPTIONAL** .. if not passed, will disconnect current WiFi (almost all Android versions now will just automatically reconnect to last wifi after disconnecting)
-- If `ssid` is provided, this method will first attempt to `disable` and then `remove` the network
-- If you do not want to remove network configuration, use `disable` instead
-
-**Thrown Errors**
-
-- `DISCONNECT_NET_REMOVE_ERROR` Android returned error when removing wifi configuration
-- `DISCONNECT_NET_DISABLE_ERROR` Unable to connect based on generated wifi config
-- `DISCONNECT_NET_ID_NOT_FOUND` Unable to determine network ID to disconnect/remove (from passed SSID)
-- `ERROR_DISCONNECT` - Android error disconnecting wifi (only when SSID is not passed)
-
-```tsx
-this.wifiWizard2.formatWifiConfig(ssid, password, algorithm, isHiddenSSID);
-```
-
-- `algorithm` and `password` is not required if connecting to an open network
-- Currently `WPA` and `WEP` are only supported algorithms
-- For `WPA2` just pass `WPA` as the algorithm
-- Set `isHiddenSSID` to `true` if the network you're connecting to is hidden
-
-```tsx
-this.wifiWizard2.formatWPAConfig(ssid, password, isHiddenSSID);
-```
-
-- This is just a helper method that calls `WifiWizard2.formatWifiConfig( ssid, password, 'WPA', isHiddenSSID );`
-
-```tsx
-this.wifiWizard2.add(wifi);
-```
-
-- `wifi` must be an object formatted by `formatWifiConfig`, this **must** be done before calling `enable`
-
-**Thrown Errors**
-
-- `AUTH_TYPE_NOT_SUPPORTED` - Invalid auth type specified
-- `ERROR_ADDING_NETWORK` - Android returned `-1` specifying error adding network
-- `ERROR_UPDATING_NETWORK` - Same as above, except an existing network ID was found, and unable to update it
-
-```tsx
-this.wifiWizard2.remove(ssid);
-```
-
-- `ssid` can either be an SSID (string) or a network ID (integer)
-- Please note, most newer versions of Android will only allow wifi to be removed if created by your application
-
-**Thrown Errors**
-
-- `UNABLE_TO_REMOVE` Android returned failure in removing network
-- `REMOVE_NETWORK_NOT_FOUND` Unable to determine network ID from passed SSID
-
-```tsx
-this.wifiWizard2.listNetworks();
-```
-
-```tsx
-this.wifiWizard2.scan([options]);
-```
-
-- Same as calling `startScan` and then `getScanResults`, except this method will only resolve the promise after the scan completes and returns the results.
-
-```tsx
-this.wifiWizard2.startScan();
-```
-
-- It is recommended to just use the `scan` method instead of `startScan`
-
-**Thrown Errors**
-
-- `STARTSCAN_FAILED` Android returned failure in starting scan
-
-```tsx
-this.wifiWizard2.getScanResults([options]);
-```
-
-- `getScanResults` should only be called after calling `startScan` (it is recommended to use `scan` instead as this starts the scan, then returns the results)
-- `[options]` is optional, if you do not want to specify, just pass `success` callback as first parameter, and `fail` callback as second parameter
-- Retrieves a list of the available networks as an array of objects and passes them to the function listHandler. The format of the array is:
-
-```tsx
-networks = [
-{ "level": signal_level, // raw RSSI value
- "SSID": ssid, // SSID as string, with escaped double quotes: "\"ssid name\""
- "BSSID": bssid // MAC address of WiFi router as string
- "frequency": frequency of the access point channel in MHz
- "capabilities": capabilities // Describes the authentication, key management, and encryption schemes supported by the access point.
- "timestamp": timestamp // timestamp of when the scan was completed
- "channelWidth":
- "centerFreq0":
- "centerFreq1":
- }
-]
-```
-
-- `channelWidth` `centerFreq0` and `centerFreq1` are only supported on API > 23 (Marshmallow), any older API will return null for these values
-
-An options object may be passed. Currently, the only supported option is `numLevels`, and it has the following behavior:
-
-- if `(n == true || n < 2)`, `*.getScanResults({numLevels: n})` will return data as before, split in 5 levels;
-- if `(n > 1)`, `*.getScanResults({numLevels: n})` will calculate the signal level, split in n levels;
-- if `(n == false)`, `*.getScanResults({numLevels: n})` will use the raw signal level;
-
-```tsx
-this.wifiWizard2.isWifiEnabled();
-```
-
-- Returns boolean value of whether Wifi is enabled or not
-
-```tsx
-this.wifiWizard2.setWifiEnabled(enabled);
-```
-
-- Pass `true` for `enabled` parameter to set Wifi enabled
-- You do not need to call this function to set WiFi enabled to call other methods that require wifi enabled. This plugin will automagically enable WiFi if a method is called that requires WiFi to be enabled.
-
-**Thrown Errors**
-
-- `ERROR_SETWIFIENABLED` wifi state does not match call (enable or disable)
-
-```tsx
-this.wifiWizard2.getConnectedNetworkID();
-```
-
-- Returns currently connected network ID in success callback (only if connected), otherwise fail callback will be called
-
-**Thrown Errors**
-
-- `GET_CONNECTED_NET_ID_ERROR` Unable to determine currently connected network ID (may not be connected)
-
-## New to 3.1.1+
-
-```tsx
-this.wifiWizard2.resetBindAll();
-```
-
-- Disable bindAll to WiFi network without disconnecting from WiFi
-
-```tsx
-this.wifiWizard2.setBindAll();
-```
-
-- Enable bindAll to WiFi network without disconnecting from WiFi
-
-```tsx
-this.wifiWizard2.canConnectToInternet();
-```
-
-- Returns boolean, true or false, if device is able to connect to https://www.google.com via HTTP connection (since ping is unreliable)
-- Unknown errors will still be thrown like all other async functions
-- If you called `connect` or `enable` and passed `true` for `bindAll`, your application will force the ping through wifi connection.
-- If you did not pass `true` (or passed `false`) for `bindAll`, and the wifi does not have internet connection, Android Lollipop+ (API 21+) will use cell connection to ping (due to Android using cell connection when wifi does not have internet) [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)
-
-```tsx
-this.wifiWizard2.canConnectToRouter();
-```
-
-- As `canPingWifiRouter` is notoriously unreliable, this method uses HTTP connection to test if able to connect to router (as most routers should have web server running on port 80)
-- Unknown errors will still be thrown like all other async functions
-- This is useful for testing to make sure that your Android app is able to connect to the private network after connecting to WiFi
-- This was added for testing the `bindAll` feature to support issues with Android Lollipop+ (API 21+) not routing calls through WiFi if WiFi does not have internet connection [See Android Blog](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)
-- Attempts to connect router IP HTTP server on port 80 (example: `http://192.168.0.1/` where `192.168.0.1` is the automatically detected IP address)
-
-## New to 3.0.0+
-
-```tsx
-this.wifiWizard2.isConnectedToInternet();
-```
-
-- Returns boolean, true or false, if device is able to ping 8.8.8.8
-- Unknown errors will still be thrown like all other async functions
-- If you called `connect` or `enable` and passed `true` for `bindAll`, your application will force the ping through wifi connection.
-- If you did not pass `true` (or passed `false`) for `bindAll`, and the wifi does not have internet connection, Android Lollipop+ (API 21+) will use cell connection to ping (due to Android using cell connection when wifi does not have internet) [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)
-
-```tsx
-this.wifiWizard2.canPingWifiRouter();
-```
-
-- Returns boolean, true or false, if device is able to ping the connected WiFi router IP (obtained from DHCP info)
-- Version 3.1.1+ uses HTTP connection to test if able to connect to router (as ping previous did not work)
-- Unknown errors will still be thrown like all other async functions
-- This is useful for testing to make sure that your Android app is able to connect to the private network after connecting to WiFi
-- This was added for testing the `bindAll` feature to support issues with Android Lollipop+ (API 21+) not routing calls through WiFi if WiFi does not have internet connection [See Android Blog](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)
-
-```tsx
-this.wifiWizard2.enableWifi();
-```
-
-```tsx
-this.wifiWizard2.disableWifi();
-```
-
-```tsx
-this.wifiWizard2.getWifiIP();
-```
-
-- Returns IPv4 address of currently connected WiFi, or rejects promise if IP not found or wifi not connected
-
-```tsx
-this.wifiWizard2.getWifiRouterIP();
-```
-
-- Returns IPv4 WiFi router IP from currently connected WiFi, or rejects promise if unable to determine, or wifi not connected
-
-**Thrown Errors**
-
-- `NO_VALID_IP_IDENTIFIED` if unable to determine a valid IP (ip returned from device is `0.0.0.0`)
-
-```tsx
-this.wifiWizard2.getWifiIPInfo();
-```
-
-- Returns a JSON object with IPv4 address and subnet `{"ip": "192.168.1.2", "subnet": "255.255.255.0" }` or rejected promise if not found or not connected
- **Thrown Errors**
-
-- `NO_VALID_IP_IDENTIFIED` if unable to determine a valid IP (ip returned from device is `0.0.0.0`)
-
-```tsx
-this.wifiWizard2.reconnect();
-```
-
-- Reconnect to the currently active access point, **if we are currently disconnected.**
-
-**Thrown Errors**
-
-- `ERROR_RECONNECT` Android returned error when reconnecting
-
-```tsx
-this.wifiWizard2.reassociate();
-```
-
-- Reconnect to the currently active access point, **even if we are already connected.**
-
-**Thrown Errors**
-
-- `ERROR_REASSOCIATE` Android returned error when reassociating
-
-```tsx
-this.wifiWizard2.getSSIDNetworkID(ssid);
-```
-
-- Get Android Network ID from passed SSID
-
-```tsx
-this.wifiWizard2.disable(ssid);
-```
-
-- `ssid` can either be an SSID (string) or a network ID (integer)
-- Disable the passed SSID network
-- Please note that most newer versions of Android will only allow you to disable networks created by your application
-
-**Thrown Errors**
-
-- `UNABLE_TO_DISABLE` Android returned failure in disabling network
-- `DISABLE_NETWORK_NOT_FOUND` Unable to determine network ID from passed SSID to disable
-
-```tsx
-this.wifiWizard2.requestPermission();
-```
-
-- Request `ACCESS_FINE_LOCATION` permission
-- This Android permission is required to run `scan`, `startStart` and `getScanResults`
-- You can request permission by running this function manually, or WifiWizard2 will automatically request permission when one of the functions above is called
-
-**Thrown Errors**
-
-- `PERMISSION_DENIED` user denied permission on device
-
-```tsx
-this.wifiWizard2.enable(ssid, bindAll, waitForConnection);
-```
-
-- `ssid` can either be an SSID (string) or a network ID (integer)
-- `bindAll` should be set to `true` to tell Android to route all connections from your Android app, through the wifi connection
-- Android Lollipop+ (API 21+) will not route connections to the WiFi device if it does not have internet connection. Passing `true` to `bindAll` will force Android to route connections from your Android app through Wifi, regardless of internet connection.
-- If you are having problems connecting to a local IP through WiFi because it does not have internet, try enabling `bindAll` and this should fix the problem.
-- During my testing, some versions of Android (5.0 - 7.1.2) would still route connections through WiFi without internet, but it was random that some versions would and would not work.
-- Testing Android Oreo+ (8.0.0+) if wifi does not have internet, 100% of the time it would NOT route connections through WiFi, so you _must_ enable this for Oreo or newer to route connections from your application through wifi without internet.
-- When `bindAll` is enabled, _ALL_ connections from your app will be routed through WiFi, until you call `disconnect` or `disable`
-- See the Google Android Blog for [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)
-- This feature _ONLY_ works for Android Lollipop+ (API 21+), if device is running API older than 21, `bindall` will be ignored (as API older than 21 does this by default)
-- Enable the passed SSID network
-- You **MUST** call `WifiWizard2.add(wifi)` before calling `enable` as the wifi configuration must exist before you can enable it (or previously used `connect` without calling `disconnect`)
-- This method does NOT wait or verify connection to wifi network, pass `true` to `waitForConnection` to only return promise once connection is verified in COMPLETED state to specific `ssid`
-
-**Thrown Errors**
-
-`UNABLE_TO_ENABLE` - Android returned `-1` signifying failure enabling
-
-# Installation
-
-## Master
-
-Run `cordova plugin add https://github.com/tripflex/wifiwizard2`
-
-To install from the master branch (latest on GitHub)
-
-To install a specific branch (add `#tag` replacing `tag` with tag from this repo, example:
-`cordova plugin add https://github.com/tripflex/wifiwizard2#v3.1.1`
-
-Find available tags here:
-https://github.com/tripflex/WifiWizard2/tags
-
-If you are wanting to have the latest and greatest stable version, then run the 'Releases' command below.
-
-## Releases
-
-Run `cordova plugin add cordova-plugin-wifiwizard2`
-
-## Meteor
-
-To install and use this plugin in a Meteor project, you have to specify the exact version from NPM repository:
-[https://www.npmjs.com/package/cordova-plugin-wifiwizard2](https://www.npmjs.com/package/cordova-plugin-wifiwizard2)
-
-As of April 4th 2019, the latest version is 3.1.1:
-
-`meteor add cordova:cordova-plugin-wifiwizard2@3.1.1`
-
-# Errors/Rejections
-
-Methods now return formatted string errors as detailed below, instead of returning generic error messages. This allows you to check yourself what specific error was returned, and customize the error message.
-In an upcoming release I may add easy ways to override generic messages, or set your own, but for now, errors returned can be found below each method/function.
-
-## Generic **Thrown Errors**
-
-`WIFI_NOT_ENABLED`
-
-```
-
-```
diff --git a/versioned_docs/version-v5/native/wifi-wizard-2.mdx b/versioned_docs/version-v5/native/wifi-wizard-2.mdx
new file mode 100644
index 00000000000..b098f1e9ec9
--- /dev/null
+++ b/versioned_docs/version-v5/native/wifi-wizard-2.mdx
@@ -0,0 +1,518 @@
+---
+sidebar_label: 'WifiWizard2'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# WifiWizard2
+
+WifiWizard2 enables Wifi management for both Android and iOS applications within Cordova/Phonegap projects.
+
+This project is a fork of the WifiWizard plugin with fixes and updates, as well as patches taken from the Cordova Network Manager plugin.
+
+
+ github.com/tripflex/WifiWizard2
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+````tsx
+import { WifiWizard2 } from '@awesome-cordova-plugins/wifi-wizard-2/ngx';
+
+
+constructor(private wifiWizard2: WifiWizard2) { }
+
+
+# Global Functions
+ These are functions that can be used by both Android and iOS applications
+ ```tsx
+ this.wifiWizard2.getConnectedSSID()
+````
+
+- Returns connected network SSID (only if connected) in success callback, otherwise fail callback will be called (if not connected or unable to retrieve)
+- This does **NOT** return the BSSID if unable to obtain SSID (like original WifiWizard did)
+
+```tsx
+this.wifiWizard2.getConnectedBSSID();
+```
+
+- Same as above, except BSSID (mac) is returned
+
+```tsx
+this.wifiWizard2.timeout(delay);
+```
+
+- `delay` should be time in milliseconds to delay
+- Helper async timeout delay, `delay` is optional, default is 2000ms = 2 seconds
+- This method always returns a resolved promise after the delay, it will never reject or throw an error
+
+**Example inside async function**
+
+```tsx
+async function example() {
+ await this.wifiWizard2.timeout(4000);
+ // do something after 4 seconds
+}
+```
+
+**Example inside standard non-async function**
+
+```tsx
+function example(){
+ this.wifiWizard2.timeout(4000).then( function(){
+ // do something after waiting 4 seconds
+ }):
+}
+```
+
+**Thrown Errors**
+
+- `TIMEOUT_WAITING_FOR_SCAN` on timeout waiting for scan 10 seconds +
+- `SCAN_FAILED` if unable to start scan
+
+# iOS Functions
+
+For functionality, you need to note the following:
+
+- Connect/Disconnect only works for iOS11+
+- Can't run in the simulator so you need to attach an actual device when building with xCode
+- Will ensure 'HotspotConfiguration' and 'NetworkExtensions' capabilities are added to your xCode project
+- To connect to open network omit `ssidPassword` or call with `false`
+
+```tsx
+this.wifiWizard2.iOSConnectNetwork(ssid, ssidPassword);
+```
+
+```tsx
+this.wifiWizard2.iOSDisconnectNetwork(ssid);
+```
+
+# Android Functions
+
+- **WifiWizard2** _will automagically try to enable WiFi if it's disabled when calling any android related methods that require WiFi to be enabled_
+
+## Connect vs Enable
+
+When writing Android Java code, there is no `connect` methods, you basically either `enable` or `disable` a network. In the original versions of WifiWizard the `connect` method would basically just call `enable` in Android.
+I have changed the way this works in WifiWizard2 version 3.0.0+, converting it to a helper method to eliminate having to call `formatWifiConfig` then `add` and then `enable` ... the `connect` method will now automatically call `formatWifiConfig`, then call `add` to either add or update the network configuration, and then call `enable`.
+If the connect method is unable to update existing network configuration (added by user or other apps), but there is a valid network ID, it will still attempt to enable that network ID.
+
+```tsx
+this.wifiWizard2.connect(ssid, bindAll, password, algorithm, isHiddenSSID);
+```
+
+- `ssid` should be the SSID to connect to _required_
+- `bindAll` should be set to `true` to tell Android to route all connections from your Android app, through the wifi connection (default is `false`) _optional_
+- See `WifiWizard2.enable` for more details regarding `bindAll` feature
+- `algorithm` and `password` is not required if connecting to an open network
+- Currently `WPA` and `WEP` are only supported algorithms
+- For `WPA2` just pass `WPA` as the algorithm
+- Set `isHiddenSSID` to `true` if the network you're connecting to is hidden
+- These arguments are the same as for `formatWifiConfig`
+- This method essentially calls `formatWifiConfig` then `add` then `enable`
+- If unable to update network configuration (was added by user or other app), but a valid network ID exists, this method will still attempt to enable the network
+- Promise will not be returned until method has verified that connection to WiFi was in completed state (waits up to 60 seconds)
+
+**Thrown Errors**
+
+- `CONNECT_FAILED_TIMEOUT` unable to verify connection, timed out after 60 seconds
+- `INVALID_NETWORK_ID_TO_CONNECT` Unable to connect based on generated wifi config
+- `INTERPUT_EXCEPT_WHILE_CONNECTING` Interrupt exception while waiting for connection
+
+## Disconnect vs Disable
+
+Same as above for Connect vs Enable, except in this situation, `disconnect` will first disable the network, and then attempt to remove it (if SSID is passed)
+
+```tsx
+this.wifiWizard2.disconnect(ssid);
+```
+
+- `ssid` can either be an SSID (string) or a network ID (integer)
+- `ssid` is **OPTIONAL** .. if not passed, will disconnect current WiFi (almost all Android versions now will just automatically reconnect to last wifi after disconnecting)
+- If `ssid` is provided, this method will first attempt to `disable` and then `remove` the network
+- If you do not want to remove network configuration, use `disable` instead
+
+**Thrown Errors**
+
+- `DISCONNECT_NET_REMOVE_ERROR` Android returned error when removing wifi configuration
+- `DISCONNECT_NET_DISABLE_ERROR` Unable to connect based on generated wifi config
+- `DISCONNECT_NET_ID_NOT_FOUND` Unable to determine network ID to disconnect/remove (from passed SSID)
+- `ERROR_DISCONNECT` - Android error disconnecting wifi (only when SSID is not passed)
+
+```tsx
+this.wifiWizard2.formatWifiConfig(ssid, password, algorithm, isHiddenSSID);
+```
+
+- `algorithm` and `password` is not required if connecting to an open network
+- Currently `WPA` and `WEP` are only supported algorithms
+- For `WPA2` just pass `WPA` as the algorithm
+- Set `isHiddenSSID` to `true` if the network you're connecting to is hidden
+
+```tsx
+this.wifiWizard2.formatWPAConfig(ssid, password, isHiddenSSID);
+```
+
+- This is just a helper method that calls `WifiWizard2.formatWifiConfig( ssid, password, 'WPA', isHiddenSSID );`
+
+```tsx
+this.wifiWizard2.add(wifi);
+```
+
+- `wifi` must be an object formatted by `formatWifiConfig`, this **must** be done before calling `enable`
+
+**Thrown Errors**
+
+- `AUTH_TYPE_NOT_SUPPORTED` - Invalid auth type specified
+- `ERROR_ADDING_NETWORK` - Android returned `-1` specifying error adding network
+- `ERROR_UPDATING_NETWORK` - Same as above, except an existing network ID was found, and unable to update it
+
+```tsx
+this.wifiWizard2.remove(ssid);
+```
+
+- `ssid` can either be an SSID (string) or a network ID (integer)
+- Please note, most newer versions of Android will only allow wifi to be removed if created by your application
+
+**Thrown Errors**
+
+- `UNABLE_TO_REMOVE` Android returned failure in removing network
+- `REMOVE_NETWORK_NOT_FOUND` Unable to determine network ID from passed SSID
+
+```tsx
+this.wifiWizard2.listNetworks();
+```
+
+```tsx
+this.wifiWizard2.scan([options]);
+```
+
+- Same as calling `startScan` and then `getScanResults`, except this method will only resolve the promise after the scan completes and returns the results.
+
+```tsx
+this.wifiWizard2.startScan();
+```
+
+- It is recommended to just use the `scan` method instead of `startScan`
+
+**Thrown Errors**
+
+- `STARTSCAN_FAILED` Android returned failure in starting scan
+
+```tsx
+this.wifiWizard2.getScanResults([options]);
+```
+
+- `getScanResults` should only be called after calling `startScan` (it is recommended to use `scan` instead as this starts the scan, then returns the results)
+- `[options]` is optional, if you do not want to specify, just pass `success` callback as first parameter, and `fail` callback as second parameter
+- Retrieves a list of the available networks as an array of objects and passes them to the function listHandler. The format of the array is:
+
+```tsx
+networks = [
+{ "level": signal_level, // raw RSSI value
+ "SSID": ssid, // SSID as string, with escaped double quotes: "\"ssid name\""
+ "BSSID": bssid // MAC address of WiFi router as string
+ "frequency": frequency of the access point channel in MHz
+ "capabilities": capabilities // Describes the authentication, key management, and encryption schemes supported by the access point.
+ "timestamp": timestamp // timestamp of when the scan was completed
+ "channelWidth":
+ "centerFreq0":
+ "centerFreq1":
+ }
+]
+```
+
+- `channelWidth` `centerFreq0` and `centerFreq1` are only supported on API > 23 (Marshmallow), any older API will return null for these values
+
+An options object may be passed. Currently, the only supported option is `numLevels`, and it has the following behavior:
+
+- if `(n == true || n < 2)`, `*.getScanResults({numLevels: n})` will return data as before, split in 5 levels;
+- if `(n > 1)`, `*.getScanResults({numLevels: n})` will calculate the signal level, split in n levels;
+- if `(n == false)`, `*.getScanResults({numLevels: n})` will use the raw signal level;
+
+```tsx
+this.wifiWizard2.isWifiEnabled();
+```
+
+- Returns boolean value of whether Wifi is enabled or not
+
+```tsx
+this.wifiWizard2.setWifiEnabled(enabled);
+```
+
+- Pass `true` for `enabled` parameter to set Wifi enabled
+- You do not need to call this function to set WiFi enabled to call other methods that require wifi enabled. This plugin will automagically enable WiFi if a method is called that requires WiFi to be enabled.
+
+**Thrown Errors**
+
+- `ERROR_SETWIFIENABLED` wifi state does not match call (enable or disable)
+
+```tsx
+this.wifiWizard2.getConnectedNetworkID();
+```
+
+- Returns currently connected network ID in success callback (only if connected), otherwise fail callback will be called
+
+**Thrown Errors**
+
+- `GET_CONNECTED_NET_ID_ERROR` Unable to determine currently connected network ID (may not be connected)
+
+## New to 3.1.1+
+
+```tsx
+this.wifiWizard2.resetBindAll();
+```
+
+- Disable bindAll to WiFi network without disconnecting from WiFi
+
+```tsx
+this.wifiWizard2.setBindAll();
+```
+
+- Enable bindAll to WiFi network without disconnecting from WiFi
+
+```tsx
+this.wifiWizard2.canConnectToInternet();
+```
+
+- Returns boolean, true or false, if device is able to connect to https://www.google.com via HTTP connection (since ping is unreliable)
+- Unknown errors will still be thrown like all other async functions
+- If you called `connect` or `enable` and passed `true` for `bindAll`, your application will force the ping through wifi connection.
+- If you did not pass `true` (or passed `false`) for `bindAll`, and the wifi does not have internet connection, Android Lollipop+ (API 21+) will use cell connection to ping (due to Android using cell connection when wifi does not have internet) [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)
+
+```tsx
+this.wifiWizard2.canConnectToRouter();
+```
+
+- As `canPingWifiRouter` is notoriously unreliable, this method uses HTTP connection to test if able to connect to router (as most routers should have web server running on port 80)
+- Unknown errors will still be thrown like all other async functions
+- This is useful for testing to make sure that your Android app is able to connect to the private network after connecting to WiFi
+- This was added for testing the `bindAll` feature to support issues with Android Lollipop+ (API 21+) not routing calls through WiFi if WiFi does not have internet connection [See Android Blog](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)
+- Attempts to connect router IP HTTP server on port 80 (example: `http://192.168.0.1/` where `192.168.0.1` is the automatically detected IP address)
+
+## New to 3.0.0+
+
+```tsx
+this.wifiWizard2.isConnectedToInternet();
+```
+
+- Returns boolean, true or false, if device is able to ping 8.8.8.8
+- Unknown errors will still be thrown like all other async functions
+- If you called `connect` or `enable` and passed `true` for `bindAll`, your application will force the ping through wifi connection.
+- If you did not pass `true` (or passed `false`) for `bindAll`, and the wifi does not have internet connection, Android Lollipop+ (API 21+) will use cell connection to ping (due to Android using cell connection when wifi does not have internet) [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)
+
+```tsx
+this.wifiWizard2.canPingWifiRouter();
+```
+
+- Returns boolean, true or false, if device is able to ping the connected WiFi router IP (obtained from DHCP info)
+- Version 3.1.1+ uses HTTP connection to test if able to connect to router (as ping previous did not work)
+- Unknown errors will still be thrown like all other async functions
+- This is useful for testing to make sure that your Android app is able to connect to the private network after connecting to WiFi
+- This was added for testing the `bindAll` feature to support issues with Android Lollipop+ (API 21+) not routing calls through WiFi if WiFi does not have internet connection [See Android Blog](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)
+
+```tsx
+this.wifiWizard2.enableWifi();
+```
+
+```tsx
+this.wifiWizard2.disableWifi();
+```
+
+```tsx
+this.wifiWizard2.getWifiIP();
+```
+
+- Returns IPv4 address of currently connected WiFi, or rejects promise if IP not found or wifi not connected
+
+```tsx
+this.wifiWizard2.getWifiRouterIP();
+```
+
+- Returns IPv4 WiFi router IP from currently connected WiFi, or rejects promise if unable to determine, or wifi not connected
+
+**Thrown Errors**
+
+- `NO_VALID_IP_IDENTIFIED` if unable to determine a valid IP (ip returned from device is `0.0.0.0`)
+
+```tsx
+this.wifiWizard2.getWifiIPInfo();
+```
+
+- Returns a JSON object with IPv4 address and subnet `{"ip": "192.168.1.2", "subnet": "255.255.255.0" }` or rejected promise if not found or not connected
+ **Thrown Errors**
+
+- `NO_VALID_IP_IDENTIFIED` if unable to determine a valid IP (ip returned from device is `0.0.0.0`)
+
+```tsx
+this.wifiWizard2.reconnect();
+```
+
+- Reconnect to the currently active access point, **if we are currently disconnected.**
+
+**Thrown Errors**
+
+- `ERROR_RECONNECT` Android returned error when reconnecting
+
+```tsx
+this.wifiWizard2.reassociate();
+```
+
+- Reconnect to the currently active access point, **even if we are already connected.**
+
+**Thrown Errors**
+
+- `ERROR_REASSOCIATE` Android returned error when reassociating
+
+```tsx
+this.wifiWizard2.getSSIDNetworkID(ssid);
+```
+
+- Get Android Network ID from passed SSID
+
+```tsx
+this.wifiWizard2.disable(ssid);
+```
+
+- `ssid` can either be an SSID (string) or a network ID (integer)
+- Disable the passed SSID network
+- Please note that most newer versions of Android will only allow you to disable networks created by your application
+
+**Thrown Errors**
+
+- `UNABLE_TO_DISABLE` Android returned failure in disabling network
+- `DISABLE_NETWORK_NOT_FOUND` Unable to determine network ID from passed SSID to disable
+
+```tsx
+this.wifiWizard2.requestPermission();
+```
+
+- Request `ACCESS_FINE_LOCATION` permission
+- This Android permission is required to run `scan`, `startStart` and `getScanResults`
+- You can request permission by running this function manually, or WifiWizard2 will automatically request permission when one of the functions above is called
+
+**Thrown Errors**
+
+- `PERMISSION_DENIED` user denied permission on device
+
+```tsx
+this.wifiWizard2.enable(ssid, bindAll, waitForConnection);
+```
+
+- `ssid` can either be an SSID (string) or a network ID (integer)
+- `bindAll` should be set to `true` to tell Android to route all connections from your Android app, through the wifi connection
+- Android Lollipop+ (API 21+) will not route connections to the WiFi device if it does not have internet connection. Passing `true` to `bindAll` will force Android to route connections from your Android app through Wifi, regardless of internet connection.
+- If you are having problems connecting to a local IP through WiFi because it does not have internet, try enabling `bindAll` and this should fix the problem.
+- During my testing, some versions of Android (5.0 - 7.1.2) would still route connections through WiFi without internet, but it was random that some versions would and would not work.
+- Testing Android Oreo+ (8.0.0+) if wifi does not have internet, 100% of the time it would NOT route connections through WiFi, so you _must_ enable this for Oreo or newer to route connections from your application through wifi without internet.
+- When `bindAll` is enabled, _ALL_ connections from your app will be routed through WiFi, until you call `disconnect` or `disable`
+- See the Google Android Blog for [More Details](https://android-developers.googleblog.com/2016/07/connecting-your-app-to-wi-fi-device.html)
+- This feature _ONLY_ works for Android Lollipop+ (API 21+), if device is running API older than 21, `bindall` will be ignored (as API older than 21 does this by default)
+- Enable the passed SSID network
+- You **MUST** call `WifiWizard2.add(wifi)` before calling `enable` as the wifi configuration must exist before you can enable it (or previously used `connect` without calling `disconnect`)
+- This method does NOT wait or verify connection to wifi network, pass `true` to `waitForConnection` to only return promise once connection is verified in COMPLETED state to specific `ssid`
+
+**Thrown Errors**
+
+`UNABLE_TO_ENABLE` - Android returned `-1` signifying failure enabling
+
+# Installation
+
+## Master
+
+Run `cordova plugin add https://github.com/tripflex/wifiwizard2`
+
+To install from the master branch (latest on GitHub)
+
+To install a specific branch (add `#tag` replacing `tag` with tag from this repo, example:
+`cordova plugin add https://github.com/tripflex/wifiwizard2#v3.1.1`
+
+Find available tags here:
+https://github.com/tripflex/WifiWizard2/tags
+
+If you are wanting to have the latest and greatest stable version, then run the 'Releases' command below.
+
+## Releases
+
+Run `cordova plugin add cordova-plugin-wifiwizard2`
+
+## Meteor
+
+To install and use this plugin in a Meteor project, you have to specify the exact version from NPM repository:
+[https://www.npmjs.com/package/cordova-plugin-wifiwizard2](https://www.npmjs.com/package/cordova-plugin-wifiwizard2)
+
+As of April 4th 2019, the latest version is 3.1.1:
+
+`meteor add cordova:cordova-plugin-wifiwizard2@3.1.1`
+
+# Errors/Rejections
+
+Methods now return formatted string errors as detailed below, instead of returning generic error messages. This allows you to check yourself what specific error was returned, and customize the error message.
+In an upcoming release I may add easy ways to override generic messages, or set your own, but for now, errors returned can be found below each method/function.
+
+## Generic **Thrown Errors**
+
+`WIFI_NOT_ENABLED`
+
+```
+
+```
diff --git a/versioned_docs/version-v5/native/wonderpush.md b/versioned_docs/version-v5/native/wonderpush.md
deleted file mode 100644
index e0df24ba1a3..00000000000
--- a/versioned_docs/version-v5/native/wonderpush.md
+++ /dev/null
@@ -1,129 +0,0 @@
----
-sidebar_label: 'Push Notifications - WonderPush'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Push Notifications - WonderPush
-
-Send unlimited push notifications to iOS and Android devices.
-
-Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
-
-Advanced segmentation, automation and personalization of push messages for €1 per 1000 subscribers.
-
-Requires the Cordova plugin `wonderpush-cordova-sdk`.
-
-[WonderPush push notifications](https://www.wonderpush.com) are the most effective way
-to retain your users and grow your audience while remaining fully GDPR compliant.
-
-
- github.com/wonderpush/wonderpush-cordova-sdk
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { WonderPush } from '@awesome-cordova-plugins/wonderpush';
-
-
-constructor(private wonderPush: WonderPush) { }
-
-...
-
-// Subscribe user
-this.wonderPush.subscribeToNotifications()
- .then(() => console.log("User subscribed to notifications"))
- .catch((error: any) => console.error(error));
-
-
-// Send an event (a purchase in this example)
-this.wonderPush.sendEvent('purchase', {
- float_price: 12.99,
- string_sku: "X123456"
-});
-
-// Tag users (as customers)
-this.wonderPush.addTag('customer');
-
-// Personalize
-// 1. Store user details.
-// 2. Use those details to create segments.
-// 3. Include those details in your notifications.
-this.wonderPush.putProperties({
- string_name: 'John D.',
- int_age: 24
-});
-
-// GDPR
-// 1. set REQUIRES_USER_CONSENT=true to enable GDPR compliance.
-// 2. WonderPush doesn't start until setUserConsent(true) is called.
-const onClick = (userConsent: boolean) => this.wonderPush.setUserConsent(userConsent);
-
-// Listen to notification clicks
-document.addEventListener('wonderpush.notificationOpen', function(event) {
- console.log('Notification opened', event.notification);
- if (event.notificationType === 'data') {
- console.log('Silent notification', event.notification);
- }
-});
-```
diff --git a/versioned_docs/version-v5/native/wonderpush.mdx b/versioned_docs/version-v5/native/wonderpush.mdx
new file mode 100644
index 00000000000..b8cb982759e
--- /dev/null
+++ b/versioned_docs/version-v5/native/wonderpush.mdx
@@ -0,0 +1,129 @@
+---
+sidebar_label: 'Push Notifications - WonderPush'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Push Notifications - WonderPush
+
+Send unlimited push notifications to iOS and Android devices.
+
+Get started in minutes: [Ionic Quickstart Guide](https://docs.wonderpush.com/docs/ionic-quickstart).
+
+Advanced segmentation, automation and personalization of push messages for €1 per 1000 subscribers.
+
+Requires the Cordova plugin `wonderpush-cordova-sdk`.
+
+[WonderPush push notifications](https://www.wonderpush.com) are the most effective way
+to retain your users and grow your audience while remaining fully GDPR compliant.
+
+
+ github.com/wonderpush/wonderpush-cordova-sdk
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { WonderPush } from '@awesome-cordova-plugins/wonderpush';
+
+
+constructor(private wonderPush: WonderPush) { }
+
+...
+
+// Subscribe user
+this.wonderPush.subscribeToNotifications()
+ .then(() => console.log("User subscribed to notifications"))
+ .catch((error: any) => console.error(error));
+
+
+// Send an event (a purchase in this example)
+this.wonderPush.sendEvent('purchase', {
+ float_price: 12.99,
+ string_sku: "X123456"
+});
+
+// Tag users (as customers)
+this.wonderPush.addTag('customer');
+
+// Personalize
+// 1. Store user details.
+// 2. Use those details to create segments.
+// 3. Include those details in your notifications.
+this.wonderPush.putProperties({
+ string_name: 'John D.',
+ int_age: 24
+});
+
+// GDPR
+// 1. set REQUIRES_USER_CONSENT=true to enable GDPR compliance.
+// 2. WonderPush doesn't start until setUserConsent(true) is called.
+const onClick = (userConsent: boolean) => this.wonderPush.setUserConsent(userConsent);
+
+// Listen to notification clicks
+document.addEventListener('wonderpush.notificationOpen', function(event) {
+ console.log('Notification opened', event.notification);
+ if (event.notificationType === 'data') {
+ console.log('Silent notification', event.notification);
+ }
+});
+```
diff --git a/versioned_docs/version-v5/native/youtube-video-player.md b/versioned_docs/version-v5/native/youtube-video-player.md
deleted file mode 100644
index 7f4fdda4731..00000000000
--- a/versioned_docs/version-v5/native/youtube-video-player.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-sidebar_label: 'Youtube Video Player'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Youtube Video Player
-
-Plays YouTube videos in Native YouTube App
-
-
- github.com/ihadeed/CordovaYoutubeVideoPlayer
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-For Android 5.0+ you will need to add the following to config.xml
-
-```xml
-<preference name="YouTubeDataApiKey" value="[YOUR YOUTUBE API]" />
-```
-
-For more information: https://developers.google.com/youtube/v3/getting-started
-
-```tsx
-import { YoutubeVideoPlayer } from '@awesome-cordova-plugins/youtube-video-player/ngx';
-
-constructor(private youtube: YoutubeVideoPlayer) { }
-
-...
-
-
-this.youtube.openVideo('myvideoid');
-
-```
diff --git a/versioned_docs/version-v5/native/youtube-video-player.mdx b/versioned_docs/version-v5/native/youtube-video-player.mdx
new file mode 100644
index 00000000000..07aa545645e
--- /dev/null
+++ b/versioned_docs/version-v5/native/youtube-video-player.mdx
@@ -0,0 +1,95 @@
+---
+sidebar_label: 'Youtube Video Player'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Youtube Video Player
+
+Plays YouTube videos in Native YouTube App
+
+
+ github.com/ihadeed/CordovaYoutubeVideoPlayer
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+For Android 5.0+ you will need to add the following to config.xml
+
+```xml
+<preference name="YouTubeDataApiKey" value="[YOUR YOUTUBE API]" />
+```
+
+For more information: https://developers.google.com/youtube/v3/getting-started
+
+```tsx
+import { YoutubeVideoPlayer } from '@awesome-cordova-plugins/youtube-video-player/ngx';
+
+constructor(private youtube: YoutubeVideoPlayer) { }
+
+...
+
+
+this.youtube.openVideo('myvideoid');
+
+```
diff --git a/versioned_docs/version-v5/native/zbar.md b/versioned_docs/version-v5/native/zbar.md
deleted file mode 100644
index 345e75b2038..00000000000
--- a/versioned_docs/version-v5/native/zbar.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-sidebar_label: 'ZBar'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# ZBar
-
-The ZBar Scanner Plugin allows you to scan 2d barcodes.
-
-Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
-
-
- github.com/tjwoon/csZBar
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { ZBar, ZBarOptions } from '@awesome-cordova-plugins/zbar/ngx';
-
-constructor(private zbar: ZBar) { }
-
-...
-
-let options: ZBarOptions = {
- flash: 'off',
- drawSight: false
- }
-
-this.zbar.scan(options)
- .then(result => {
- console.log(result); // Scanned code
- })
- .catch(error => {
- console.log(error); // Error message
- });
-
-```
diff --git a/versioned_docs/version-v5/native/zbar.mdx b/versioned_docs/version-v5/native/zbar.mdx
new file mode 100644
index 00000000000..f3a41a17f68
--- /dev/null
+++ b/versioned_docs/version-v5/native/zbar.mdx
@@ -0,0 +1,97 @@
+---
+sidebar_label: 'ZBar'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# ZBar
+
+The ZBar Scanner Plugin allows you to scan 2d barcodes.
+
+Requires Cordova plugin: `cordova-plugin-cszbar`. For more info, please see the [zBar plugin docs](https://github.com/tjwoon/csZBar).
+
+
+ github.com/tjwoon/csZBar
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { ZBar, ZBarOptions } from '@awesome-cordova-plugins/zbar/ngx';
+
+constructor(private zbar: ZBar) { }
+
+...
+
+let options: ZBarOptions = {
+ flash: 'off',
+ drawSight: false
+ }
+
+this.zbar.scan(options)
+ .then(result => {
+ console.log(result); // Scanned code
+ })
+ .catch(error => {
+ console.log(error); // Error message
+ });
+
+```
diff --git a/versioned_docs/version-v5/native/zeroconf.md b/versioned_docs/version-v5/native/zeroconf.md
deleted file mode 100644
index d81faca0dbe..00000000000
--- a/versioned_docs/version-v5/native/zeroconf.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-sidebar_label: 'Zeroconf'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Zeroconf
-
-This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
-
-
- github.com/becvert/cordova-plugin-zeroconf
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Zeroconf } from '@awesome-cordova-plugins/zeroconf/ngx';
-
-constructor(private zeroconf: Zeroconf) { }
-
-...
-
-// watch for services of a specified type
-this.zeroconf.watch('_http._tcp.', 'local.').subscribe(result => {
- if (result.action == 'added') {
- console.log('service added', result.service);
- } else {
- console.log('service removed', result.service);
- }
-});
-
-// publish a zeroconf service of your own
-this.zeroconf.register('_http._tcp.', 'local.', 'Becvert\'s iPad', 80, {
- 'foo': 'bar'
-}).then(result => {
- console.log('Service registered', result.service);
-});
-
-
-// unregister your service
-this.zeroconf.unregister('_http._tcp.', 'local.', 'Becvert\'s iPad');
-```
diff --git a/versioned_docs/version-v5/native/zeroconf.mdx b/versioned_docs/version-v5/native/zeroconf.mdx
new file mode 100644
index 00000000000..9156f59e91d
--- /dev/null
+++ b/versioned_docs/version-v5/native/zeroconf.mdx
@@ -0,0 +1,101 @@
+---
+sidebar_label: 'Zeroconf'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Zeroconf
+
+This plugin allows you to browse and publish Zeroconf/Bonjour/mDNS services.
+
+
+ github.com/becvert/cordova-plugin-zeroconf
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Zeroconf } from '@awesome-cordova-plugins/zeroconf/ngx';
+
+constructor(private zeroconf: Zeroconf) { }
+
+...
+
+// watch for services of a specified type
+this.zeroconf.watch('_http._tcp.', 'local.').subscribe(result => {
+ if (result.action == 'added') {
+ console.log('service added', result.service);
+ } else {
+ console.log('service removed', result.service);
+ }
+});
+
+// publish a zeroconf service of your own
+this.zeroconf.register('_http._tcp.', 'local.', 'Becvert\'s iPad', 80, {
+ 'foo': 'bar'
+}).then(result => {
+ console.log('Service registered', result.service);
+});
+
+
+// unregister your service
+this.zeroconf.unregister('_http._tcp.', 'local.', 'Becvert\'s iPad');
+```
diff --git a/versioned_docs/version-v5/native/zoom.md b/versioned_docs/version-v5/native/zoom.md
deleted file mode 100644
index bb41d3c0e31..00000000000
--- a/versioned_docs/version-v5/native/zoom.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-sidebar_label: 'Zoom'
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsButton from '@components/page/native/DocsButton';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-
-# Zoom
-
-A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.
-
-
- github.com/zoom/zoom-sdk-ionic
-
-
-Stuck on a Cordova issue?
-
-
-
-
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
-
Contact Us Today!
-
- Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
- Learn More or if you're interested in an enterprise version of this plugin Contact Us
-
-
-
-
-## Supported Platforms
-
-- Android
-- iOS
-
-## Usage
-
-### React
-
-[Learn more about using Ionic Native components in React](../native-community.md#react)
-
-### Angular
-
-```tsx
-import { Zoom } from '@awesome-cordova-plugins/zoom';
-
-
-constructor(private zoomService: Zoom) { }
-
-...
-
-// Initialize Zoom SDK, need to be called when app fired up.
-this.zoomService.initialize(API_KEY, API_SECRET)
- .then((success: any) => console.log(success))
- .catch((error: any) => console.log(error));
-
-// Log user in with Zoom username and password.
-this.zoomService.login(userName, password)
- .then((success: any) => console.log(success))
- .catch((error: any) => console.log(error));
-
-// Log user out.
-this.zoomService.logout()
- .then((success: boolean) => console.log(success))
- .catch((error: any) => console.log(error));
-
-// Check whether user is logged in.
-this.zoomService.isLoggedIn()
- .then((success: boolean) => console.log(success))
- .catch((error: any) => console.log(error));
-
-// meeting options (Only available for Android)
-let options = {
-"no_driving_mode":true,
-"no_invite":true,
-"no_meeting_end_message":true,
-"no_titlebar":false,
-"no_bottom_toolbar":false,
-"no_dial_in_via_phone":true,
-"no_dial_out_to_phone":true,
-"no_disconnect_audio":true,
-"no_share":true,
-"no_audio":true,
-"no_video":true,
-"no_meeting_error_message":true
-};
-
-// Join meeting.
-this.zoomService.joinMeeting(meetingNumber, meetingPassword, displayName, options)
- .then((success: any) => console.log(success))
- .catch((error: any) => console.log(error));
-
-// Start an existing meeting for non-login user.
-this.zoomService.startMeetingWithZAK(meetingNumber, displayName, zoomToken, zoomAccessToken, userId, options)
- .then((success: any) => console.log(success))
- .catch((error: any) => console.log(error));
-
-// Start an existing meeting for logged in user.
-this.zoomService.startMeeting(meetingNumber, vanityId, options)
- .then((success: any) => console.log(success))
- .catch((error: any) => console.log(error));
-
-// Start an instant meeting for logged in user.
-this.zoomService.startInstantMeeting()
- .then((success: anu) => console.log(success))
- .catch((error: any) => console.log(error));
-
-// Set language.
-this.zoomService.setLanguage("en-US")
- .then((success: any) => console.log(success))
- .catch((error: any) => console.log(error));
-```
diff --git a/versioned_docs/version-v5/native/zoom.mdx b/versioned_docs/version-v5/native/zoom.mdx
new file mode 100644
index 00000000000..f1b8b7b83a6
--- /dev/null
+++ b/versioned_docs/version-v5/native/zoom.mdx
@@ -0,0 +1,143 @@
+---
+sidebar_label: 'Zoom'
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsButton from '@components/page/native/DocsButton';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Zoom
+
+A Cordova plugin to use Zoom Video Conferencing services on Cordova applications.
+
+
+ github.com/zoom/zoom-sdk-ionic
+
+
+Stuck on a Cordova issue?
+
+
+
+
If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.
+
Contact Us Today!
+
+ Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team.
+ Learn More or if you're interested in an enterprise version of this plugin Contact Us
+
+
+
+
+## Supported Platforms
+
+- Android
+- iOS
+
+## Usage
+
+### React
+
+[Learn more about using Ionic Native components in React](../native-community.mdx#react)
+
+### Angular
+
+```tsx
+import { Zoom } from '@awesome-cordova-plugins/zoom';
+
+
+constructor(private zoomService: Zoom) { }
+
+...
+
+// Initialize Zoom SDK, need to be called when app fired up.
+this.zoomService.initialize(API_KEY, API_SECRET)
+ .then((success: any) => console.log(success))
+ .catch((error: any) => console.log(error));
+
+// Log user in with Zoom username and password.
+this.zoomService.login(userName, password)
+ .then((success: any) => console.log(success))
+ .catch((error: any) => console.log(error));
+
+// Log user out.
+this.zoomService.logout()
+ .then((success: boolean) => console.log(success))
+ .catch((error: any) => console.log(error));
+
+// Check whether user is logged in.
+this.zoomService.isLoggedIn()
+ .then((success: boolean) => console.log(success))
+ .catch((error: any) => console.log(error));
+
+// meeting options (Only available for Android)
+let options = {
+"no_driving_mode":true,
+"no_invite":true,
+"no_meeting_end_message":true,
+"no_titlebar":false,
+"no_bottom_toolbar":false,
+"no_dial_in_via_phone":true,
+"no_dial_out_to_phone":true,
+"no_disconnect_audio":true,
+"no_share":true,
+"no_audio":true,
+"no_video":true,
+"no_meeting_error_message":true
+};
+
+// Join meeting.
+this.zoomService.joinMeeting(meetingNumber, meetingPassword, displayName, options)
+ .then((success: any) => console.log(success))
+ .catch((error: any) => console.log(error));
+
+// Start an existing meeting for non-login user.
+this.zoomService.startMeetingWithZAK(meetingNumber, displayName, zoomToken, zoomAccessToken, userId, options)
+ .then((success: any) => console.log(success))
+ .catch((error: any) => console.log(error));
+
+// Start an existing meeting for logged in user.
+this.zoomService.startMeeting(meetingNumber, vanityId, options)
+ .then((success: any) => console.log(success))
+ .catch((error: any) => console.log(error));
+
+// Start an instant meeting for logged in user.
+this.zoomService.startInstantMeeting()
+ .then((success: anu) => console.log(success))
+ .catch((error: any) => console.log(error));
+
+// Set language.
+this.zoomService.setLanguage("en-US")
+ .then((success: any) => console.log(success))
+ .catch((error: any) => console.log(error));
+```
diff --git a/versioned_docs/version-v5/react.md b/versioned_docs/version-v5/react.mdx
similarity index 100%
rename from versioned_docs/version-v5/react.md
rename to versioned_docs/version-v5/react.mdx
diff --git a/versioned_docs/version-v5/react/config.md b/versioned_docs/version-v5/react/config.md
deleted file mode 100644
index 14eb3641e2f..00000000000
--- a/versioned_docs/version-v5/react/config.md
+++ /dev/null
@@ -1,112 +0,0 @@
-# Config
-
-Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.
-
-## Global Config
-
-To override the initial Ionic config for the app, import the `setupConfig` method from `@ionic/react`, and call it before you render any Ionic components (including `IonApp`).
-
-```tsx
-setupConfig({
- rippleEffect: false,
- mode: 'md',
-});
-```
-
-In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design.
-
-## Per-Platform Config
-
-Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.
-
-In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
-The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values.
-
-```tsx
-import { isPlatform, setupConfig } from '@ionic/react';
-
-setupConfig({
- animated: !isPlatform('mobileweb'),
-});
-```
-
-The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
-
-```tsx
-import { isPlatform, setupConfig } from '@ionic/react';
-
-const getConfig = () => {
- if (isPlatform('hybrid')) {
- return {
- backButtonText: 'Previous',
- tabButtonLayout: 'label-hide',
- };
- }
-
- return {
- menuIcon: 'ellipsis-vertical',
- };
-};
-
-setupConfig(getConfig());
-```
-
-Finally, this example allows you to accumulate a config object based upon different platform requirements:
-
-```tsx
-import { isPlatform, setupConfig } from '@ionic/react';
-
-const getConfig = () => {
- let config = {
- animated: false,
- };
-
- if (isPlatform('iphone')) {
- config = {
- ...config,
- backButtonText: 'Previous',
- };
- }
-
- return config;
-};
-setupConfig(getConfig());
-```
-
-## Config Options
-
-Below is a list of config options that Ionic uses.
-
-| Config | Type | Description |
-| ------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------- |
-| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". |
-| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". |
-| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". |
-| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". |
-| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. |
-| `backButtonIcon` | `string` | Overrides the default icon in all `` components. |
-| `backButtonText` | `string` | Overrides the default text in all `` components. |
-| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. |
-| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. |
-| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". |
-| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". |
-| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. |
-| `menuIcon` | `string` | Overrides the default icon in all `` components. |
-| `menuType` | `string` | Overrides the default menu type for all `` components. |
-| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". |
-| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". |
-| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. |
-| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. |
-| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". |
-| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". |
-| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". |
-| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". |
-| `refreshingIcon` | `string` | Overrides the default icon in all `` components. |
-| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. |
-| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. |
-| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. |
-| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. |
-| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. |
-| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. |
-| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". |
-| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". |
diff --git a/versioned_docs/version-v5/react/config.mdx b/versioned_docs/version-v5/react/config.mdx
new file mode 100644
index 00000000000..4763928a5b5
--- /dev/null
+++ b/versioned_docs/version-v5/react/config.mdx
@@ -0,0 +1,112 @@
+# Config
+
+Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.
+
+## Global Config
+
+To override the initial Ionic config for the app, import the `setupConfig` method from `@ionic/react`, and call it before you render any Ionic components (including `IonApp`).
+
+```tsx
+setupConfig({
+ rippleEffect: false,
+ mode: 'md',
+});
+```
+
+In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design.
+
+## Per-Platform Config
+
+Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.
+
+In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
+The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.mdx#platforms) for a list of possible values.
+
+```tsx
+import { isPlatform, setupConfig } from '@ionic/react';
+
+setupConfig({
+ animated: !isPlatform('mobileweb'),
+});
+```
+
+The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
+
+```tsx
+import { isPlatform, setupConfig } from '@ionic/react';
+
+const getConfig = () => {
+ if (isPlatform('hybrid')) {
+ return {
+ backButtonText: 'Previous',
+ tabButtonLayout: 'label-hide',
+ };
+ }
+
+ return {
+ menuIcon: 'ellipsis-vertical',
+ };
+};
+
+setupConfig(getConfig());
+```
+
+Finally, this example allows you to accumulate a config object based upon different platform requirements:
+
+```tsx
+import { isPlatform, setupConfig } from '@ionic/react';
+
+const getConfig = () => {
+ let config = {
+ animated: false,
+ };
+
+ if (isPlatform('iphone')) {
+ config = {
+ ...config,
+ backButtonText: 'Previous',
+ };
+ }
+
+ return config;
+};
+setupConfig(getConfig());
+```
+
+## Config Options
+
+Below is a list of config options that Ionic uses.
+
+| Config | Type | Description |
+| ------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------- |
+| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". |
+| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". |
+| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". |
+| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". |
+| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. |
+| `backButtonIcon` | `string` | Overrides the default icon in all `` components. |
+| `backButtonText` | `string` | Overrides the default text in all `` components. |
+| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. |
+| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. |
+| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". |
+| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". |
+| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. |
+| `menuIcon` | `string` | Overrides the default icon in all `` components. |
+| `menuType` | `string` | Overrides the default menu type for all `` components. |
+| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". |
+| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". |
+| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. |
+| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. |
+| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". |
+| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". |
+| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". |
+| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". |
+| `refreshingIcon` | `string` | Overrides the default icon in all `` components. |
+| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. |
+| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. |
+| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. |
+| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. |
+| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. |
+| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. |
+| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". |
+| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". |
diff --git a/versioned_docs/version-v5/react/lifecycle.md b/versioned_docs/version-v5/react/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/lifecycle.md
rename to versioned_docs/version-v5/react/lifecycle.mdx
diff --git a/versioned_docs/version-v5/react/navigation.md b/versioned_docs/version-v5/react/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/navigation.md
rename to versioned_docs/version-v5/react/navigation.mdx
diff --git a/versioned_docs/version-v5/react/overlays.md b/versioned_docs/version-v5/react/overlays.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/overlays.md
rename to versioned_docs/version-v5/react/overlays.mdx
diff --git a/versioned_docs/version-v5/react/performance.md b/versioned_docs/version-v5/react/performance.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/performance.md
rename to versioned_docs/version-v5/react/performance.mdx
diff --git a/versioned_docs/version-v5/react/platform.md b/versioned_docs/version-v5/react/platform.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/platform.md
rename to versioned_docs/version-v5/react/platform.mdx
diff --git a/versioned_docs/version-v5/react/pwa.md b/versioned_docs/version-v5/react/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/pwa.md
rename to versioned_docs/version-v5/react/pwa.mdx
diff --git a/versioned_docs/version-v5/react/quickstart.md b/versioned_docs/version-v5/react/quickstart.md
deleted file mode 100644
index 750b84bd4da..00000000000
--- a/versioned_docs/version-v5/react/quickstart.md
+++ /dev/null
@@ -1,408 +0,0 @@
----
-sidebar_label: Quickstart
----
-
-# Intro Ionic React Quickstart
-
-## What is Ionic Framework?
-
-First off, if you're new here, welcome! Ionic is a free and open source component library for building apps that run on iOS, Android, Electron, and the Web. You write your app once using familiar technologies (HTML, CSS, JavaScript) and deploy to any platform.
-
-Along with the UI components, Ionic also provides a command line tool for creating new apps, as well as deploying to the various platforms we support.
-
-In this guide, we'll go over the basics of both React and Ionic, including any Ionic specific features. If you're familiar with React, enjoy the guide and learn something new about Ionic. If you're not familiar with either, no worries! This guide will cover the basics and provide enough information to get an app up and running.
-
-## Creating a project with the Ionic CLI
-
-To begin, let's install the latest version of the Ionic CLI.
-
-```shell
-npm install -g @ionic/cli
-```
-
-From here, the global command `ionic` will allow for the creation of a React project with Ionic and any other dependencies. To create a new project, run the following command:
-
-```shell
-ionic start myApp blank --type=react
-cd myApp
-```
-
-From here, we run `ionic serve` and have our project running in the browser.
-
-## A look at a React Component
-
-The base of our app will be in the `src` directory, and the main entry point will be our `index.tsx`. If we open our project in a code editor and open `src/index.tsx`, we should see the following:
-
-```tsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(, document.getElementById('root'));
-```
-
-So what's going on here? Well, the first three lines are pulling in some dependencies. The first being React itself. This allows us to write components in an HTML-like syntax called JSX. We'll talk about JSX a bit later on.
-
-The second import is for ReactDOM. The `ReactDOM.render` method is the browser/DOM specific way of taking our components and rendering it to a specified DOM node.
-
-The last import is the root component for our app, simply named `App`. This is our first React component and will be used in the bootstrapping process for our React app.
-
-If we open `App.tsx`, we should see the following.
-
-```tsx
-import React from 'react';
-import { Route } from 'react-router-dom';
-import { IonApp, IonRouterOutlet } from '@ionic/react';
-import { IonReactRouter } from '@ionic/react-router';
-import Home from './pages/Home';
-
-/* Core CSS required for Ionic components to work properly */
-import '@ionic/react/css/core.css';
-
-const App: React.FC = () => (
-
-
-
-
- } />
-
-
-
-);
-```
-
-At first glance, it may look like a lot is going on, so let's break it down, starting with the first group of imports.
-
-```tsx
-import React from 'react';
-import { Route } from 'react-router-dom';
-import { IonApp, IonRouterOutlet } from '@ionic/react';
-import { IonReactRouter } from '@ionic/react-router';
-import Home from './pages/Home';
-```
-
-Similar to `index.tsx`, we first must import React to use JSX.
-
-The next import is from `react-router-dom`. We're importing Route, which is how we’ll match the app’s URL with the components we want to render
-
-Following ReactRouter, we next have our first imports for Ionic. To use a component in React, you must first import it. So for Ionic, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our App component, we're only using `IonApp`, `IonRouterOutlet`, and `IonReactRouter`.
-
-`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.md).
-
-The last important import is the `Home` component import. This is a component that we will be able to navigate to in our app. We'll look at the navigation part a bit later.
-
-The CSS import is pulling in the utility styles from Ionic for things like padding, typography, etc.
-
-After reviewing all of the imports, we now get to our first look at a React Component:
-
-```tsx
-const App: React.FC = () => (
-
-
-
-
- } />
-
-
-
-);
-```
-
-This React component sets up the initial routing for our app, as well as include some core Ionic components for animations and layout (IonRouterOutlet and IonApp). One thing that stands out is that in React, to do data-binding, the value is passed in curly braces (`{}`). So in the `Route` component, we can set the value of `component` to the `Home` component from earlier. This is how React will know that that value is not a string, but a reference to a component.
-
-:::note
-What's important to note here is that these are all standard React DOM libraries, meaning there's no custom integration layer or transpilation step.
-:::
-
-## A component with style
-
-Now the `App` does not really have a lot to modify here. It's a basic example of a container component. With the Router logic set, all it's responsible for is to render a component that matches the given URL route. Since we already have one component/router setup, let's go ahead and modify our `Home` component.
-
-Currently, the `Home` component looks like so:
-
-
-
-```tsx
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import React from 'react';
-
-const Home: React.FC = () => {
- return (
-
-
-
- Ionic Blank
-
-
-
- The world is your oyster.
-
- If you get lost, the{' '}
-
- docs
- {' '}
- will be your guide.
-
-
-
- );
-};
-```
-
-Much like the `App` component we started with, we have some imports for specific Ionic components, an import for React, and then our React component itself.
-
-`IonPage` is the base component for all pages (a component with a route/URL), and includes some common building blocks of a full-screen component, like header, title, and content components.
-
-:::note
-When creating your own pages, don't forget to have `IonPage` be the root component for them. Having `IonPage` be the root component is important because it helps ensure transitions work properly as well as provides the base CSS the Ionic components rely on.
-:::
-
-`IonHeader` is a bit self explanatory. It's a component that is meant to exist at the top of the page. `IonHeader` itself doesn't do much by itself, aside from handling some flexbox-based layout. It's meant to hold other components, like `IonToolbar` or `IonSearchbar`.
-
-`IonContent` is, as its name suggests, the main content area for our page. It's responsible for providing the scrollable content that users will interact with, plus any scroll events that could be used in an app.
-
-Our current content is relatively simple but does not contain anything that could be used in a real app, so let's change that.
-
-:::note
-For brevity, we're excluding repeating part of our component, like the function declaration or import statements for other components.
-:::
-
-```tsx
-
- ...
-
-
-
-
-
- Create Idea
- Run Idea by Brandy
-
-
- 5 Days
-
-
-
-
-
-```
-
-Here in our `IonContent`, we're adding an `IonList` and a much more involved `IonItem` component. Let's look at `IonItem`, as it's the centerpiece here.
-
-```tsx
-
-
-
- Create Idea
- Run Idea by Brandy
-
-
- 5 Days
-
-
-```
-
-Item is important as it clearly shows the mix of React concepts and Web Component concepts. The first clear example of a React concept is self-closing tags for React Components in `IonCheckbox`. This is just a simpler way of writing components that do not contain any child content.
-
-From the Web Components side, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a React API, but a web standards API.
-
-Let's look at another component from Ionic, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we'll need three components: a FAB, a FAB Button, and an Icon.
-
-```tsx
-import { add } from ‘ionicons/icons’;
-…
-
-
-
- ...
-
-
-
-
-
-
-
-
-
-```
-
-On our main `IonFab`, we're setting its positioning with the vertical and horizontal attributes. We're also setting the render location to "fixed" with the slot attribute. This will tell `IonFab` to render outside of the scrollable content in `IonContent`.
-
-Now let's wire up a click handler to this. What we want to do is when we click the button, we'll navigate to a new page (which we'll create in a moment). To do this, we'll need to get access to React Router's navigation API. Thankfully since this is rendered in a Router/Route context, we have access to React Routers APIs via Props passed to our Home component.
-
-```tsx
-import { add } from 'ionicons/icons';
-...
-const Home: React.FC = (props) => {
- return (
-
- ...
-
- ...
-
- props.history.push('/new')}>
-
-
-
-
-
- );
-}
-export default Home;
-```
-
-In our component declaration, we're passing in `props` which is of type `RouteComponentProps` (imported from `react-router`). This `props` object gives us access to the history API from React Router, allowing us to push a new route onto the navigation stack. On our `IonFabButton`, we can add a click handler, and just call `props.history.push` and pass in the new route. In this case, we'll navigate to `new`.
-
-```tsx
- props.history.push('/new')} >
-```
-
-## Creating a new Route
-
-Now that we have the pieces in place to navigate in our app, we need to create a new component and add the new route to our router declaration. Let's open our `App.tsx` file and add the new route.
-
-```tsx
-...
-import Home from './pages/Home';
-
-import NewItem from './pages/NewItem';
-...
-const App: React.FC = () => {
- const isAuthed = true;
- return (
-
-
-
-
-
-
-
-
-
- );
-}
-export default App;
-```
-
-With our router now having an entry for the route `/new`, we'll create the component needed, `NewItem`. This will exist in `src/pages/NewItem.tsx`
-
-Let's fill the `NewItem.tsx` with some placeholder content for the moment.
-
-```tsx
-import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import React from 'react';
-
-const NewItem: React.FC = () => {
- return (
-
-
-
-
-
-
- New Item
-
-
-
-
- );
-};
-export default NewItem;
-```
-
-:::note
-Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information.
-:::
-
-The content here is pretty straight forward and should look similar to the `Home` component. What is new is the `IonBackButton` component. This is used to navigate back to the previous route. Pretty straight forward? Ok, but what if we reload the page?
-
-Well, in this case, the in-memory history is lost, so the back button disappears. To address this, we can set the `defaultHref` attribute value to the URL we want to navigate to if there is no history.
-
-```tsx
-return (
-
-
-
-
-
-
- New Item
-
-
-
-
-);
-```
-
-Here, when we reload, if there is no app history present, we'll be able to navigate back to our home route.
-
-## Build a Native App
-
-We now have the basics of an Ionic React app down, including some UI components and navigation. The great thing about Ionic’s components is that they work anywhere, including iOS, Android, and PWAs. To deploy to mobile, desktop, and beyond, we use Ionic’s cross-platform app runtime [Capacitor](https://capacitorjs.com). It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible while accessing rich native device features on platforms that support them.
-
-Adding native functionality is easy. First, add Capacitor to your project:
-
-```shell
-ionic integrations enable capacitor
-```
-
-Next, build the project, then add your platform of choice:
-
-```shell
-ionic build
-ionic cap add ios
-ionic cap add android
-```
-
-We use the standard native IDEs (Xcode and Android Studio) to open, build, and run the iOS and Android projects:
-
-```shell
-ionic cap open ios
-ionic cap open android
-```
-
-Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
-
-Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are available. There’s some great stuff, including the [Camera API](https://capacitorjs.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
-
-```tsx
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
-import React, { useState } from 'react';
-import { Plugins, CameraResultType } from '@capacitor/core';
-
-const Home: React.FC = () => {
- const { Camera } = Plugins;
- const [photo, setPhoto] = useState();
- const takePhoto = async () => {
- const image = await Camera.getPhoto({
- quality: 90,
- allowEditing: true,
- resultType: CameraResultType.Uri,
- });
- setPhoto(image.webPath);
- };
- return (
-
-
-
- Ionic Blank
-
-
-
- 
- Take Photo
-
-
- );
-};
-
-export default Home;
-```
-
-## Where to go from here
-
-This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.md).
-
-For a more detailed look at Ionic’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on React, review the [React Docs](https://reactjs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/).
-
-Happy app building! 🎉
diff --git a/versioned_docs/version-v5/react/quickstart.mdx b/versioned_docs/version-v5/react/quickstart.mdx
new file mode 100644
index 00000000000..83ca7380f60
--- /dev/null
+++ b/versioned_docs/version-v5/react/quickstart.mdx
@@ -0,0 +1,408 @@
+---
+sidebar_label: Quickstart
+---
+
+# Intro Ionic React Quickstart
+
+## What is Ionic Framework?
+
+First off, if you're new here, welcome! Ionic is a free and open source component library for building apps that run on iOS, Android, Electron, and the Web. You write your app once using familiar technologies (HTML, CSS, JavaScript) and deploy to any platform.
+
+Along with the UI components, Ionic also provides a command line tool for creating new apps, as well as deploying to the various platforms we support.
+
+In this guide, we'll go over the basics of both React and Ionic, including any Ionic specific features. If you're familiar with React, enjoy the guide and learn something new about Ionic. If you're not familiar with either, no worries! This guide will cover the basics and provide enough information to get an app up and running.
+
+## Creating a project with the Ionic CLI
+
+To begin, let's install the latest version of the Ionic CLI.
+
+```shell
+npm install -g @ionic/cli
+```
+
+From here, the global command `ionic` will allow for the creation of a React project with Ionic and any other dependencies. To create a new project, run the following command:
+
+```shell
+ionic start myApp blank --type=react
+cd myApp
+```
+
+From here, we run `ionic serve` and have our project running in the browser.
+
+## A look at a React Component
+
+The base of our app will be in the `src` directory, and the main entry point will be our `index.tsx`. If we open our project in a code editor and open `src/index.tsx`, we should see the following:
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(, document.getElementById('root'));
+```
+
+So what's going on here? Well, the first three lines are pulling in some dependencies. The first being React itself. This allows us to write components in an HTML-like syntax called JSX. We'll talk about JSX a bit later on.
+
+The second import is for ReactDOM. The `ReactDOM.render` method is the browser/DOM specific way of taking our components and rendering it to a specified DOM node.
+
+The last import is the root component for our app, simply named `App`. This is our first React component and will be used in the bootstrapping process for our React app.
+
+If we open `App.tsx`, we should see the following.
+
+```tsx
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { IonApp, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import Home from './pages/Home';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+const App: React.FC = () => (
+
+
+
+
+ } />
+
+
+
+);
+```
+
+At first glance, it may look like a lot is going on, so let's break it down, starting with the first group of imports.
+
+```tsx
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { IonApp, IonRouterOutlet } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import Home from './pages/Home';
+```
+
+Similar to `index.tsx`, we first must import React to use JSX.
+
+The next import is from `react-router-dom`. We're importing Route, which is how we’ll match the app’s URL with the components we want to render
+
+Following ReactRouter, we next have our first imports for Ionic. To use a component in React, you must first import it. So for Ionic, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our App component, we're only using `IonApp`, `IonRouterOutlet`, and `IonReactRouter`.
+
+`IonReactRouter` is a component that wraps ReactRouter’s BrowserRouter component. It more or less behaves the same as BrowserRouter with a few differences. We have a deeper guide that goes over these differences in our [React Navigation Docs](navigation.mdx).
+
+The last important import is the `Home` component import. This is a component that we will be able to navigate to in our app. We'll look at the navigation part a bit later.
+
+The CSS import is pulling in the utility styles from Ionic for things like padding, typography, etc.
+
+After reviewing all of the imports, we now get to our first look at a React Component:
+
+```tsx
+const App: React.FC = () => (
+
+
+
+
+ } />
+
+
+
+);
+```
+
+This React component sets up the initial routing for our app, as well as include some core Ionic components for animations and layout (IonRouterOutlet and IonApp). One thing that stands out is that in React, to do data-binding, the value is passed in curly braces (`{}`). So in the `Route` component, we can set the value of `component` to the `Home` component from earlier. This is how React will know that that value is not a string, but a reference to a component.
+
+:::note
+What's important to note here is that these are all standard React DOM libraries, meaning there's no custom integration layer or transpilation step.
+:::
+
+## A component with style
+
+Now the `App` does not really have a lot to modify here. It's a basic example of a container component. With the Router logic set, all it's responsible for is to render a component that matches the given URL route. Since we already have one component/router setup, let's go ahead and modify our `Home` component.
+
+Currently, the `Home` component looks like so:
+
+
+
+```tsx
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import React from 'react';
+
+const Home: React.FC = () => {
+ return (
+
+
+
+ Ionic Blank
+
+
+
+ The world is your oyster.
+
+ If you get lost, the{' '}
+
+ docs
+ {' '}
+ will be your guide.
+
+
+
+ );
+};
+```
+
+Much like the `App` component we started with, we have some imports for specific Ionic components, an import for React, and then our React component itself.
+
+`IonPage` is the base component for all pages (a component with a route/URL), and includes some common building blocks of a full-screen component, like header, title, and content components.
+
+:::note
+When creating your own pages, don't forget to have `IonPage` be the root component for them. Having `IonPage` be the root component is important because it helps ensure transitions work properly as well as provides the base CSS the Ionic components rely on.
+:::
+
+`IonHeader` is a bit self explanatory. It's a component that is meant to exist at the top of the page. `IonHeader` itself doesn't do much by itself, aside from handling some flexbox-based layout. It's meant to hold other components, like `IonToolbar` or `IonSearchbar`.
+
+`IonContent` is, as its name suggests, the main content area for our page. It's responsible for providing the scrollable content that users will interact with, plus any scroll events that could be used in an app.
+
+Our current content is relatively simple but does not contain anything that could be used in a real app, so let's change that.
+
+:::note
+For brevity, we're excluding repeating part of our component, like the function declaration or import statements for other components.
+:::
+
+```tsx
+
+ ...
+
+
+
+
+
+ Create Idea
+ Run Idea by Brandy
+
+
+ 5 Days
+
+
+
+
+
+```
+
+Here in our `IonContent`, we're adding an `IonList` and a much more involved `IonItem` component. Let's look at `IonItem`, as it's the centerpiece here.
+
+```tsx
+
+
+
+ Create Idea
+ Run Idea by Brandy
+
+
+ 5 Days
+
+
+```
+
+Item is important as it clearly shows the mix of React concepts and Web Component concepts. The first clear example of a React concept is self-closing tags for React Components in `IonCheckbox`. This is just a simpler way of writing components that do not contain any child content.
+
+From the Web Components side, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a React API, but a web standards API.
+
+Let's look at another component from Ionic, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we'll need three components: a FAB, a FAB Button, and an Icon.
+
+```tsx
+import { add } from ‘ionicons/icons’;
+…
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+```
+
+On our main `IonFab`, we're setting its positioning with the vertical and horizontal attributes. We're also setting the render location to "fixed" with the slot attribute. This will tell `IonFab` to render outside of the scrollable content in `IonContent`.
+
+Now let's wire up a click handler to this. What we want to do is when we click the button, we'll navigate to a new page (which we'll create in a moment). To do this, we'll need to get access to React Router's navigation API. Thankfully since this is rendered in a Router/Route context, we have access to React Routers APIs via Props passed to our Home component.
+
+```tsx
+import { add } from 'ionicons/icons';
+...
+const Home: React.FC = (props) => {
+ return (
+
+ ...
+
+ ...
+
+ props.history.push('/new')}>
+
+
+
+
+
+ );
+}
+export default Home;
+```
+
+In our component declaration, we're passing in `props` which is of type `RouteComponentProps` (imported from `react-router`). This `props` object gives us access to the history API from React Router, allowing us to push a new route onto the navigation stack. On our `IonFabButton`, we can add a click handler, and just call `props.history.push` and pass in the new route. In this case, we'll navigate to `new`.
+
+```tsx
+ props.history.push('/new')} >
+```
+
+## Creating a new Route
+
+Now that we have the pieces in place to navigate in our app, we need to create a new component and add the new route to our router declaration. Let's open our `App.tsx` file and add the new route.
+
+```tsx
+...
+import Home from './pages/Home';
+
+import NewItem from './pages/NewItem';
+...
+const App: React.FC = () => {
+ const isAuthed = true;
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+export default App;
+```
+
+With our router now having an entry for the route `/new`, we'll create the component needed, `NewItem`. This will exist in `src/pages/NewItem.tsx`
+
+Let's fill the `NewItem.tsx` with some placeholder content for the moment.
+
+```tsx
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import React from 'react';
+
+const NewItem: React.FC = () => {
+ return (
+
+
+
+
+
+
+ New Item
+
+
+
+
+ );
+};
+export default NewItem;
+```
+
+:::note
+Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.mdx#ionpage) for more information.
+:::
+
+The content here is pretty straight forward and should look similar to the `Home` component. What is new is the `IonBackButton` component. This is used to navigate back to the previous route. Pretty straight forward? Ok, but what if we reload the page?
+
+Well, in this case, the in-memory history is lost, so the back button disappears. To address this, we can set the `defaultHref` attribute value to the URL we want to navigate to if there is no history.
+
+```tsx
+return (
+
+
+
+
+
+
+ New Item
+
+
+
+
+);
+```
+
+Here, when we reload, if there is no app history present, we'll be able to navigate back to our home route.
+
+## Build a Native App
+
+We now have the basics of an Ionic React app down, including some UI components and navigation. The great thing about Ionic’s components is that they work anywhere, including iOS, Android, and PWAs. To deploy to mobile, desktop, and beyond, we use Ionic’s cross-platform app runtime [Capacitor](https://capacitorjs.com). It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible while accessing rich native device features on platforms that support them.
+
+Adding native functionality is easy. First, add Capacitor to your project:
+
+```shell
+ionic integrations enable capacitor
+```
+
+Next, build the project, then add your platform of choice:
+
+```shell
+ionic build
+ionic cap add ios
+ionic cap add android
+```
+
+We use the standard native IDEs (Xcode and Android Studio) to open, build, and run the iOS and Android projects:
+
+```shell
+ionic cap open ios
+ionic cap open android
+```
+
+Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
+
+Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are available. There’s some great stuff, including the [Camera API](https://capacitorjs.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
+
+```tsx
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
+import React, { useState } from 'react';
+import { Plugins, CameraResultType } from '@capacitor/core';
+
+const Home: React.FC = () => {
+ const { Camera } = Plugins;
+ const [photo, setPhoto] = useState();
+ const takePhoto = async () => {
+ const image = await Camera.getPhoto({
+ quality: 90,
+ allowEditing: true,
+ resultType: CameraResultType.Uri,
+ });
+ setPhoto(image.webPath);
+ };
+ return (
+
+
+
+ Ionic Blank
+
+
+
+
+ Take Photo
+
+
+ );
+};
+
+export default Home;
+```
+
+## Where to go from here
+
+This guide covered the basics of creating an Ionic React app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic apps with React and Capacitor, follow our [First App guide](your-first-app.mdx).
+
+For a more detailed look at Ionic’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on React, review the [React Docs](https://reactjs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/).
+
+Happy app building! 🎉
diff --git a/versioned_docs/version-v5/react/storage.md b/versioned_docs/version-v5/react/storage.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/storage.md
rename to versioned_docs/version-v5/react/storage.mdx
diff --git a/versioned_docs/version-v5/react/testing.md b/versioned_docs/version-v5/react/testing.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/testing.md
rename to versioned_docs/version-v5/react/testing.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app.md b/versioned_docs/version-v5/react/your-first-app.md
deleted file mode 100644
index 3ad5c20a441..00000000000
--- a/versioned_docs/version-v5/react/your-first-app.md
+++ /dev/null
@@ -1,199 +0,0 @@
----
-title: 'React Apps | Build Your First Ionic Framework React Application'
-description: Build your first Ionic React App. With one codebase, you can build an Ionic Framework application for any platform using just HTML, CSS, and JavaScript.
-sidebar_label: Build Your First App
----
-
-# Your First Ionic App: React
-
-The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
-
-Here’s the finished app running on all 3 platforms:
-
-
-
-## What We'll Build
-
-We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device.
-
-Highlights include:
-
-- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
-- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
-
-Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-react).
-
-## Download Required Tools
-
-Download and install these right away to ensure an optimal Ionic development experience:
-
-- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
-- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
-- **Command-line interface/terminal (CLI)**:
- - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
- CLI, running in Administrator mode.
- - **Mac/Linux** users, virtually any terminal will work.
-
-## Install Ionic Tooling
-
-Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens:
-
-:::note
-To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
-:::
-
-```shell
-npm install -g @ionic/cli native-run cordova-res
-```
-
-:::note
-The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
-
-Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
-:::
-
-## Create an App
-
-Next, create an Ionic React app that uses the “Tabs” starter template and adds Capacitor for native functionality:
-
-```shell
-ionic start photo-gallery tabs --type=react --capacitor
-```
-
-This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
-
-Next, change into the app folder:
-
-```shell
-cd photo-gallery
-```
-
-Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
-
-```shell
-npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
-```
-
-### PWA Elements
-
-Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
-
-It's a separate dependency, so install it next:
-
-```shell
-npm install @ionic/pwa-elements
-```
-
-After installation, open up the project in your code editor of choice.
-
-Next, import `@ionic/pwa-elements` by editing `src/index.tsx`.
-
-```tsx
-import { defineCustomElements } from '@ionic/pwa-elements/loader';
-
-// Call the element loader after the platform has been bootstrapped
-defineCustomElements(window);
-```
-
-That’s it! Now for the fun part - let’s see the app in action.
-
-## Run the App
-
-Run this command in your shell:
-
-```shell
-ionic serve
-```
-
-And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
-
-## Photo Gallery!!!
-
-There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
-
-
-Open `/src/pages/Tab2.tsx`. We see:
-
-```tsx
-
-
-
- Tab 2
-
-
-
-
-
-
-```
-
-`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
-
-```tsx
-Photo Gallery
-```
-
-We put the visual aspects of our app into ``. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports at the top of the page to include the Camera icon as well as some of the Ionic components we'll use shortly:
-
-```tsx
-import { camera, trash, close } from 'ionicons/icons';
-import {
- IonContent,
- IonHeader,
- IonPage,
- IonTitle,
- IonToolbar,
- IonFab,
- IonFabButton,
- IonIcon,
- IonGrid,
- IonRow,
- IonCol,
- IonImg,
- IonActionSheet,
-} from '@ionic/react';
-```
-
-Then, add the FAB to the bottom of the page. Use the camera image as the icon, and call the `takePhoto()` function when this button is clicked (to be implemented soon):
-
-```tsx
-
-
- takePhoto()}>
-
-
-
-
-```
-
-We’ll be creating the `takePhoto` method and the logic to use the Camera and other native features in a moment.
-
-Next, open `src/App.tsx`, remove the `ellipse` icon from the import and import the `images` icon instead:
-
-```tsx
-import { images, square, triangle } from 'ionicons/icons';
-```
-
-Within the tab bar (``), change the label to “Photos” and the `ellipse` icon to `images` for the middle tab button:
-
-```tsx
-
-
- Photos
-
-```
-
-:::note
-In Ionic React, icons are imported individually from `ionicons/icons` and set to the icon prop.
-:::
-
-That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.
diff --git a/versioned_docs/version-v5/react/your-first-app.mdx b/versioned_docs/version-v5/react/your-first-app.mdx
new file mode 100644
index 00000000000..10e4da21b01
--- /dev/null
+++ b/versioned_docs/version-v5/react/your-first-app.mdx
@@ -0,0 +1,199 @@
+---
+title: 'React Apps | Build Your First Ionic Framework React Application'
+description: Build your first Ionic React App. With one codebase, you can build an Ionic Framework application for any platform using just HTML, CSS, and JavaScript.
+sidebar_label: Build Your First App
+---
+
+# Your First Ionic App: React
+
+The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
+
+Here’s the finished app running on all 3 platforms:
+
+
+
+## What We'll Build
+
+We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device.
+
+Highlights include:
+
+- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
+- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
+
+Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-react).
+
+## Download Required Tools
+
+Download and install these right away to ensure an optimal Ionic development experience:
+
+- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
+- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
+- **Command-line interface/terminal (CLI)**:
+ - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
+ CLI, running in Administrator mode.
+ - **Mac/Linux** users, virtually any terminal will work.
+
+## Install Ionic Tooling
+
+Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens:
+
+:::note
+To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
+:::
+
+```shell
+npm install -g @ionic/cli native-run cordova-res
+```
+
+:::note
+The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
+
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.mdx#resolving-permission-errors) for more information.
+:::
+
+## Create an App
+
+Next, create an Ionic React app that uses the “Tabs” starter template and adds Capacitor for native functionality:
+
+```shell
+ionic start photo-gallery tabs --type=react --capacitor
+```
+
+This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
+
+Next, change into the app folder:
+
+```shell
+cd photo-gallery
+```
+
+Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
+
+```shell
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
+```
+
+### PWA Elements
+
+Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
+
+It's a separate dependency, so install it next:
+
+```shell
+npm install @ionic/pwa-elements
+```
+
+After installation, open up the project in your code editor of choice.
+
+Next, import `@ionic/pwa-elements` by editing `src/index.tsx`.
+
+```tsx
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+
+// Call the element loader after the platform has been bootstrapped
+defineCustomElements(window);
+```
+
+That’s it! Now for the fun part - let’s see the app in action.
+
+## Run the App
+
+Run this command in your shell:
+
+```shell
+ionic serve
+```
+
+And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
+
+## Photo Gallery!!!
+
+There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
+
+
+
+Open `/src/pages/Tab2.tsx`. We see:
+
+```tsx
+
+
+
+ Tab 2
+
+
+
+
+
+
+```
+
+`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
+
+```tsx
+Photo Gallery
+```
+
+We put the visual aspects of our app into ``. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports at the top of the page to include the Camera icon as well as some of the Ionic components we'll use shortly:
+
+```tsx
+import { camera, trash, close } from 'ionicons/icons';
+import {
+ IonContent,
+ IonHeader,
+ IonPage,
+ IonTitle,
+ IonToolbar,
+ IonFab,
+ IonFabButton,
+ IonIcon,
+ IonGrid,
+ IonRow,
+ IonCol,
+ IonImg,
+ IonActionSheet,
+} from '@ionic/react';
+```
+
+Then, add the FAB to the bottom of the page. Use the camera image as the icon, and call the `takePhoto()` function when this button is clicked (to be implemented soon):
+
+```tsx
+
+
+ takePhoto()}>
+
+
+
+
+```
+
+We’ll be creating the `takePhoto` method and the logic to use the Camera and other native features in a moment.
+
+Next, open `src/App.tsx`, remove the `ellipse` icon from the import and import the `images` icon instead:
+
+```tsx
+import { images, square, triangle } from 'ionicons/icons';
+```
+
+Within the tab bar (``), change the label to “Photos” and the `ellipse` icon to `images` for the middle tab button:
+
+```tsx
+
+
+ Photos
+
+```
+
+:::note
+In Ionic React, icons are imported individually from `ionicons/icons` and set to the icon prop.
+:::
+
+That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.
diff --git a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
rename to versioned_docs/version-v5/react/your-first-app/2-taking-photos.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app/3-saving-photos.md b/versioned_docs/version-v5/react/your-first-app/3-saving-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/3-saving-photos.md
rename to versioned_docs/version-v5/react/your-first-app/3-saving-photos.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/react/your-first-app/4-loading-photos.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/4-loading-photos.md
rename to versioned_docs/version-v5/react/your-first-app/4-loading-photos.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md
rename to versioned_docs/version-v5/react/your-first-app/5-adding-mobile.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md
rename to versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.mdx
diff --git a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md b/versioned_docs/version-v5/react/your-first-app/7-live-reload.mdx
similarity index 100%
rename from versioned_docs/version-v5/react/your-first-app/7-live-reload.md
rename to versioned_docs/version-v5/react/your-first-app/7-live-reload.mdx
diff --git a/versioned_docs/version-v5/reference/browser-support.md b/versioned_docs/version-v5/reference/browser-support.md
deleted file mode 100644
index c4894f28f7a..00000000000
--- a/versioned_docs/version-v5/reference/browser-support.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Browser Support
-
-Ionic's earliest goal was to make it easy to develop mobile apps using web technologies like HTML, CSS, and JavaScript. Because of this foundation in web technologies, Ionic can run anywhere the web runs — iOS, Android, browsers, PWAs, and more.
-
-## Mobile Browsers
-
-In pursuit of [adaptive styling](../core-concepts/fundamentals.md#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
-
-| Framework | Android | iOS |
-| :-------: | :-----: | :---: |
-| Ionic V5 | 5.0+ | 11.0+ |
-| Ionic V4 | 4.4+ | 10.0+ |
-
-:::note
-Check the [latest Android stats](https://developer.android.com/about/dashboards/) and the [latest iOS stats](https://developer.apple.com/support/app-store/) for up-to-date platform information.
-:::
-
-## Desktop Browsers
-
-Because Ionic is based on web technologies, it works just as well on desktop browsers as it does on mobile devices. For more information on desktop layouts, see [Cross Platform](../core-concepts/cross-platform.md#desktop).
-
-| Browser | Ionic v5 | Ionic V4 |
-| :---------: | :------: | :------: |
-| **Chrome** | ✔ | ✔ |
-| **Safari** | ✔ | ✔ |
-| **Edge** | 79+ | ✔ |
-| **Firefox** | ✔ | ✔ |
-| **IE 11** | **X** | **X** |
diff --git a/versioned_docs/version-v5/reference/browser-support.mdx b/versioned_docs/version-v5/reference/browser-support.mdx
new file mode 100644
index 00000000000..88f1d5e1f0f
--- /dev/null
+++ b/versioned_docs/version-v5/reference/browser-support.mdx
@@ -0,0 +1,28 @@
+# Browser Support
+
+Ionic's earliest goal was to make it easy to develop mobile apps using web technologies like HTML, CSS, and JavaScript. Because of this foundation in web technologies, Ionic can run anywhere the web runs — iOS, Android, browsers, PWAs, and more.
+
+## Mobile Browsers
+
+In pursuit of [adaptive styling](../core-concepts/fundamentals.mdx#adaptive-styling), Ionic fully supports and is well tested on the mobile platforms listed below:
+
+| Framework | Android | iOS |
+| :-------: | :-----: | :---: |
+| Ionic V5 | 5.0+ | 11.0+ |
+| Ionic V4 | 4.4+ | 10.0+ |
+
+:::note
+Check the [latest Android stats](https://developer.android.com/about/dashboards/) and the [latest iOS stats](https://developer.apple.com/support/app-store/) for up-to-date platform information.
+:::
+
+## Desktop Browsers
+
+Because Ionic is based on web technologies, it works just as well on desktop browsers as it does on mobile devices. For more information on desktop layouts, see [Cross Platform](../core-concepts/cross-platform.mdx#desktop).
+
+| Browser | Ionic v5 | Ionic V4 |
+| :---------: | :------: | :------: |
+| **Chrome** | ✔ | ✔ |
+| **Safari** | ✔ | ✔ |
+| **Edge** | 79+ | ✔ |
+| **Firefox** | ✔ | ✔ |
+| **IE 11** | **X** | **X** |
diff --git a/versioned_docs/version-v5/reference/glossary.md b/versioned_docs/version-v5/reference/glossary.mdx
similarity index 100%
rename from versioned_docs/version-v5/reference/glossary.md
rename to versioned_docs/version-v5/reference/glossary.mdx
diff --git a/versioned_docs/version-v5/reference/migration.md b/versioned_docs/version-v5/reference/migration.mdx
similarity index 100%
rename from versioned_docs/version-v5/reference/migration.md
rename to versioned_docs/version-v5/reference/migration.mdx
diff --git a/versioned_docs/version-v5/reference/release-notes.md b/versioned_docs/version-v5/reference/release-notes.mdx
similarity index 100%
rename from versioned_docs/version-v5/reference/release-notes.md
rename to versioned_docs/version-v5/reference/release-notes.mdx
diff --git a/versioned_docs/version-v5/reference/support.md b/versioned_docs/version-v5/reference/support.md
deleted file mode 100644
index 663ddaed953..00000000000
--- a/versioned_docs/version-v5/reference/support.md
+++ /dev/null
@@ -1,79 +0,0 @@
-# Support Policy
-
-## Community Maintenance
-
-The Ionic Framework has been 100% open source (MIT) since the very beginning, and always will be. Developers can ensure Ionic is the right choice for their cross-platform apps through Ionic’s community maintenance strategy. The Ionic team regularly ships new releases, bug fixes, and is very welcoming to community pull requests.
-
-## Framework Maintenance and Support Status
-
-Given the reality of time and resource restraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.md).
-
-The current status of each Ionic Framework version is:
-
-| Version | Status | Released | Maintenance Ends | Ext. Support Ends |
-| :-----: | :------------: | :----------: | :--------------: | :---------------: |
-| V5 | End of Support | Feb 11, 2020 | June 8, 2022 | Dec 8, 2022 |
-| V4 | End of Support | Jan 23, 2019 | Aug 11, 2020 | Sept 30, 2022 |
-| V3 | End of Support | Apr 5, 2017 | Oct 30, 2019 | Aug 11, 2020 |
-| V2 | End of Support | Jan 25, 2017 | Apr 5, 2017 | Apr 5, 2017 |
-| V1 | End of Support | May 12, 2015 | Jan 25, 2017 | Jan 25, 2017 |
-
-- **Maintenance**: Only critical bug and security fixes. No major feature improvements.
-- **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available.
-
-## Compatibility Recommendations
-
-The Ionic team has compiled a set of recommendations for using the Ionic Framework in conjunction with other contextually-relevant software. This is not meant to be a comprehensive list, but covers many common compatibility questions. The Ionic team strongly recommends reviewing your project dependencies once each quarter to keep track of new releases, features and bug fixes.
-
-### Core Dependencies
-
-| Framework | Angular | React | Vue | Typescript |
-| :----------: | :-----: | :----: | :---: | :--------: |
-| V5 - Angular | v8.2.X | N/A | N/A | 3.5.X |
-| V5 - React | N/A | 16.8.X | N/A | 3.7.X |
-| V5 - Vue | N/A | N/A | 3.0.X | 3.9.X |
-| V4 - Angular | v8.2.X | N/A | N/A | 3.5.X |
-| V4 - React | N/A | 16.8.X | N/A | 3.7.X |
-| V3 | v5.2.11 | N/A | N/A | 2.6.2 |
-
-- The Ionic team generally recommends the latest releases of third party packages and strives to support the latest releases within 2-4 weeks of general availability.
-
-### Native Bridges
-
-| Framework | Cordova | Capacitor |
-| :----------: | :----------------------------------: | :----------------------: |
-| V5 - Angular | cordova-android 8.X, cordova-ios 5.X | Latest 2.X |
-| V5 - React | Not supported | Latest 2.x |
-| V5 - Vue | Not supported | Latest 2.X |
-| V4 - Angular | cordova-android 8.X, cordova-ios 5.X | Latest 2.X |
-| V4 - React | Not supported | Latest 2.x |
-| V3 | cordova-android 8.X, cordova-ios 5.X | Not officially supported |
-
-- As iOS and Android (and related tools) are updated, you can expect more updates for Cordova and Capacitor, so it is recommended to stay on the latest version(s) of Cordova and Capacitor.
-
-### Ionic Platform & Products
-
-| Framework | Appflow | Ionic Native Premier Plugins\* |
-| :----------: | :-------------------: | :-----------------------------------------------: |
-| V5 - Angular | `@ionic/angular` 5.X | Use latest available |
-| V5 - React | `@ionic/react` 5.X | Use latest available |
-| V4 - Angular | `@ionic/angular` 4.X | Use latest available |
-| V4 - React | `@ionic/react` 4.X | Use latest available |
-| V3 | `ionic-angular` 3.9.X | Use latest; special configuration may be required |
-
-- Native Premier Plugins require `@ionic-enterprise/cordova` for installation [see here](https://ionic.io/docs/premier-plugins/setup#install-tooling)
-- For Capacitor projects, follow the [Capacitor installation guide for Cordova plugins](https://capacitorjs.com/docs/cordova/using-cordova-plugins)
-- If you need to use an Enterprise plugin with an Ionic 3 project, please [contact us](https://ionic.zendesk.com/hc)
-
-### Ionic Platform & Products (Cont.)
-
-| Framework | Ionic Studio | Ionic Native Community Plugins\* |
-| :----------: | :---------------------: | :------------------------------: |
-| V5 - Angular | `@ionic/angular` 5.X | @awesome-cordova-plugins 5.X |
-| V5 - React | Not currently supported | @awesome-cordova-plugins 5.X\* |
-| V4 - Angular | `@ionic/angular` 5.X | @awesome-cordova-plugins 5.X |
-| V4 - React | Not currently supported | @awesome-cordova-plugins 5.X\* |
-| V3 | Not currently supported | @awesome-cordova-plugins 4.X |
-
-- Wrappers (and their associated plugins) are community maintained.
-- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.md#vanilla-javascript)
diff --git a/versioned_docs/version-v5/reference/support.mdx b/versioned_docs/version-v5/reference/support.mdx
new file mode 100644
index 00000000000..3021ae77d27
--- /dev/null
+++ b/versioned_docs/version-v5/reference/support.mdx
@@ -0,0 +1,79 @@
+# Support Policy
+
+## Community Maintenance
+
+The Ionic Framework has been 100% open source (MIT) since the very beginning, and always will be. Developers can ensure Ionic is the right choice for their cross-platform apps through Ionic’s community maintenance strategy. The Ionic team regularly ships new releases, bug fixes, and is very welcoming to community pull requests.
+
+## Framework Maintenance and Support Status
+
+Given the reality of time and resource restraints as well as the desire to keep innovating in the frontend development space, over time it becomes necessary for the Ionic team to shift focus to newer versions of the Framework. However, Ionic will do everything it can to make the transition to newer versions as smooth as possible. The Ionic team recommends updating to the newest version of the Ionic Framework for the latest features, improvements and stability updates. For more details, consult [the Migration page](migration.mdx).
+
+The current status of each Ionic Framework version is:
+
+| Version | Status | Released | Maintenance Ends | Ext. Support Ends |
+| :-----: | :------------: | :----------: | :--------------: | :---------------: |
+| V5 | End of Support | Feb 11, 2020 | June 8, 2022 | Dec 8, 2022 |
+| V4 | End of Support | Jan 23, 2019 | Aug 11, 2020 | Sept 30, 2022 |
+| V3 | End of Support | Apr 5, 2017 | Oct 30, 2019 | Aug 11, 2020 |
+| V2 | End of Support | Jan 25, 2017 | Apr 5, 2017 | Apr 5, 2017 |
+| V1 | End of Support | May 12, 2015 | Jan 25, 2017 | Jan 25, 2017 |
+
+- **Maintenance**: Only critical bug and security fixes. No major feature improvements.
+- **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available.
+
+## Compatibility Recommendations
+
+The Ionic team has compiled a set of recommendations for using the Ionic Framework in conjunction with other contextually-relevant software. This is not meant to be a comprehensive list, but covers many common compatibility questions. The Ionic team strongly recommends reviewing your project dependencies once each quarter to keep track of new releases, features and bug fixes.
+
+### Core Dependencies
+
+| Framework | Angular | React | Vue | Typescript |
+| :----------: | :-----: | :----: | :---: | :--------: |
+| V5 - Angular | v8.2.X | N/A | N/A | 3.5.X |
+| V5 - React | N/A | 16.8.X | N/A | 3.7.X |
+| V5 - Vue | N/A | N/A | 3.0.X | 3.9.X |
+| V4 - Angular | v8.2.X | N/A | N/A | 3.5.X |
+| V4 - React | N/A | 16.8.X | N/A | 3.7.X |
+| V3 | v5.2.11 | N/A | N/A | 2.6.2 |
+
+- The Ionic team generally recommends the latest releases of third party packages and strives to support the latest releases within 2-4 weeks of general availability.
+
+### Native Bridges
+
+| Framework | Cordova | Capacitor |
+| :----------: | :----------------------------------: | :----------------------: |
+| V5 - Angular | cordova-android 8.X, cordova-ios 5.X | Latest 2.X |
+| V5 - React | Not supported | Latest 2.x |
+| V5 - Vue | Not supported | Latest 2.X |
+| V4 - Angular | cordova-android 8.X, cordova-ios 5.X | Latest 2.X |
+| V4 - React | Not supported | Latest 2.x |
+| V3 | cordova-android 8.X, cordova-ios 5.X | Not officially supported |
+
+- As iOS and Android (and related tools) are updated, you can expect more updates for Cordova and Capacitor, so it is recommended to stay on the latest version(s) of Cordova and Capacitor.
+
+### Ionic Platform & Products
+
+| Framework | Appflow | Ionic Native Premier Plugins\* |
+| :----------: | :-------------------: | :-----------------------------------------------: |
+| V5 - Angular | `@ionic/angular` 5.X | Use latest available |
+| V5 - React | `@ionic/react` 5.X | Use latest available |
+| V4 - Angular | `@ionic/angular` 4.X | Use latest available |
+| V4 - React | `@ionic/react` 4.X | Use latest available |
+| V3 | `ionic-angular` 3.9.X | Use latest; special configuration may be required |
+
+- Native Premier Plugins require `@ionic-enterprise/cordova` for installation [see here](https://ionic.io/docs/premier-plugins/setup#install-tooling)
+- For Capacitor projects, follow the [Capacitor installation guide for Cordova plugins](https://capacitorjs.com/docs/cordova/using-cordova-plugins)
+- If you need to use an Enterprise plugin with an Ionic 3 project, please [contact us](https://ionic.zendesk.com/hc)
+
+### Ionic Platform & Products (Cont.)
+
+| Framework | Ionic Studio | Ionic Native Community Plugins\* |
+| :----------: | :---------------------: | :------------------------------: |
+| V5 - Angular | `@ionic/angular` 5.X | @awesome-cordova-plugins 5.X |
+| V5 - React | Not currently supported | @awesome-cordova-plugins 5.X\* |
+| V4 - Angular | `@ionic/angular` 5.X | @awesome-cordova-plugins 5.X |
+| V4 - React | Not currently supported | @awesome-cordova-plugins 5.X\* |
+| V3 | Not currently supported | @awesome-cordova-plugins 4.X |
+
+- Wrappers (and their associated plugins) are community maintained.
+- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript)
diff --git a/versioned_docs/version-v5/reference/versioning.md b/versioned_docs/version-v5/reference/versioning.mdx
similarity index 100%
rename from versioned_docs/version-v5/reference/versioning.md
rename to versioned_docs/version-v5/reference/versioning.mdx
diff --git a/versioned_docs/version-v5/techniques/security.md b/versioned_docs/version-v5/techniques/security.mdx
similarity index 100%
rename from versioned_docs/version-v5/techniques/security.md
rename to versioned_docs/version-v5/techniques/security.mdx
diff --git a/versioned_docs/version-v5/test/page1.md b/versioned_docs/version-v5/test/page1.md
deleted file mode 100644
index d965196cf5d..00000000000
--- a/versioned_docs/version-v5/test/page1.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Testing Page 1
-
-This is Testing page 1, Get to Testing Page 2 [here](page2.md).
diff --git a/versioned_docs/version-v5/test/page1.mdx b/versioned_docs/version-v5/test/page1.mdx
new file mode 100644
index 00000000000..cd5b72410d0
--- /dev/null
+++ b/versioned_docs/version-v5/test/page1.mdx
@@ -0,0 +1,3 @@
+# Testing Page 1
+
+This is Testing page 1, Get to Testing Page 2 [here](page2.mdx).
diff --git a/versioned_docs/version-v5/test/page2.md b/versioned_docs/version-v5/test/page2.md
deleted file mode 100644
index 2d2d61adacf..00000000000
--- a/versioned_docs/version-v5/test/page2.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Testing Page 2
-
-This is Testing page 2, Get to Testing Page 1 [here](page1.md).
diff --git a/versioned_docs/version-v5/test/page2.mdx b/versioned_docs/version-v5/test/page2.mdx
new file mode 100644
index 00000000000..5ebdef8dca0
--- /dev/null
+++ b/versioned_docs/version-v5/test/page2.mdx
@@ -0,0 +1,3 @@
+# Testing Page 2
+
+This is Testing page 2, Get to Testing Page 1 [here](page1.mdx).
diff --git a/versioned_docs/version-v5/theming/advanced.md b/versioned_docs/version-v5/theming/advanced.md
deleted file mode 100644
index dc0f3af3250..00000000000
--- a/versioned_docs/version-v5/theming/advanced.md
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: Advanced Theming
-sidebar_label: Advanced
----
-
-import CodeColor from '@components/page/theming/CodeColor';
-
-# Advanced Theming
-
-CSS-based theming enables apps to customize the colors quickly by loading a CSS file or changing a few CSS property values.
-
-## Globals
-
-While the application and stepped variables in the themes section are useful for changing the colors of an application, often times there is a need for variables that are used in multiple components. The following variables are shared across components to change global padding settings and more.
-
-### Application Variables
-
-| Name | Description |
-| ------------------------- | ------------------------------------------------------------------------------------------ |
-| `--ion-font-family` | Font family of the app |
-| `--ion-statusbar-padding` | Statusbar padding top of the app |
-| `--ion-safe-area-top` | Adjust the safe area inset top of the app |
-| `--ion-safe-area-right` | Adjust the safe area inset right of the app |
-| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app |
-| `--ion-safe-area-left` | Adjust the safe area inset left of the app |
-| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.md#element-margin) |
-| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.md#element-padding) |
-
-### Grid Variables
-
-| Name | Description |
-| ------------------------------ | ---------------------------------------------- |
-| `--ion-grid-columns` | Number of columns in the grid |
-| `--ion-grid-padding-xs` | Padding of the grid for xs breakpoints |
-| `--ion-grid-padding-sm` | Padding of the grid for sm breakpoints |
-| `--ion-grid-padding-md` | Padding of the grid for md breakpoints |
-| `--ion-grid-padding-lg` | Padding of the grid for lg breakpoints |
-| `--ion-grid-padding-xl` | Padding of the grid for xl breakpoints |
-| `--ion-grid-column-padding-xs` | Padding of the grid columns for xs breakpoints |
-| `--ion-grid-column-padding-sm` | Padding of the grid columns for sm breakpoints |
-| `--ion-grid-column-padding-md` | Padding of the grid columns for md breakpoints |
-| `--ion-grid-column-padding-lg` | Padding of the grid columns for lg breakpoints |
-| `--ion-grid-column-padding-xl` | Padding of the grid columns for xl breakpoints |
-
-## Known Limitations
-
-### The Alpha Problem
-
-There is not yet full browser support for alpha use of a hex color. The `rgba()` function only accepts a value in `R, G, B, A` (Red, Green, Blue, Alpha) format. The following code shows examples of correct and incorrect values passed to `rgba()`.
-
-```css
-/* These examples use the same color: blueviolet. */
-.broken {
- --violet: #8a2be2;
-
- /* rgba(#8a2be2, .5) */
- color: rgba(var(--violet), 0.5); /* ERROR! Doesn't support hex. */
-}
-
-.working {
- --violet-rgb: 138, 43, 226;
-
- /* rgba(138, 43, 226, .5) */
- color: rgba(var(--violet-rgb), 0.5); /* WORKS! */
-}
-```
-
-:::note
-See the [CSS Variables](css-variables.md) section for more information on how to get and set CSS variables.
-:::
-
-Ionic uses colors with an opacity (alpha) in several components. In order for this to work, those properties must be provided in RGB format. When changing any of the properties that have a variation ending in `-rgb`, it is important they are also provided in a comma separated format **without parentheses**. Below are some examples for changing text and background color.
-
-```css
-:root {
- /* These examples use the same color: sienna. */
- --ion-text-color: #a0522d;
- --ion-text-color-rgb: 160, 82, 45;
-
- /* These examples use the same color: lightsteelblue. */
- --ion-background-color: #b0c4de;
- --ion-background-color-rgb: 176, 196, 222;
-}
-```
-
-Note that the RGB formatted colors are the exact same color as the hex properties, but can now be used with `rgba()`. For example, `--ion-text-color-rgb` can now be used in the following way
-
-```css
-body {
- color: rgba(var(--ion-text-color-rgb), 0.25);
-}
-```
-
-### Variables in Media Queries
-
-CSS variables in [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) are not currently supported, but there are open drafts to add [custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) and [custom environment variables](https://drafts.csswg.org/css-env-1/) that would solve this problem! However, with the current state of support, the following will **not** work:
-
-```css
-:root {
- --breakpoint: 600px;
-}
-
-@media (min-width: var(--breakpoint)) {
- /* Doesn't work :( */
-}
-```
-
-### Modifying CSS Color Variables
-
-While it is possible to easily alter a color in Sass using its built-in functions, it is currently not as easy to modify colors set in CSS Variables. This can be accomplished in CSS by splitting the [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) channels and modifying each value, but it is complex and has missing functionality.
-
-What exactly does this mean? Basically, using a CSS preprocessor, such as Sass, allows us to use functions to manipulate a single color. For example, we can create the following colors in Sass:
-
-```scss
-// Background color, shade, and tint
-$background: #3880ff;
-$background-shade: mix(#000, $background, 12%);
-$background-tint: mix(#fff, $background, 10%);
-
-// Text color, darker and lighter
-$text: #444;
-$text-darker: darken($text, 15);
-$text-lighter: lighten($text, 15);
-```
-
-After running through the Sass compiler, the colors will have the following values:
-
-| Variable | Value |
-| ------------------- | ---------------------------------------------- |
-| `$background` | #3880ff |
-| `$background-shade` | #3171e0 |
-| `$background-tint` | #4c8dff |
-| `$text` | #444444 |
-| `$text-darker` | #1e1e1e |
-| `$text-lighter` | #6a6a6a |
-
-However, because CSS variables can be set at runtime and are more dynamic, it is not currently possible to manipulate them using a simple function.
-
-This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.md#layered-colors), and it is also why [stepped colors](themes.md#stepped-colors) are necessary for theming.
-
-There are drafts and issues discussing [color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187) that would make this possible.
diff --git a/versioned_docs/version-v5/theming/advanced.mdx b/versioned_docs/version-v5/theming/advanced.mdx
new file mode 100644
index 00000000000..16c9460666b
--- /dev/null
+++ b/versioned_docs/version-v5/theming/advanced.mdx
@@ -0,0 +1,141 @@
+---
+title: Advanced Theming
+sidebar_label: Advanced
+---
+
+import CodeColor from '@components/page/theming/CodeColor';
+
+# Advanced Theming
+
+CSS-based theming enables apps to customize the colors quickly by loading a CSS file or changing a few CSS property values.
+
+## Globals
+
+While the application and stepped variables in the themes section are useful for changing the colors of an application, often times there is a need for variables that are used in multiple components. The following variables are shared across components to change global padding settings and more.
+
+### Application Variables
+
+| Name | Description |
+| ------------------------- | ------------------------------------------------------------------------------------------ |
+| `--ion-font-family` | Font family of the app |
+| `--ion-statusbar-padding` | Statusbar padding top of the app |
+| `--ion-safe-area-top` | Adjust the safe area inset top of the app |
+| `--ion-safe-area-right` | Adjust the safe area inset right of the app |
+| `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app |
+| `--ion-safe-area-left` | Adjust the safe area inset left of the app |
+| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin) |
+| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding) |
+
+### Grid Variables
+
+| Name | Description |
+| ------------------------------ | ---------------------------------------------- |
+| `--ion-grid-columns` | Number of columns in the grid |
+| `--ion-grid-padding-xs` | Padding of the grid for xs breakpoints |
+| `--ion-grid-padding-sm` | Padding of the grid for sm breakpoints |
+| `--ion-grid-padding-md` | Padding of the grid for md breakpoints |
+| `--ion-grid-padding-lg` | Padding of the grid for lg breakpoints |
+| `--ion-grid-padding-xl` | Padding of the grid for xl breakpoints |
+| `--ion-grid-column-padding-xs` | Padding of the grid columns for xs breakpoints |
+| `--ion-grid-column-padding-sm` | Padding of the grid columns for sm breakpoints |
+| `--ion-grid-column-padding-md` | Padding of the grid columns for md breakpoints |
+| `--ion-grid-column-padding-lg` | Padding of the grid columns for lg breakpoints |
+| `--ion-grid-column-padding-xl` | Padding of the grid columns for xl breakpoints |
+
+## Known Limitations
+
+### The Alpha Problem
+
+There is not yet full browser support for alpha use of a hex color. The `rgba()` function only accepts a value in `R, G, B, A` (Red, Green, Blue, Alpha) format. The following code shows examples of correct and incorrect values passed to `rgba()`.
+
+```css
+/* These examples use the same color: blueviolet. */
+.broken {
+ --violet: #8a2be2;
+
+ /* rgba(#8a2be2, .5) */
+ color: rgba(var(--violet), 0.5); /* ERROR! Doesn't support hex. */
+}
+
+.working {
+ --violet-rgb: 138, 43, 226;
+
+ /* rgba(138, 43, 226, .5) */
+ color: rgba(var(--violet-rgb), 0.5); /* WORKS! */
+}
+```
+
+:::note
+See the [CSS Variables](css-variables.mdx) section for more information on how to get and set CSS variables.
+:::
+
+Ionic uses colors with an opacity (alpha) in several components. In order for this to work, those properties must be provided in RGB format. When changing any of the properties that have a variation ending in `-rgb`, it is important they are also provided in a comma separated format **without parentheses**. Below are some examples for changing text and background color.
+
+```css
+:root {
+ /* These examples use the same color: sienna. */
+ --ion-text-color: #a0522d;
+ --ion-text-color-rgb: 160, 82, 45;
+
+ /* These examples use the same color: lightsteelblue. */
+ --ion-background-color: #b0c4de;
+ --ion-background-color-rgb: 176, 196, 222;
+}
+```
+
+Note that the RGB formatted colors are the exact same color as the hex properties, but can now be used with `rgba()`. For example, `--ion-text-color-rgb` can now be used in the following way
+
+```css
+body {
+ color: rgba(var(--ion-text-color-rgb), 0.25);
+}
+```
+
+### Variables in Media Queries
+
+CSS variables in [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) are not currently supported, but there are open drafts to add [custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) and [custom environment variables](https://drafts.csswg.org/css-env-1/) that would solve this problem! However, with the current state of support, the following will **not** work:
+
+```css
+:root {
+ --breakpoint: 600px;
+}
+
+@media (min-width: var(--breakpoint)) {
+ /* Doesn't work :( */
+}
+```
+
+### Modifying CSS Color Variables
+
+While it is possible to easily alter a color in Sass using its built-in functions, it is currently not as easy to modify colors set in CSS Variables. This can be accomplished in CSS by splitting the [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) channels and modifying each value, but it is complex and has missing functionality.
+
+What exactly does this mean? Basically, using a CSS preprocessor, such as Sass, allows us to use functions to manipulate a single color. For example, we can create the following colors in Sass:
+
+```scss
+// Background color, shade, and tint
+$background: #3880ff;
+$background-shade: mix(#000, $background, 12%);
+$background-tint: mix(#fff, $background, 10%);
+
+// Text color, darker and lighter
+$text: #444;
+$text-darker: darken($text, 15);
+$text-lighter: lighten($text, 15);
+```
+
+After running through the Sass compiler, the colors will have the following values:
+
+| Variable | Value |
+| ------------------- | ---------------------------------------------- |
+| `$background` | #3880ff |
+| `$background-shade` | #3171e0 |
+| `$background-tint` | #4c8dff |
+| `$text` | #444444 |
+| `$text-darker` | #1e1e1e |
+| `$text-lighter` | #6a6a6a |
+
+However, because CSS variables can be set at runtime and are more dynamic, it is not currently possible to manipulate them using a simple function.
+
+This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](colors.mdx#layered-colors), and it is also why [stepped colors](themes.mdx#stepped-colors) are necessary for theming.
+
+There are drafts and issues discussing [color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187) that would make this possible.
diff --git a/versioned_docs/version-v5/theming/basics.md b/versioned_docs/version-v5/theming/basics.md
deleted file mode 100644
index bcd73d84b66..00000000000
--- a/versioned_docs/version-v5/theming/basics.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: 'Theming | Ionic Apps: Color and Theming Basics Definition'
-description: 'The definition of theming apps just got simplified. Ionic Framework is built with pre-baked styles and colors which are extremely easy to change and modify.'
-sidebar_label: Basics
----
-
-import ColorAccordion from '@components/page/theming/ColorAccordion';
-
-# Theming Basics
-
-Ionic Framework is built to be a blank slate that can easily be customized and modified to fit a brand, while still following the standards of the different platforms. Theming Ionic apps is now easier than ever. Because the framework is built with CSS, it comes with pre-baked default styles which are extremely easy to change and modify.
-
-## Colors
-
-Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
-
-When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](color-generator.md) tool, but these can also be manually written if desired. For more information on Ionic colors, see [Colors](colors.md).
-
-
-
-## Platform Standards
-
-Ionic components adapt their look and behavior based on the platform the app is running on. We call this Adaptive Styling. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.
-
-Ionic has two **modes** that are used to customize the look of components based on the **platform**: `ios` and `md`. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, see [Platform Styles](platform-styles.md).
-
-## CSS Variables
-
-The Ionic Framework components are themed using CSS properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.md) Ionic Framework provides.
-
-## CSS Shadow Parts
-
-CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use Shadow DOM were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, see the [CSS Shadow Parts](css-shadow-parts.md) guide.
-
-## Branding
-
-Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, see [Themes](themes.md).
diff --git a/versioned_docs/version-v5/theming/basics.mdx b/versioned_docs/version-v5/theming/basics.mdx
new file mode 100644
index 00000000000..d15d710975a
--- /dev/null
+++ b/versioned_docs/version-v5/theming/basics.mdx
@@ -0,0 +1,37 @@
+---
+title: 'Theming | Ionic Apps: Color and Theming Basics Definition'
+description: 'The definition of theming apps just got simplified. Ionic Framework is built with pre-baked styles and colors which are extremely easy to change and modify.'
+sidebar_label: Basics
+---
+
+import ColorAccordion from '@components/page/theming/ColorAccordion';
+
+# Theming Basics
+
+Ionic Framework is built to be a blank slate that can easily be customized and modified to fit a brand, while still following the standards of the different platforms. Theming Ionic apps is now easier than ever. Because the framework is built with CSS, it comes with pre-baked default styles which are extremely easy to change and modify.
+
+## Colors
+
+Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
+
+When changing a color, it is important to set all of the related properties. This can be done easily with the [Color Generator](color-generator.mdx) tool, but these can also be manually written if desired. For more information on Ionic colors, see [Colors](colors.mdx).
+
+
+
+## Platform Standards
+
+Ionic components adapt their look and behavior based on the platform the app is running on. We call this Adaptive Styling. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.
+
+Ionic has two **modes** that are used to customize the look of components based on the **platform**: `ios` and `md`. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, see [Platform Styles](platform-styles.mdx).
+
+## CSS Variables
+
+The Ionic Framework components are themed using CSS properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the [CSS Variables](css-variables.mdx) Ionic Framework provides.
+
+## CSS Shadow Parts
+
+CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use Shadow DOM were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, see the [CSS Shadow Parts](css-shadow-parts.mdx) guide.
+
+## Branding
+
+Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, see [Themes](themes.mdx).
diff --git a/versioned_docs/version-v5/theming/color-generator.md b/versioned_docs/version-v5/theming/color-generator.mdx
similarity index 100%
rename from versioned_docs/version-v5/theming/color-generator.md
rename to versioned_docs/version-v5/theming/color-generator.mdx
diff --git a/versioned_docs/version-v5/theming/colors.md b/versioned_docs/version-v5/theming/colors.md
deleted file mode 100644
index dad9ab020bf..00000000000
--- a/versioned_docs/version-v5/theming/colors.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: Colors
----
-
-import LayeredColorsSelect from '@components/page/theming/LayeredColorsSelect';
-import NewColorGenerator from '@components/page/theming/NewColorGenerator';
-import CodeColor from '@components/page/theming/CodeColor';
-
-# Colors
-
-Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
-
-A color can be applied to an Ionic component in order to change the default colors using the `color` attribute. Notice in the buttons below that the text and background changes based on the `color` set. When there is no `color` set on the button it uses the `primary` color by default.
-
-```html
-Default
-Primary
-Secondary
-Tertiary
-Success
-Warning
-Danger
-Light
-Medium
-Dark
-```
-
-## Layered Colors
-
-Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in rgb format. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations.
-
-
-
-## Modifying Colors
-
-To change the default values of a color, all of the listed variations for that color should be set. For example, to change the secondary color to #006600, set the following CSS properties:
-
-```css
-:root {
- --ion-color-secondary: #006600;
- --ion-color-secondary-rgb: 0, 102, 0;
- --ion-color-secondary-contrast: #ffffff;
- --ion-color-secondary-contrast-rgb: 255, 255, 255;
- --ion-color-secondary-shade: #005a00;
- --ion-color-secondary-tint: #1a751a;
-}
-```
-
-When `secondary` is applied to a button, not only is the base color #006600 used, but the contrast color #ffffff is used for the text, along with shade #005a00 and tint #1a751a colors for the different states of the button.
-
-:::note
-Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.md) that calculates all of the variations and provides code to copy/paste into an app!
-:::
-
-See the [CSS Variables documentation](css-variables.md) for more information on CSS variables.
-
-## Adding Colors
-
-Colors can be added for use throughout an application by setting the `color` property on an Ionic component, or by styling with CSS. Read on to see how to manually add a new color, or use the [New Color Creator](#new-color-creator) below for a quick way to generate the code of a new color to be copy and pasted into an application.
-
-To add a new color, first define the CSS variables for all of the variations of the color at the root. For example, to add a new color called `favorite`, we can define the following variables:
-
-```css
-:root {
- --ion-color-favorite: #69bb7b;
- --ion-color-favorite-rgb: 105, 187, 123;
- --ion-color-favorite-contrast: #ffffff;
- --ion-color-favorite-contrast-rgb: 255, 255, 255;
- --ion-color-favorite-shade: #5ca56c;
- --ion-color-favorite-tint: #78c288;
-}
-```
-
-Then, create a new class that uses these CSS variables. The class **must** be written in the format `.ion-color-{COLOR}` where `{COLOR}` is the name of the color to add:
-
-```css
-.ion-color-favorite {
- --ion-color-base: var(--ion-color-favorite);
- --ion-color-base-rgb: var(--ion-color-favorite-rgb);
- --ion-color-contrast: var(--ion-color-favorite-contrast);
- --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
- --ion-color-shade: var(--ion-color-favorite-shade);
- --ion-color-tint: var(--ion-color-favorite-tint);
-}
-```
-
-After the class is added, the color can be used on any Ionic component that supports the `color` property. An example of using the `favorite` color on an Ionic button is below.
-
-```html
-Favorite
-```
-
-The CSS variables defined at the root can also be used to style any element using CSS:
-
-```css
-div {
- background: var(--ion-color-favorite);
- color: var(--ion-color-favorite-contrast);
-}
-```
-
-See the [CSS Variables documentation](css-variables.md) for more information on setting and using CSS variables.
-
-## New Color Creator
-
-Create a new color below by changing the name and value, then copy and paste the code below into your project.
-
-
diff --git a/versioned_docs/version-v5/theming/colors.mdx b/versioned_docs/version-v5/theming/colors.mdx
new file mode 100644
index 00000000000..8c64c48dbdb
--- /dev/null
+++ b/versioned_docs/version-v5/theming/colors.mdx
@@ -0,0 +1,108 @@
+---
+title: Colors
+---
+
+import LayeredColorsSelect from '@components/page/theming/LayeredColorsSelect';
+import NewColorGenerator from '@components/page/theming/NewColorGenerator';
+import CodeColor from '@components/page/theming/CodeColor';
+
+# Colors
+
+Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a `shade` and `tint`, used throughout Ionic.
+
+A color can be applied to an Ionic component in order to change the default colors using the `color` attribute. Notice in the buttons below that the text and background changes based on the `color` set. When there is no `color` set on the button it uses the `primary` color by default.
+
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
+
+## Layered Colors
+
+Each color consists of the following properties: a `base`, `contrast`, `shade`, and `tint`. The `base` and `contrast` colors also require a `rgb` property which is the same color, just in rgb format. See [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations.
+
+
+
+## Modifying Colors
+
+To change the default values of a color, all of the listed variations for that color should be set. For example, to change the secondary color to #006600, set the following CSS properties:
+
+```css
+:root {
+ --ion-color-secondary: #006600;
+ --ion-color-secondary-rgb: 0, 102, 0;
+ --ion-color-secondary-contrast: #ffffff;
+ --ion-color-secondary-contrast-rgb: 255, 255, 255;
+ --ion-color-secondary-shade: #005a00;
+ --ion-color-secondary-tint: #1a751a;
+}
+```
+
+When `secondary` is applied to a button, not only is the base color #006600 used, but the contrast color #ffffff is used for the text, along with shade #005a00 and tint #1a751a colors for the different states of the button.
+
+:::note
+Not sure how to get the variation colors from the base color? Try out our [Color Generator](color-generator.mdx) that calculates all of the variations and provides code to copy/paste into an app!
+:::
+
+See the [CSS Variables documentation](css-variables.mdx) for more information on CSS variables.
+
+## Adding Colors
+
+Colors can be added for use throughout an application by setting the `color` property on an Ionic component, or by styling with CSS. Read on to see how to manually add a new color, or use the [New Color Creator](#new-color-creator) below for a quick way to generate the code of a new color to be copy and pasted into an application.
+
+To add a new color, first define the CSS variables for all of the variations of the color at the root. For example, to add a new color called `favorite`, we can define the following variables:
+
+```css
+:root {
+ --ion-color-favorite: #69bb7b;
+ --ion-color-favorite-rgb: 105, 187, 123;
+ --ion-color-favorite-contrast: #ffffff;
+ --ion-color-favorite-contrast-rgb: 255, 255, 255;
+ --ion-color-favorite-shade: #5ca56c;
+ --ion-color-favorite-tint: #78c288;
+}
+```
+
+Then, create a new class that uses these CSS variables. The class **must** be written in the format `.ion-color-{COLOR}` where `{COLOR}` is the name of the color to add:
+
+```css
+.ion-color-favorite {
+ --ion-color-base: var(--ion-color-favorite);
+ --ion-color-base-rgb: var(--ion-color-favorite-rgb);
+ --ion-color-contrast: var(--ion-color-favorite-contrast);
+ --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
+ --ion-color-shade: var(--ion-color-favorite-shade);
+ --ion-color-tint: var(--ion-color-favorite-tint);
+}
+```
+
+After the class is added, the color can be used on any Ionic component that supports the `color` property. An example of using the `favorite` color on an Ionic button is below.
+
+```html
+Favorite
+```
+
+The CSS variables defined at the root can also be used to style any element using CSS:
+
+```css
+div {
+ background: var(--ion-color-favorite);
+ color: var(--ion-color-favorite-contrast);
+}
+```
+
+See the [CSS Variables documentation](css-variables.mdx) for more information on setting and using CSS variables.
+
+## New Color Creator
+
+Create a new color below by changing the name and value, then copy and paste the code below into your project.
+
+
diff --git a/versioned_docs/version-v5/theming/css-shadow-parts.md b/versioned_docs/version-v5/theming/css-shadow-parts.md
deleted file mode 100644
index 59afb185fa6..00000000000
--- a/versioned_docs/version-v5/theming/css-shadow-parts.md
+++ /dev/null
@@ -1,150 +0,0 @@
-# CSS Shadow Parts
-
-CSS Shadow Parts allow developers to style CSS properties on an element inside of a shadow tree. This is extremely useful in customizing Ionic Framework Shadow DOM components.
-
-## Why Shadow Parts?
-
-Ionic Framework is a distributed set of Web Components. Web Components follow the Shadow DOM specification in order to encapsulate styles and markup.
-
-:::note
-Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.md). An example of a Shadow DOM component is the [button component](../api/button.md).
-:::
-
-Shadow DOM is useful for preventing styles from leaking out of components and unintentionally applying to other elements. For example, we assign a `.button` class to our `ion-button` component. Without Shadow DOM encapsulation, if a user were to set the class `.button` on one of their own elements, it would inherit the Ionic Framework button styles. Since `ion-button` is a Shadow component, this is not a problem.
-
-However, due to this encapsulation, styles aren’t able to bleed into inner elements of Shadow components either. This means that if a Shadow component renders elements inside of its shadow tree, the inner elements cannot be targeted directly with CSS. Using the `ion-select` component as an example, it renders the following markup:
-
-```html
-
- #shadow-root
-
-
-
-```
-
-The placeholder text and icon elements are inside of the `#shadow-root`, which means the following CSS will **NOT** work to style the placeholder:
-
-```css
-/* Does NOT work */
-ion-select .select-placeholder {
- color: blue;
-}
-```
-
-So how do we solve this? [CSS Shadow Parts](#shadow-parts-explained)!
-
-## Shadow Parts Explained
-
-Shadow parts allow developers to style inside a shadow tree, from outside of that shadow tree. In order to do so, the [part must be exposed](#exposing-a-part) and then it can be styled by using [::part](#how-part-works).
-
-### Exposing a part
-
-When creating a Shadow DOM component, a part can be added to an element inside of a shadow tree by assigning a `part` attribute on the element. This is added to the component in Ionic Framework and requires no action from an end user.
-
-Continuing to use the `ion-select` component as an example, the markup is updated to look like the following:
-
-```html
-
- #shadow-root
-
-
-
-```
-
-The above shows two parts: `placeholder` and `icon`. See the [select documentation](../api/select.md#css-shadow-parts) for all of its parts.
-
-With these parts exposed, the element can now be styled directly using [::part](#how-part-works).
-
-### How ::part works
-
-The `::part()` pseudo-element allows developers to select elements inside of a shadow tree that have been exposed via a part attribute.
-
-Since we know that `ion-select` exposes a `placeholder` part for styling the text when there is no value selected, we can customize it in the following way:
-
-```css
-ion-select::part(placeholder) {
- color: blue;
- opacity: 1;
-}
-```
-
-Styling using `::part` allows any CSS property that is accepted by that element to be changed.
-
-In addition to being able to target the part, pseudo-elements can be styled without them being explicitly exposed:
-
-```css
-ion-select::part(placeholder)::first-letter {
- font-size: 22px;
- font-weight: 500;
-}
-```
-
-Parts work with most pseudo-classes, as well:
-
-```css
-ion-item::part(native):hover {
- color: green;
-}
-```
-
-:::note
-There are some known limitations with [vendor prefixed pseudo-elements](#vendor-prefixed-pseudo-elements) and [structural pseudo-classes](#structural-pseudo-classes).
-:::
-
-## Ionic Framework Parts
-
-All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.md).
-
-In order to have parts a component must meet the following criteria:
-
-- It is a [Shadow DOM](../reference/glossary.md#shadow) component. If it is a [Scoped](../reference/glossary.md#scoped)> or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.md).
-- It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts.
-- The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results.
-
-:::note
-We welcome recommendations for additional parts. Please create a new GitHub issue with as much information as possible when requesting a part.
-:::
-
-## Known Limitations
-
-### Browser Support
-
-CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the browser support meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.md) for styling.
-
-### Vendor Prefixed Pseudo-Elements
-
-
-Vendor prefixed pseudo-elements are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements:
-
-```css
-/* Does NOT work */
-my-component::part(scroll)::-webkit-scrollbar {
- background: green;
-}
-```
-
-See this issue on GitHub for more information.
-
-### Structural Pseudo-Classes
-
-Most pseudo-classes are supported with parts, however, structural pseudo-classes are not. An example of structural pseudo-classes that do not work is below.
-
-```css
-/* Does NOT work */
-my-component::part(container):first-child {
- background: green;
-}
-
-/* Does NOT work */
-my-component::part(container):last-child {
- background: green;
-}
-```
-
-### Chaining Parts
-
-The `::part()` pseudo-element can not match additional `::part()`s.
-
-For example, `my-component::part(button)::part(label)` does not match anything. This is because doing so would expose more structural information than is intended.
-
-If the ``’s internal button uses something like `part="label => button-label"` to forward the button’s internal parts up into the panel’s own part element map, then a selector like `my-component::part(button-label)` would select just the one button’s label, ignoring any other labels.
diff --git a/versioned_docs/version-v5/theming/css-shadow-parts.mdx b/versioned_docs/version-v5/theming/css-shadow-parts.mdx
new file mode 100644
index 00000000000..1dad4e4a7d3
--- /dev/null
+++ b/versioned_docs/version-v5/theming/css-shadow-parts.mdx
@@ -0,0 +1,150 @@
+# CSS Shadow Parts
+
+CSS Shadow Parts allow developers to style CSS properties on an element inside of a shadow tree. This is extremely useful in customizing Ionic Framework Shadow DOM components.
+
+## Why Shadow Parts?
+
+Ionic Framework is a distributed set of Web Components. Web Components follow the Shadow DOM specification in order to encapsulate styles and markup.
+
+:::note
+Ionic Framework components are **not all** Shadow DOM components. If the component is a Shadow DOM component, there will be a badge in the top right of its [component documentation](../components.mdx). An example of a Shadow DOM component is the [button component](../api/button.mdx).
+:::
+
+Shadow DOM is useful for preventing styles from leaking out of components and unintentionally applying to other elements. For example, we assign a `.button` class to our `ion-button` component. Without Shadow DOM encapsulation, if a user were to set the class `.button` on one of their own elements, it would inherit the Ionic Framework button styles. Since `ion-button` is a Shadow component, this is not a problem.
+
+However, due to this encapsulation, styles aren’t able to bleed into inner elements of Shadow components either. This means that if a Shadow component renders elements inside of its shadow tree, the inner elements cannot be targeted directly with CSS. Using the `ion-select` component as an example, it renders the following markup:
+
+```html
+
+ #shadow-root
+
+
+
+```
+
+The placeholder text and icon elements are inside of the `#shadow-root`, which means the following CSS will **NOT** work to style the placeholder:
+
+```css
+/* Does NOT work */
+ion-select .select-placeholder {
+ color: blue;
+}
+```
+
+So how do we solve this? [CSS Shadow Parts](#shadow-parts-explained)!
+
+## Shadow Parts Explained
+
+Shadow parts allow developers to style inside a shadow tree, from outside of that shadow tree. In order to do so, the [part must be exposed](#exposing-a-part) and then it can be styled by using [::part](#how-part-works).
+
+### Exposing a part
+
+When creating a Shadow DOM component, a part can be added to an element inside of a shadow tree by assigning a `part` attribute on the element. This is added to the component in Ionic Framework and requires no action from an end user.
+
+Continuing to use the `ion-select` component as an example, the markup is updated to look like the following:
+
+```html
+
+ #shadow-root
+
+
+
+```
+
+The above shows two parts: `placeholder` and `icon`. See the [select documentation](../api/select.mdx#css-shadow-parts) for all of its parts.
+
+With these parts exposed, the element can now be styled directly using [::part](#how-part-works).
+
+### How ::part works
+
+The `::part()` pseudo-element allows developers to select elements inside of a shadow tree that have been exposed via a part attribute.
+
+Since we know that `ion-select` exposes a `placeholder` part for styling the text when there is no value selected, we can customize it in the following way:
+
+```css
+ion-select::part(placeholder) {
+ color: blue;
+ opacity: 1;
+}
+```
+
+Styling using `::part` allows any CSS property that is accepted by that element to be changed.
+
+In addition to being able to target the part, pseudo-elements can be styled without them being explicitly exposed:
+
+```css
+ion-select::part(placeholder)::first-letter {
+ font-size: 22px;
+ font-weight: 500;
+}
+```
+
+Parts work with most pseudo-classes, as well:
+
+```css
+ion-item::part(native):hover {
+ color: green;
+}
+```
+
+:::note
+There are some known limitations with [vendor prefixed pseudo-elements](#vendor-prefixed-pseudo-elements) and [structural pseudo-classes](#structural-pseudo-classes).
+:::
+
+## Ionic Framework Parts
+
+All exposed parts for an Ionic Framework component can be found under the CSS Shadow Parts heading on its API page. To view all components and their API pages, see the [Component documentation](../components.mdx).
+
+In order to have parts a component must meet the following criteria:
+
+- It is a [Shadow DOM](../reference/glossary.mdx#shadow) component. If it is a [Scoped](../reference/glossary.mdx#scoped)> or Light DOM component, the child elements can be targeted directly. If a component is Scoped or Shadow, it will be listed by its name on its [component documentation page](../components.mdx).
+- It contains children elements. For example, `ion-card-header` is a Shadow component, but all styles are applied to the host element. Since it has no child elements, there’s no need for parts.
+- The children elements are not structural. In certain components, including `ion-title`, the child element is a structural element used to position the inner elements. We do not recommend customizing structural elements as this can have unexpected results.
+
+:::note
+We welcome recommendations for additional parts. Please create a new GitHub issue with as much information as possible when requesting a part.
+:::
+
+## Known Limitations
+
+### Browser Support
+
+CSS Shadow Parts are supported in the recent versions of all of the major browsers. However, some of the older versions do not support shadow parts. Verify the browser support meets the requirements before implementing parts in an app. If browser support for older versions is required, we recommend continuing to use [CSS Variables](../theming/css-variables.mdx) for styling.
+
+### Vendor Prefixed Pseudo-Elements
+
+
+Vendor prefixed pseudo-elements are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements:
+
+```css
+/* Does NOT work */
+my-component::part(scroll)::-webkit-scrollbar {
+ background: green;
+}
+```
+
+See this issue on GitHub for more information.
+
+### Structural Pseudo-Classes
+
+Most pseudo-classes are supported with parts, however, structural pseudo-classes are not. An example of structural pseudo-classes that do not work is below.
+
+```css
+/* Does NOT work */
+my-component::part(container):first-child {
+ background: green;
+}
+
+/* Does NOT work */
+my-component::part(container):last-child {
+ background: green;
+}
+```
+
+### Chaining Parts
+
+The `::part()` pseudo-element can not match additional `::part()`s.
+
+For example, `my-component::part(button)::part(label)` does not match anything. This is because doing so would expose more structural information than is intended.
+
+If the ``’s internal button uses something like `part="label => button-label"` to forward the button’s internal parts up into the panel’s own part element map, then a selector like `my-component::part(button-label)` would select just the one button’s label, ignoring any other labels.
diff --git a/versioned_docs/version-v5/theming/css-variables.md b/versioned_docs/version-v5/theming/css-variables.md
deleted file mode 100644
index b0647ef5600..00000000000
--- a/versioned_docs/version-v5/theming/css-variables.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: 'CSS Variables | CSS Custom Properties for Variables & Components'
-description: 'Ionic components are built with CSS Variables for easy custom app properties. They allow a value to be stored in one place, then referenced in multiple places.'
-sidebar_label: CSS Variables
----
-
-# CSS Variables
-
-Ionic components are built with CSS Variables for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.
-
-## Setting Values
-
-### Global Variables
-
-CSS variables can be set globally in an application in the `:root` selector. They can also be applied only for a specific mode. See [Ionic Variables](#ionic-variables) for more information on the global variables Ionic provides.
-
-When using the Ionic CLI to start an Angular project, the `src/theme/variables.scss` file is created where you can override the default Ionic Variables.
-
-```css
-/* Set variables for all modes */
-:root {
- /* Set the background of the entire app */
- --ion-background-color: #ff3700;
-
- /* Set the font family of the entire app */
- --ion-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
-}
-
-/* Set text color of the entire app for iOS only */
-.ios {
- --ion-text-color: #000;
-}
-
-/* Set text color of the entire app for Material Design only */
-.md {
- --ion-text-color: #222;
-}
-```
-
-### Component Variables
-
-To set a CSS variable for a specific component, add the variable inside of its selector. See [Ionic Variables](#ionic-variables) for more information on the component-level variables Ionic provides.
-
-```css
-/* Set the color on all ion-button elements */
-ion-button {
- --color: #222;
-}
-
-/* Set the background on an ion-button with the .fancy-button class */
-.fancy-button {
- --background: #00ff00;
-}
-```
-
-### Variables set via JavaScript
-
-CSS variables can also be changed via JavaScript using [setProperty()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty):
-
-```js
-const el = document.querySelector('.fancy-button');
-el.style.setProperty('--background', '#36454f');
-```
-
-## Getting Values
-
-### Using CSS
-
-The [var() CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/var) can be used to get the value of a CSS variable, along with any number of fallback values, if desired. In the below example, the `--background` property will be set to the value of the `--charcoal` variable, if defined, and if not it will use `#36454f`.
-
-```css
-.fancy-button {
- --background: var(--charcoal, #36454f);
-}
-```
-
-### Using JavaScript
-
-The value of a CSS variable can be read in JavaScript using [getPropertyValue()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue):
-
-```js
-const el = document.querySelector('.fancy-button');
-const color = el.style.getPropertyValue('--charcoal');
-```
-
-## Ionic Variables
-
-### Component Variables
-
-Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.md). For example, see the [Button CSS Custom Properties](../api/button.md#css-custom-properties).
-
-### Global Variables
-
-There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see [Colors](colors.md), [Themes](themes.md) and [Advanced Theming](advanced.md).
diff --git a/versioned_docs/version-v5/theming/css-variables.mdx b/versioned_docs/version-v5/theming/css-variables.mdx
new file mode 100644
index 00000000000..5134fab270b
--- /dev/null
+++ b/versioned_docs/version-v5/theming/css-variables.mdx
@@ -0,0 +1,94 @@
+---
+title: 'CSS Variables | CSS Custom Properties for Variables & Components'
+description: 'Ionic components are built with CSS Variables for easy custom app properties. They allow a value to be stored in one place, then referenced in multiple places.'
+sidebar_label: CSS Variables
+---
+
+# CSS Variables
+
+Ionic components are built with CSS Variables for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.
+
+## Setting Values
+
+### Global Variables
+
+CSS variables can be set globally in an application in the `:root` selector. They can also be applied only for a specific mode. See [Ionic Variables](#ionic-variables) for more information on the global variables Ionic provides.
+
+When using the Ionic CLI to start an Angular project, the `src/theme/variables.scss` file is created where you can override the default Ionic Variables.
+
+```css
+/* Set variables for all modes */
+:root {
+ /* Set the background of the entire app */
+ --ion-background-color: #ff3700;
+
+ /* Set the font family of the entire app */
+ --ion-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
+}
+
+/* Set text color of the entire app for iOS only */
+.ios {
+ --ion-text-color: #000;
+}
+
+/* Set text color of the entire app for Material Design only */
+.md {
+ --ion-text-color: #222;
+}
+```
+
+### Component Variables
+
+To set a CSS variable for a specific component, add the variable inside of its selector. See [Ionic Variables](#ionic-variables) for more information on the component-level variables Ionic provides.
+
+```css
+/* Set the color on all ion-button elements */
+ion-button {
+ --color: #222;
+}
+
+/* Set the background on an ion-button with the .fancy-button class */
+.fancy-button {
+ --background: #00ff00;
+}
+```
+
+### Variables set via JavaScript
+
+CSS variables can also be changed via JavaScript using [setProperty()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty):
+
+```js
+const el = document.querySelector('.fancy-button');
+el.style.setProperty('--background', '#36454f');
+```
+
+## Getting Values
+
+### Using CSS
+
+The [var() CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/var) can be used to get the value of a CSS variable, along with any number of fallback values, if desired. In the below example, the `--background` property will be set to the value of the `--charcoal` variable, if defined, and if not it will use `#36454f`.
+
+```css
+.fancy-button {
+ --background: var(--charcoal, #36454f);
+}
+```
+
+### Using JavaScript
+
+The value of a CSS variable can be read in JavaScript using [getPropertyValue()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue):
+
+```js
+const el = document.querySelector('.fancy-button');
+const color = el.style.getPropertyValue('--charcoal');
+```
+
+## Ionic Variables
+
+### Component Variables
+
+Ionic provides variables that exist at the component level, such as `--background` and `--color`. For a list of the custom properties a component accepts, view the `CSS Custom Properties` section of its [API reference](../api.mdx). For example, see the [Button CSS Custom Properties](../api/button.mdx#css-custom-properties).
+
+### Global Variables
+
+There are several global variables that Ionic provides in order to make theming an entire application easier. For more information, see [Colors](colors.mdx), [Themes](themes.mdx) and [Advanced Theming](advanced.mdx).
diff --git a/versioned_docs/version-v5/theming/dark-mode.md b/versioned_docs/version-v5/theming/dark-mode.md
deleted file mode 100644
index d25629ad020..00000000000
--- a/versioned_docs/version-v5/theming/dark-mode.md
+++ /dev/null
@@ -1,315 +0,0 @@
----
-title: Dark Mode
----
-
-import Codepen from '@components/global/Codepen';
-
-# Dark Mode
-
-Ionic makes it easy to change the themes of your app, including supporting dark color schemes. With growing support for dark mode in native apps, developers are now looking to add it to their apps to support user preferences.
-
-## Using Media Queries
-
-The first way to enable dark mode is by using the [CSS media query for the user's preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). This media query will hook into the system setting of the user's device and apply the theme if a dark mode is enabled.
-
-```css
-@media (prefers-color-scheme: dark) {
- :root {
- /* dark mode variables go here */
- }
-}
-```
-
-Currently, the `prefers-color-scheme` media query has [limited browser support](https://caniuse.com/#feat=prefers-color-scheme), so users will not be able to benefit from having the dark mode applied using this media query in certain browsers. However, the dark mode can still be applied by using a [CSS class fallback](#css-class-fallback).
-
-## CSS Class Fallback
-
-As a fallback method for devices that don't support the media query, the dark mode can be applied by styling a CSS selector and applying the class to the document body.
-
-```css
-@media (prefers-color-scheme: dark) {
- :root {
- /* Dark mode variables go here */
- }
-}
-
-/* Fallback for older browsers or manual mode */
-body.dark {
- /* Dark mode variables go here */
-}
-```
-
-With the variables targeting the `body.dark` selector, all that is needed now is to add the class to the `` in the app. This can be done in a variety of ways depending on the framework your app is built with.
-
-Notice that the variables should be in both places in this example. We can [use JavaScript](#combining-with-javascript) in order to avoid setting the variables in two places.
-
-## Combining with JavaScript
-
-In order to keep the CSS variables written once and avoid having to update them in multiple places, the fallback and class can be combined by using JavaScript to check the value of the `prefers-color-scheme` media query and adding the `dark` class if the preference is `dark`. Here's what the CSS would look like:
-
-```css
-body.dark {
- /* Dark mode variables go here */
-}
-```
-
-Notice that the variables above are only in the `body.dark` selector now, and the `prefers-color-scheme` media query has been removed.
-
-### Automatically Enable Dark Mode
-
-In the JavaScript, the `dark` class can be added to the `` by checking if the document matches the media query using [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia). This will enable dark mode to still work based on the user preference.
-
-```javascript
-// Use matchMedia to check the user preference
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-
-toggleDarkTheme(prefersDark.matches);
-
-// Listen for changes to the prefers-color-scheme media query
-prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
-
-// Add or remove the "dark" class based on if the media query matches
-function toggleDarkTheme(shouldAdd) {
- document.body.classList.toggle('dark', shouldAdd);
-}
-```
-
-:::note
-Tip: make sure to view the Codepen below in a [supported browser](https://caniuse.com/#feat=prefers-color-scheme) and then try changing the system preferences on your device between light & dark mode. Here's [how to enable dark mode on Windows 10](https://blogs.windows.com/windowsexperience/2016/08/08/windows-10-tip-personalize-your-pc-by-enabling-the-dark-theme/) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976).
-:::
-
-
-
-
-
-### Manually Toggle Dark Mode
-
-In addition to calling `toggleDarkTheme()` when the app loads and when the media query changes, the `toggleDarkTheme()` function could be called by the app, such as when a user changes a toggle, to switch between the light and dark themes:
-
-```javascript
-// Query for the toggle that is used to change between themes
-const toggle = document.querySelector('#themeToggle');
-
-// Listen for the toggle check/uncheck to toggle the dark class on the
-toggle.addEventListener('ionChange', (ev) => {
- document.body.classList.toggle('dark', ev.detail.checked);
-});
-
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-
-// Listen for changes to the prefers-color-scheme media query
-prefersDark.addEventListener('change', (e) => checkToggle(e.matches));
-
-// Called when the app loads
-function loadApp() {
- checkToggle(prefersDark.matches);
-}
-
-// Called by the media query to check/uncheck the toggle
-function checkToggle(shouldCheck) {
- toggle.checked = shouldCheck;
-}
-```
-
-
-
-
-
-## Adjusting System UI Components
-
-When developing a dark theme, you may notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the `color-scheme`. See the browser compatibility for color-scheme for details on cross browser support.
-
-While you may be mainly using Ionic components instead of only native components, `color-scheme` can also affect aspects of your application such as the scrollbar. In order to use `color-scheme` you will need to add the following HTML to the `head` of your application:
-
-```html
-
-```
-
-This allows the page to indicate which color scheme it is comfortable being rendered with. Alternatively, you can add the following CSS to do this on a per-element basis:
-
-```css
-color-scheme: light dark;
-```
-
-| Default scrollbar | Scrollbar with `color-scheme` |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-|  |  |
-
-For more information regarding `color-scheme` please see https://web.dev/color-scheme/.
-
-:::note
-`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.md#dark-mode).
-:::
-
-## Ionic Dark Theme
-
-Ionic has a recommended theme for variables to use in order to get a dark mode based on the device running the app. It can be broken down into the following parts:
-
-1. Changing the default [Ionic colors](colors.md) for all [modes](platform-styles.md#ionic-modes) to complement the dark background in the `body.dark` selector.
-1. Setting variables for the dark theme on `ios` devices.
-1. Setting variables for the dark theme on `md` devices.
-
-The following code can be copied and pasted into an app to get Ionic's dark theme. We add the `dark` class to the document body using JavaScript as mentioned in the [combining with JavaScript](#combining-with-javascript) section. The dark mode will not be enabled until the `dark` class is added to the document body.
-
-:::note
-For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.md).
-:::
-
-```css
-/*
- * Dark Colors
- * -------------------------------------------
- */
-
-body.dark {
- --ion-color-primary: #428cff;
- --ion-color-primary-rgb: 66, 140, 255;
- --ion-color-primary-contrast: #ffffff;
- --ion-color-primary-contrast-rgb: 255, 255, 255;
- --ion-color-primary-shade: #3a7be0;
- --ion-color-primary-tint: #5598ff;
-
- --ion-color-secondary: #50c8ff;
- --ion-color-secondary-rgb: 80, 200, 255;
- --ion-color-secondary-contrast: #ffffff;
- --ion-color-secondary-contrast-rgb: 255, 255, 255;
- --ion-color-secondary-shade: #46b0e0;
- --ion-color-secondary-tint: #62ceff;
-
- --ion-color-tertiary: #6a64ff;
- --ion-color-tertiary-rgb: 106, 100, 255;
- --ion-color-tertiary-contrast: #ffffff;
- --ion-color-tertiary-contrast-rgb: 255, 255, 255;
- --ion-color-tertiary-shade: #5d58e0;
- --ion-color-tertiary-tint: #7974ff;
-
- --ion-color-success: #2fdf75;
- --ion-color-success-rgb: 47, 223, 117;
- --ion-color-success-contrast: #000000;
- --ion-color-success-contrast-rgb: 0, 0, 0;
- --ion-color-success-shade: #29c467;
- --ion-color-success-tint: #44e283;
-
- --ion-color-warning: #ffd534;
- --ion-color-warning-rgb: 255, 213, 52;
- --ion-color-warning-contrast: #000000;
- --ion-color-warning-contrast-rgb: 0, 0, 0;
- --ion-color-warning-shade: #e0bb2e;
- --ion-color-warning-tint: #ffd948;
-
- --ion-color-danger: #ff4961;
- --ion-color-danger-rgb: 255, 73, 97;
- --ion-color-danger-contrast: #ffffff;
- --ion-color-danger-contrast-rgb: 255, 255, 255;
- --ion-color-danger-shade: #e04055;
- --ion-color-danger-tint: #ff5b71;
-
- --ion-color-dark: #f4f5f8;
- --ion-color-dark-rgb: 244, 245, 248;
- --ion-color-dark-contrast: #000000;
- --ion-color-dark-contrast-rgb: 0, 0, 0;
- --ion-color-dark-shade: #d7d8da;
- --ion-color-dark-tint: #f5f6f9;
-
- --ion-color-medium: #989aa2;
- --ion-color-medium-rgb: 152, 154, 162;
- --ion-color-medium-contrast: #000000;
- --ion-color-medium-contrast-rgb: 0, 0, 0;
- --ion-color-medium-shade: #86888f;
- --ion-color-medium-tint: #a2a4ab;
-
- --ion-color-light: #222428;
- --ion-color-light-rgb: 34, 36, 40;
- --ion-color-light-contrast: #ffffff;
- --ion-color-light-contrast-rgb: 255, 255, 255;
- --ion-color-light-shade: #1e2023;
- --ion-color-light-tint: #383a3e;
-}
-
-/*
- * iOS Dark Theme
- * -------------------------------------------
- */
-
-.ios body.dark {
- --ion-background-color: #000000;
- --ion-background-color-rgb: 0, 0, 0;
-
- --ion-text-color: #ffffff;
- --ion-text-color-rgb: 255, 255, 255;
-
- --ion-color-step-50: #0d0d0d;
- --ion-color-step-100: #1a1a1a;
- --ion-color-step-150: #262626;
- --ion-color-step-200: #333333;
- --ion-color-step-250: #404040;
- --ion-color-step-300: #4d4d4d;
- --ion-color-step-350: #595959;
- --ion-color-step-400: #666666;
- --ion-color-step-450: #737373;
- --ion-color-step-500: #808080;
- --ion-color-step-550: #8c8c8c;
- --ion-color-step-600: #999999;
- --ion-color-step-650: #a6a6a6;
- --ion-color-step-700: #b3b3b3;
- --ion-color-step-750: #bfbfbf;
- --ion-color-step-800: #cccccc;
- --ion-color-step-850: #d9d9d9;
- --ion-color-step-900: #e6e6e6;
- --ion-color-step-950: #f2f2f2;
-
- --ion-item-background: #000000;
-
- --ion-card-background: #1c1c1d;
-}
-
-.ios body.dark ion-modal {
- --ion-background-color: var(--ion-color-step-100);
- --ion-toolbar-background: var(--ion-color-step-150);
- --ion-toolbar-border-color: var(--ion-color-step-250);
- --ion-item-background: var(--ion-color-step-150);
-}
-
-/*
- * Material Design Dark Theme
- * -------------------------------------------
- */
-
-.md body.dark {
- --ion-background-color: #121212;
- --ion-background-color-rgb: 18, 18, 18;
-
- --ion-text-color: #ffffff;
- --ion-text-color-rgb: 255, 255, 255;
-
- --ion-border-color: #222222;
-
- --ion-color-step-50: #1e1e1e;
- --ion-color-step-100: #2a2a2a;
- --ion-color-step-150: #363636;
- --ion-color-step-200: #414141;
- --ion-color-step-250: #4d4d4d;
- --ion-color-step-300: #595959;
- --ion-color-step-350: #656565;
- --ion-color-step-400: #717171;
- --ion-color-step-450: #7d7d7d;
- --ion-color-step-500: #898989;
- --ion-color-step-550: #949494;
- --ion-color-step-600: #a0a0a0;
- --ion-color-step-650: #acacac;
- --ion-color-step-700: #b8b8b8;
- --ion-color-step-750: #c4c4c4;
- --ion-color-step-800: #d0d0d0;
- --ion-color-step-850: #dbdbdb;
- --ion-color-step-900: #e7e7e7;
- --ion-color-step-950: #f3f3f3;
-
- --ion-item-background: #1e1e1e;
-
- --ion-toolbar-background: #1f1f1f;
-
- --ion-tab-bar-background: #1f1f1f;
-
- --ion-card-background: #1e1e1e;
-}
-```
diff --git a/versioned_docs/version-v5/theming/dark-mode.mdx b/versioned_docs/version-v5/theming/dark-mode.mdx
new file mode 100644
index 00000000000..e57874f8b45
--- /dev/null
+++ b/versioned_docs/version-v5/theming/dark-mode.mdx
@@ -0,0 +1,315 @@
+---
+title: Dark Mode
+---
+
+import Codepen from '@components/global/Codepen';
+
+# Dark Mode
+
+Ionic makes it easy to change the themes of your app, including supporting dark color schemes. With growing support for dark mode in native apps, developers are now looking to add it to their apps to support user preferences.
+
+## Using Media Queries
+
+The first way to enable dark mode is by using the [CSS media query for the user's preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). This media query will hook into the system setting of the user's device and apply the theme if a dark mode is enabled.
+
+```css
+@media (prefers-color-scheme: dark) {
+ :root {
+ /* dark mode variables go here */
+ }
+}
+```
+
+Currently, the `prefers-color-scheme` media query has [limited browser support](https://caniuse.com/#feat=prefers-color-scheme), so users will not be able to benefit from having the dark mode applied using this media query in certain browsers. However, the dark mode can still be applied by using a [CSS class fallback](#css-class-fallback).
+
+## CSS Class Fallback
+
+As a fallback method for devices that don't support the media query, the dark mode can be applied by styling a CSS selector and applying the class to the document body.
+
+```css
+@media (prefers-color-scheme: dark) {
+ :root {
+ /* Dark mode variables go here */
+ }
+}
+
+/* Fallback for older browsers or manual mode */
+body.dark {
+ /* Dark mode variables go here */
+}
+```
+
+With the variables targeting the `body.dark` selector, all that is needed now is to add the class to the `` in the app. This can be done in a variety of ways depending on the framework your app is built with.
+
+Notice that the variables should be in both places in this example. We can [use JavaScript](#combining-with-javascript) in order to avoid setting the variables in two places.
+
+## Combining with JavaScript
+
+In order to keep the CSS variables written once and avoid having to update them in multiple places, the fallback and class can be combined by using JavaScript to check the value of the `prefers-color-scheme` media query and adding the `dark` class if the preference is `dark`. Here's what the CSS would look like:
+
+```css
+body.dark {
+ /* Dark mode variables go here */
+}
+```
+
+Notice that the variables above are only in the `body.dark` selector now, and the `prefers-color-scheme` media query has been removed.
+
+### Automatically Enable Dark Mode
+
+In the JavaScript, the `dark` class can be added to the `` by checking if the document matches the media query using [matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia). This will enable dark mode to still work based on the user preference.
+
+```javascript
+// Use matchMedia to check the user preference
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+toggleDarkTheme(prefersDark.matches);
+
+// Listen for changes to the prefers-color-scheme media query
+prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
+
+// Add or remove the "dark" class based on if the media query matches
+function toggleDarkTheme(shouldAdd) {
+ document.body.classList.toggle('dark', shouldAdd);
+}
+```
+
+:::note
+Tip: make sure to view the Codepen below in a [supported browser](https://caniuse.com/#feat=prefers-color-scheme) and then try changing the system preferences on your device between light & dark mode. Here's [how to enable dark mode on Windows 10](https://blogs.windows.com/windowsexperience/2016/08/08/windows-10-tip-personalize-your-pc-by-enabling-the-dark-theme/) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976).
+:::
+
+
+
+
+
+### Manually Toggle Dark Mode
+
+In addition to calling `toggleDarkTheme()` when the app loads and when the media query changes, the `toggleDarkTheme()` function could be called by the app, such as when a user changes a toggle, to switch between the light and dark themes:
+
+```javascript
+// Query for the toggle that is used to change between themes
+const toggle = document.querySelector('#themeToggle');
+
+// Listen for the toggle check/uncheck to toggle the dark class on the
+toggle.addEventListener('ionChange', (ev) => {
+ document.body.classList.toggle('dark', ev.detail.checked);
+});
+
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+// Listen for changes to the prefers-color-scheme media query
+prefersDark.addEventListener('change', (e) => checkToggle(e.matches));
+
+// Called when the app loads
+function loadApp() {
+ checkToggle(prefersDark.matches);
+}
+
+// Called by the media query to check/uncheck the toggle
+function checkToggle(shouldCheck) {
+ toggle.checked = shouldCheck;
+}
+```
+
+
+
+
+
+## Adjusting System UI Components
+
+When developing a dark theme, you may notice that certain system UI components are not adjusting to dark mode properly. To fix this you will need to specify the `color-scheme`. See the browser compatibility for color-scheme for details on cross browser support.
+
+While you may be mainly using Ionic components instead of only native components, `color-scheme` can also affect aspects of your application such as the scrollbar. In order to use `color-scheme` you will need to add the following HTML to the `head` of your application:
+
+```html
+
+```
+
+This allows the page to indicate which color scheme it is comfortable being rendered with. Alternatively, you can add the following CSS to do this on a per-element basis:
+
+```css
+color-scheme: light dark;
+```
+
+| Default scrollbar | Scrollbar with `color-scheme` |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|  |  |
+
+For more information regarding `color-scheme` please see https://web.dev/color-scheme/.
+
+:::note
+`color-scheme` does not apply to the keyboard. For details on how dark mode works with the keyboard, see [Keyboard Documentation](../developing/keyboard.mdx#dark-mode).
+:::
+
+## Ionic Dark Theme
+
+Ionic has a recommended theme for variables to use in order to get a dark mode based on the device running the app. It can be broken down into the following parts:
+
+1. Changing the default [Ionic colors](colors.mdx) for all [modes](platform-styles.mdx#ionic-modes) to complement the dark background in the `body.dark` selector.
+1. Setting variables for the dark theme on `ios` devices.
+1. Setting variables for the dark theme on `md` devices.
+
+The following code can be copied and pasted into an app to get Ionic's dark theme. We add the `dark` class to the document body using JavaScript as mentioned in the [combining with JavaScript](#combining-with-javascript) section. The dark mode will not be enabled until the `dark` class is added to the document body.
+
+:::note
+For more information on the variables that are being changed, including other variables that can be added to further customize, see [Themes](themes.mdx).
+:::
+
+```css
+/*
+ * Dark Colors
+ * -------------------------------------------
+ */
+
+body.dark {
+ --ion-color-primary: #428cff;
+ --ion-color-primary-rgb: 66, 140, 255;
+ --ion-color-primary-contrast: #ffffff;
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
+ --ion-color-primary-shade: #3a7be0;
+ --ion-color-primary-tint: #5598ff;
+
+ --ion-color-secondary: #50c8ff;
+ --ion-color-secondary-rgb: 80, 200, 255;
+ --ion-color-secondary-contrast: #ffffff;
+ --ion-color-secondary-contrast-rgb: 255, 255, 255;
+ --ion-color-secondary-shade: #46b0e0;
+ --ion-color-secondary-tint: #62ceff;
+
+ --ion-color-tertiary: #6a64ff;
+ --ion-color-tertiary-rgb: 106, 100, 255;
+ --ion-color-tertiary-contrast: #ffffff;
+ --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+ --ion-color-tertiary-shade: #5d58e0;
+ --ion-color-tertiary-tint: #7974ff;
+
+ --ion-color-success: #2fdf75;
+ --ion-color-success-rgb: 47, 223, 117;
+ --ion-color-success-contrast: #000000;
+ --ion-color-success-contrast-rgb: 0, 0, 0;
+ --ion-color-success-shade: #29c467;
+ --ion-color-success-tint: #44e283;
+
+ --ion-color-warning: #ffd534;
+ --ion-color-warning-rgb: 255, 213, 52;
+ --ion-color-warning-contrast: #000000;
+ --ion-color-warning-contrast-rgb: 0, 0, 0;
+ --ion-color-warning-shade: #e0bb2e;
+ --ion-color-warning-tint: #ffd948;
+
+ --ion-color-danger: #ff4961;
+ --ion-color-danger-rgb: 255, 73, 97;
+ --ion-color-danger-contrast: #ffffff;
+ --ion-color-danger-contrast-rgb: 255, 255, 255;
+ --ion-color-danger-shade: #e04055;
+ --ion-color-danger-tint: #ff5b71;
+
+ --ion-color-dark: #f4f5f8;
+ --ion-color-dark-rgb: 244, 245, 248;
+ --ion-color-dark-contrast: #000000;
+ --ion-color-dark-contrast-rgb: 0, 0, 0;
+ --ion-color-dark-shade: #d7d8da;
+ --ion-color-dark-tint: #f5f6f9;
+
+ --ion-color-medium: #989aa2;
+ --ion-color-medium-rgb: 152, 154, 162;
+ --ion-color-medium-contrast: #000000;
+ --ion-color-medium-contrast-rgb: 0, 0, 0;
+ --ion-color-medium-shade: #86888f;
+ --ion-color-medium-tint: #a2a4ab;
+
+ --ion-color-light: #222428;
+ --ion-color-light-rgb: 34, 36, 40;
+ --ion-color-light-contrast: #ffffff;
+ --ion-color-light-contrast-rgb: 255, 255, 255;
+ --ion-color-light-shade: #1e2023;
+ --ion-color-light-tint: #383a3e;
+}
+
+/*
+ * iOS Dark Theme
+ * -------------------------------------------
+ */
+
+.ios body.dark {
+ --ion-background-color: #000000;
+ --ion-background-color-rgb: 0, 0, 0;
+
+ --ion-text-color: #ffffff;
+ --ion-text-color-rgb: 255, 255, 255;
+
+ --ion-color-step-50: #0d0d0d;
+ --ion-color-step-100: #1a1a1a;
+ --ion-color-step-150: #262626;
+ --ion-color-step-200: #333333;
+ --ion-color-step-250: #404040;
+ --ion-color-step-300: #4d4d4d;
+ --ion-color-step-350: #595959;
+ --ion-color-step-400: #666666;
+ --ion-color-step-450: #737373;
+ --ion-color-step-500: #808080;
+ --ion-color-step-550: #8c8c8c;
+ --ion-color-step-600: #999999;
+ --ion-color-step-650: #a6a6a6;
+ --ion-color-step-700: #b3b3b3;
+ --ion-color-step-750: #bfbfbf;
+ --ion-color-step-800: #cccccc;
+ --ion-color-step-850: #d9d9d9;
+ --ion-color-step-900: #e6e6e6;
+ --ion-color-step-950: #f2f2f2;
+
+ --ion-item-background: #000000;
+
+ --ion-card-background: #1c1c1d;
+}
+
+.ios body.dark ion-modal {
+ --ion-background-color: var(--ion-color-step-100);
+ --ion-toolbar-background: var(--ion-color-step-150);
+ --ion-toolbar-border-color: var(--ion-color-step-250);
+ --ion-item-background: var(--ion-color-step-150);
+}
+
+/*
+ * Material Design Dark Theme
+ * -------------------------------------------
+ */
+
+.md body.dark {
+ --ion-background-color: #121212;
+ --ion-background-color-rgb: 18, 18, 18;
+
+ --ion-text-color: #ffffff;
+ --ion-text-color-rgb: 255, 255, 255;
+
+ --ion-border-color: #222222;
+
+ --ion-color-step-50: #1e1e1e;
+ --ion-color-step-100: #2a2a2a;
+ --ion-color-step-150: #363636;
+ --ion-color-step-200: #414141;
+ --ion-color-step-250: #4d4d4d;
+ --ion-color-step-300: #595959;
+ --ion-color-step-350: #656565;
+ --ion-color-step-400: #717171;
+ --ion-color-step-450: #7d7d7d;
+ --ion-color-step-500: #898989;
+ --ion-color-step-550: #949494;
+ --ion-color-step-600: #a0a0a0;
+ --ion-color-step-650: #acacac;
+ --ion-color-step-700: #b8b8b8;
+ --ion-color-step-750: #c4c4c4;
+ --ion-color-step-800: #d0d0d0;
+ --ion-color-step-850: #dbdbdb;
+ --ion-color-step-900: #e7e7e7;
+ --ion-color-step-950: #f3f3f3;
+
+ --ion-item-background: #1e1e1e;
+
+ --ion-toolbar-background: #1f1f1f;
+
+ --ion-tab-bar-background: #1f1f1f;
+
+ --ion-card-background: #1e1e1e;
+}
+```
diff --git a/versioned_docs/version-v5/theming/platform-styles.md b/versioned_docs/version-v5/theming/platform-styles.md
deleted file mode 100644
index 5e5a38d1303..00000000000
--- a/versioned_docs/version-v5/theming/platform-styles.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: 'Ionic Platform Styles | Platform-Specific Styles for Ionic Apps'
-description: "Ionic provides platform-specific styles based on the app's device. Styling the components to match the device guidelines allows the app to feel native to users."
-sidebar_label: Platform Styles
----
-
-# Platform Styles
-
-Ionic provides platform specific styles based on the device the application is running on. Styling the components to match the device guidelines allows the application to be written once but look and feel native to the user depending on where it is accessed.
-
-## Ionic Modes
-
-Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../angular/config.md). The following chart displays the default **mode** that is added to each **platform**:
-
-| Platform | Mode | Description |
-| --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `ios` | `ios` | Viewing on an iPhone, iPad, or iPod will use the [iOS styles](https://www.apple.com/ios). |
-| `android` | `md` | Viewing on any Android device will use the [Material Design styles](https://material.io/guidelines/). |
-| `core` | `md` | Any platform that doesn't fit any of the above platforms will use the [Material Design styles](https://material.io/guidelines/). |
-
-For example, an app being viewed on an Android platform will use the `md` (Material Design) mode by default. The `` element will have `class="md"` added to it and all of the components will use Material Design styles:
-
-```html
-
-```
-
-_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../angular/config.md) of an app._
-
-## Overriding Mode Styles
-
-Each Ionic component can be styled based on the mode. The `html` element has both a `class` and `mode` attribute with a value equal to the current mode. These can be used to override styles for any component. For example, to style an `ion-badge` to have `uppercase` text only in `ios` mode:
-
-```css
-.ios ion-badge {
- text-transform: uppercase;
-}
-```
-
-There are also many global CSS variables that can be used to override the styles. To style the background color for an `ios` app, the following can be written:
-
-```css
-.ios {
- --ion-background-color: #222;
-}
-```
-
-There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.md), [theme variables](themes.md) and [global component variables](advanced.md).
diff --git a/versioned_docs/version-v5/theming/platform-styles.mdx b/versioned_docs/version-v5/theming/platform-styles.mdx
new file mode 100644
index 00000000000..63e04926be8
--- /dev/null
+++ b/versioned_docs/version-v5/theming/platform-styles.mdx
@@ -0,0 +1,47 @@
+---
+title: 'Ionic Platform Styles | Platform-Specific Styles for Ionic Apps'
+description: "Ionic provides platform-specific styles based on the app's device. Styling the components to match the device guidelines allows the app to feel native to users."
+sidebar_label: Platform Styles
+---
+
+# Platform Styles
+
+Ionic provides platform specific styles based on the device the application is running on. Styling the components to match the device guidelines allows the application to be written once but look and feel native to the user depending on where it is accessed.
+
+## Ionic Modes
+
+Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden through the global [config](../angular/config.mdx). The following chart displays the default **mode** that is added to each **platform**:
+
+| Platform | Mode | Description |
+| --------- | ----- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `ios` | `ios` | Viewing on an iPhone, iPad, or iPod will use the [iOS styles](https://www.apple.com/ios). |
+| `android` | `md` | Viewing on any Android device will use the [Material Design styles](https://material.io/guidelines/). |
+| `core` | `md` | Any platform that doesn't fit any of the above platforms will use the [Material Design styles](https://material.io/guidelines/). |
+
+For example, an app being viewed on an Android platform will use the `md` (Material Design) mode by default. The `` element will have `class="md"` added to it and all of the components will use Material Design styles:
+
+```html
+
+```
+
+_Note: The **platform** and the **mode** are not the same. The platform can be set to use any mode in the [config](../angular/config.mdx) of an app._
+
+## Overriding Mode Styles
+
+Each Ionic component can be styled based on the mode. The `html` element has both a `class` and `mode` attribute with a value equal to the current mode. These can be used to override styles for any component. For example, to style an `ion-badge` to have `uppercase` text only in `ios` mode:
+
+```css
+.ios ion-badge {
+ text-transform: uppercase;
+}
+```
+
+There are also many global CSS variables that can be used to override the styles. To style the background color for an `ios` app, the following can be written:
+
+```css
+.ios {
+ --ion-background-color: #222;
+}
+```
+
+There are many global variables that can be overridden by mode, including [Ionic's color variables](colors.mdx), [theme variables](themes.mdx) and [global component variables](advanced.mdx).
diff --git a/versioned_docs/version-v5/theming/themes.md b/versioned_docs/version-v5/theming/themes.md
deleted file mode 100644
index 22879ad1b64..00000000000
--- a/versioned_docs/version-v5/theming/themes.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: 'Ionic App Themes | Change Default App Background Themes & Colors'
-description: 'Several global variables change the default theme of an entire application. Create a custom background and text color theme for your app with Ionic themes.'
-sidebar_label: Themes
----
-
-import CodeColor from '@components/page/theming/CodeColor';
-import SteppedColorGenerator from '@components/page/theming/SteppedColorGenerator';
-
-# Themes
-
-Ionic provides several global variables that are used throughout components to change the default theme of an entire application. [Application Colors](#application-colors) are useful to change the look of most of the Ionic components, and [Stepped Colors](#stepped-colors) are used as variations in some of the Ionic components.
-
-## Application Colors
-
-The application colors are used in multiple places in Ionic. These are useful for easily creating dark themes or themes that match a brand.
-
-It is important to note that the background and text color variables also require a rgb variable to be set in rgb format. See [The Alpha Problem](advanced.md#the-alpha-problem) for an explanation of why the `rgb` property is also needed.
-
-| Name | Description |
-| ------------------------------------------ | ---------------------------------------------------- |
-| `--ion-background-color` | Background color of the entire app |
-| `--ion-background-color-rgb` | Background color of the entire app, rgb format |
-| `--ion-text-color` | Text color of the entire app |
-| `--ion-text-color-rgb` | Text color of the entire app, rgb format |
-| `--ion-backdrop-color` | Color of the Backdrop component |
-| `--ion-backdrop-opacity` | Opacity of the Backdrop component |
-| `--ion-overlay-background-color` | Background color of the overlays |
-| `--ion-border-color` | Border color |
-| `--ion-box-shadow-color` | Box shadow color |
-| `--ion-tab-bar-background` | Background of the Tab Bar |
-| `--ion-tab-bar-background-focused` | Background of the focused Tab Bar |
-| `--ion-tab-bar-border-color` | Border color of the Tab Bar |
-| `--ion-tab-bar-color` | Color of the Tab Bar |
-| `--ion-tab-bar-color-selected` | Color of the selected Tab Button |
-| `--ion-toolbar-background` | Background of the Toolbar |
-| `--ion-toolbar-border-color` | Border color of the Toolbar |
-| `--ion-toolbar-color` | Color of the components in the Toolbar |
-| `--ion-toolbar-segment-color` | Color of the Segment Buttons in the Toolbar |
-| `--ion-toolbar-segment-color-checked` | Color of the checked Segment Buttons in the Toolbar |
-| `--ion-toolbar-segment-background` | Background of the Segment Buttons in the Toolbar |
-| `--ion-toolbar-segment-background-checked` | Background of the Segment Buttons in the Toolbar |
-| `--ion-toolbar-segment-indicator-color` | Color of the Segment Button indicator in the Toolbar |
-| `--ion-item-background` | Background of the Item |
-| `--ion-item-border-color` | Border color of the Item |
-| `--ion-item-color` | Color of the components in the Item |
-| `--ion-placeholder-color` | Color of the placeholder in Inputs |
-
-## Stepped Colors
-
-After exploring different ways to customize the Ionic theme, we found that we couldn't use just one background or text color. In order to imply importance and depth throughout the design, we need to use different shades of the background and text colors. To accommodate this pattern, we created stepped colors.
-
-While updating the background (`--ion-background-color`) and text (`--ion-text-color`) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. This will be more apparent when applying a darker theme.
-
-In some components we use a shade darker than the background or lighter than the text. For example, an item heading text may need to be #404040, which is a few shades lighter than our default text color. Meanwhile, the loading component background is a shade darker than white, using #f2f2f2. We use stepped colors in order to define these slight variations. It is important to update the stepped colors when updating the background or text color of an application.
-
-By default, the Ionic stepped colors start at the default background color value #ffffff and mix with the text color value #000000 using an increasing percentage. The full list of stepped colors is shown in the generator below.
-
-## Stepped Color Generator
-
-Create a custom background and text color theme for your app. Update the background or text color’s hex values below, then copy and paste the generated code directly into your Ionic project.
-
-
diff --git a/versioned_docs/version-v5/theming/themes.mdx b/versioned_docs/version-v5/theming/themes.mdx
new file mode 100644
index 00000000000..e7eb72c3479
--- /dev/null
+++ b/versioned_docs/version-v5/theming/themes.mdx
@@ -0,0 +1,63 @@
+---
+title: 'Ionic App Themes | Change Default App Background Themes & Colors'
+description: 'Several global variables change the default theme of an entire application. Create a custom background and text color theme for your app with Ionic themes.'
+sidebar_label: Themes
+---
+
+import CodeColor from '@components/page/theming/CodeColor';
+import SteppedColorGenerator from '@components/page/theming/SteppedColorGenerator';
+
+# Themes
+
+Ionic provides several global variables that are used throughout components to change the default theme of an entire application. [Application Colors](#application-colors) are useful to change the look of most of the Ionic components, and [Stepped Colors](#stepped-colors) are used as variations in some of the Ionic components.
+
+## Application Colors
+
+The application colors are used in multiple places in Ionic. These are useful for easily creating dark themes or themes that match a brand.
+
+It is important to note that the background and text color variables also require a rgb variable to be set in rgb format. See [The Alpha Problem](advanced.mdx#the-alpha-problem) for an explanation of why the `rgb` property is also needed.
+
+| Name | Description |
+| ------------------------------------------ | ---------------------------------------------------- |
+| `--ion-background-color` | Background color of the entire app |
+| `--ion-background-color-rgb` | Background color of the entire app, rgb format |
+| `--ion-text-color` | Text color of the entire app |
+| `--ion-text-color-rgb` | Text color of the entire app, rgb format |
+| `--ion-backdrop-color` | Color of the Backdrop component |
+| `--ion-backdrop-opacity` | Opacity of the Backdrop component |
+| `--ion-overlay-background-color` | Background color of the overlays |
+| `--ion-border-color` | Border color |
+| `--ion-box-shadow-color` | Box shadow color |
+| `--ion-tab-bar-background` | Background of the Tab Bar |
+| `--ion-tab-bar-background-focused` | Background of the focused Tab Bar |
+| `--ion-tab-bar-border-color` | Border color of the Tab Bar |
+| `--ion-tab-bar-color` | Color of the Tab Bar |
+| `--ion-tab-bar-color-selected` | Color of the selected Tab Button |
+| `--ion-toolbar-background` | Background of the Toolbar |
+| `--ion-toolbar-border-color` | Border color of the Toolbar |
+| `--ion-toolbar-color` | Color of the components in the Toolbar |
+| `--ion-toolbar-segment-color` | Color of the Segment Buttons in the Toolbar |
+| `--ion-toolbar-segment-color-checked` | Color of the checked Segment Buttons in the Toolbar |
+| `--ion-toolbar-segment-background` | Background of the Segment Buttons in the Toolbar |
+| `--ion-toolbar-segment-background-checked` | Background of the Segment Buttons in the Toolbar |
+| `--ion-toolbar-segment-indicator-color` | Color of the Segment Button indicator in the Toolbar |
+| `--ion-item-background` | Background of the Item |
+| `--ion-item-border-color` | Border color of the Item |
+| `--ion-item-color` | Color of the components in the Item |
+| `--ion-placeholder-color` | Color of the placeholder in Inputs |
+
+## Stepped Colors
+
+After exploring different ways to customize the Ionic theme, we found that we couldn't use just one background or text color. In order to imply importance and depth throughout the design, we need to use different shades of the background and text colors. To accommodate this pattern, we created stepped colors.
+
+While updating the background (`--ion-background-color`) and text (`--ion-text-color`) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. This will be more apparent when applying a darker theme.
+
+In some components we use a shade darker than the background or lighter than the text. For example, an item heading text may need to be #404040, which is a few shades lighter than our default text color. Meanwhile, the loading component background is a shade darker than white, using #f2f2f2. We use stepped colors in order to define these slight variations. It is important to update the stepped colors when updating the background or text color of an application.
+
+By default, the Ionic stepped colors start at the default background color value #ffffff and mix with the text color value #000000 using an increasing percentage. The full list of stepped colors is shown in the generator below.
+
+## Stepped Color Generator
+
+Create a custom background and text color theme for your app. Update the background or text color’s hex values below, then copy and paste the generated code directly into your Ionic project.
+
+
diff --git a/versioned_docs/version-v5/troubleshooting/build.md b/versioned_docs/version-v5/troubleshooting/build.mdx
similarity index 100%
rename from versioned_docs/version-v5/troubleshooting/build.md
rename to versioned_docs/version-v5/troubleshooting/build.mdx
diff --git a/versioned_docs/version-v5/troubleshooting/cors.md b/versioned_docs/version-v5/troubleshooting/cors.md
deleted file mode 100644
index 26b208f1086..00000000000
--- a/versioned_docs/version-v5/troubleshooting/cors.md
+++ /dev/null
@@ -1,291 +0,0 @@
-# CORS Errors
-
-## What is CORS?
-
-**Cross-Origin Resource Sharing (CORS)** is a mechanism that browsers and webviews — like the ones powering Capacitor and Cordova — use to restrict HTTP and HTTPS requests made from scripts to resources in a different origin for security reasons, mainly to protect your user's data and prevent attacks that would compromise your app.
-
-In order to know if an external origin supports CORS, the server has to send some [special headers](#cors-headers) for the browser to allow the requests.
-
-An **origin** is the combination of the **protocol**, **domain**, and **port** from which your Ionic app or the external resource is served. For example, apps running in Capacitor have `capacitor://localhost` (iOS) or `http://localhost` (Android) as their origin.
-
-When the origin where your app is served (e.g. `http://localhost:8100` with `ionic serve`) and the origin of the resource being requested (e.g. `https://api.example.com`) don't match, the browser's Same Origin Policy takes effect and CORS is required for the request to be made.
-
-CORS errors are common in web apps when a cross-origin request is made but the server doesn't return the required headers in the response (is not CORS-enabled):
-
-
- XMLHttpRequest cannot load https://api.example.com. No 'Access-Control-Allow-Origin' header is present on the
- requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
-
-
-## How does CORS work
-
-### Request with preflight
-
-By default, when a web app tries to make a cross-origin request the browser sends a **preflight request** before the actual request. This preflight request is needed in order to know if the external resource supports CORS and if the actual request can be sent safely, since it may impact user data.
-
-A preflight request is sent by the browser if:
-
-- **The method is:**
- - PUT
- - DELETE
- - CONNECT
- - OPTIONS
- - TRACE
- - PATCH
-- **Or if it has a header other than:**
- - Accept
- - Accept-Language
- - Content-Language
- - Content-Type
- - DPR
- - Downlink
- - Save-Data
- - Viewport-Width
- - Width
-- **Or if it has a `Content-Type` header other than:**
- - application/x-www-form-urlencoded
- - multipart/form-data
- - text/plain
-- Or if a `ReadableStream` or event listeners in `XMLHttpRequestUpload` are used.
-
-If any of the conditions above are met, a preflight request with the `OPTIONS` method is sent to the resource URL.
-
-Let's suppose we are making a `POST` request to a fictional JSON API at `https://api.example.com` with a `Content-Type` of `application/json`. The preflight request would be like this (some default headers omitted for clarity):
-
-```http
-OPTIONS / HTTP/1.1
-Host: api.example.com
-Origin: http://localhost:8100
-Access-Control-Request-Method: POST
-Access-Control-Request-Headers: Content-Type
-```
-
-If the server is CORS enabled, it will parse the `Access-Control-Request-*` headers and understand that a `POST` request is trying to be made from `http://localhost:8100` with a custom `Content-Type`.
-
-The server will then respond to this preflight with which origins, methods, and headers are allowed by using the `Access-Control-Allow-*` headers:
-
-```http
-HTTP/1.1 200 OK
-Access-Control-Allow-Origin: http://localhost:8100
-Access-Control-Allow-Methods: GET, POST, OPTIONS
-Access-Control-Allow-Headers: Content-Type
-```
-
-If the returned origin and method don't match the ones from the actual request, or any of the headers used are not allowed, the request will be blocked by the browser and an error will be shown in the console. Otherwise, the request will be made after the preflight.
-
-In our example, since the API expects JSON, all `POST` requests will have a `Content-Type: application/json` header and always be preflighted.
-
-### Simple requests
-
-Some requests are always considered safe to send and don't need a preflight if they meet all of the following conditions:
-
-- **The method is:**
- - GET
- - HEAD
- - POST
-- **Have only these headers:**
- - Accept
- - Accept-Language
- - Content-Language
- - Content-Type
- - DPR
- - Downlink
- - Save-Data
- - Viewport-Width
- - Width
-- **The `Content-Type` header is:**
- - application/x-www-form-urlencoded
- - multipart/form-data
- - text/plain
-- No `ReadableStream` or event listeners in `XMLHttpRequestUpload` are used.
-
-In our example API, `GET` requests don't need to be preflighted because no JSON data is being sent, and so the app doesn't need to use the `Content-Type: application/json` header. They will always be simple requests.
-
-## CORS Headers
-
-### Server Headers (Response)
-
-| Header | Value | Description |
-| -------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Access-Control-Allow-Origin** | `origin` or `*` | Specifies the origin to be allowed, like `http://localhost:8100` or `*` to allow all origins. |
-| **Access-Control-Allow-Methods** | `methods` | Which methods are allowed when accessing the resource: `GET`, `HEAD`, `POST`, `PUT`, `DELETE`, `CONNECT`, `OPTIONS`, `TRACE`, `PATCH`. |
-| **Access-Control-Allow-Headers** | `headers` | Used in response to a preflight request to indicate which headers can be used when making the actual request, aside from the [simple headers](#simple-requests), which are always allowed. |
-| Access-Control-Allow-Credentials | `true` or `false` | Whether or not the request can be made with credentials. |
-| Access-Control-Expose-Headers | `headers` | Specifies the headers that the browser is allowed to access. |
-| Access-Control-Max-Age | `seconds` | Indicates how long the results of a preflight request can be cached. |
-
-### Browser Headers (Request)
-
-The browser automatically sends the appropriate headers for CORS in every request to the server, including the preflight requests. Please note that the headers below are for reference only, and **should not be set in your app code** (the browser will ignore them).
-
-#### All Requests
-
-| Header | Value | Description |
-| ---------- | -------- | ------------------------------------ |
-| **Origin** | `origin` | Indicates the origin of the request. |
-
-#### Preflight Requests
-
-| Header | Value | Description |
-| --------------------------------- | --------- | ------------------------------------------------------------------------------------------------- |
-| **Access-Control-Request-Method** | `method` | Used to let the server know what method will be used when the actual request is made. |
-| Access-Control-Request-Headers | `headers` | Used to let the server know what non-simple headers will be used when the actual request is made. |
-
-## Solutions for CORS Errors
-
-### A. Enabling CORS in a server you control
-
-The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response-) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular.
-
-Ionic apps may be run from different origins, but only one origin can be specified in the `Access-Control-Allow-Origin` header. Therefore we recommend checking the value of the `Origin` header from the request and reflecting it in the `Access-Control-Allow-Origin` header in the response.
-
-Please note that all of the `Access-Control-Allow-*` headers have to be sent from the server, and don't belong in your app code.
-
-Here are some of the origins your Ionic app may be served from:
-
-#### Capacitor
-
-| Platform | Origin |
-| -------- | ----------------------- |
-| iOS | `capacitor://localhost` |
-| Android | `http://localhost` |
-
-Replace `localhost` with your own hostname if you have changed the default in the Capacitor config.
-
-#### Ionic WebView 3.x plugin on Cordova
-
-| Platform | Origin |
-| -------- | ------------------- |
-| iOS | `ionic://localhost` |
-| Android | `http://localhost` |
-
-Replace `localhost` with your own hostname if you have changed the default in the plugin config.
-
-#### Ionic WebView 2.x plugin on Cordova
-
-| Platform | Origin |
-| -------- | ----------------------- |
-| iOS | `http://localhost:8080` |
-| Android | `http://localhost:8080` |
-
-Replace port `8080` with your own if you have changed the default in the plugin config.
-
-#### Local development in the browser
-
-| Command | Origin |
-| ----------------------------- | -------------------------------------------------------- |
-| `ionic serve` | `http://localhost:8100` or `http://YOUR_MACHINE_IP:8100` |
-| `npm run start` or `ng serve` | `http://localhost:4200` for Ionic Angular apps. |
-
-Port numbers can be higher if you are serving multiple apps at the same time.
-
-Allowing any origin with `Access-Control-Allow-Origin: *` is guaranteed to work in all scenarios but may have security implications — like some CSRF attacks — depending on how the server controls access to resources and use sessions and cookies.
-
-For more information on how to enable CORS in different web and app servers, please check enable-cors.org
-
-CORS can be easily enabled in Express/Connect apps with the cors middleware:
-
-```javascript
-const express = require('express');
-const cors = require('cors');
-const app = express();
-
-const allowedOrigins = [
- 'capacitor://localhost',
- 'ionic://localhost',
- 'http://localhost',
- 'http://localhost:8080',
- 'http://localhost:8100',
-];
-
-// Reflect the origin if it's in the allowed list or not defined (cURL, Postman, etc.)
-const corsOptions = {
- origin: (origin, callback) => {
- if (allowedOrigins.includes(origin) || !origin) {
- callback(null, true);
- } else {
- callback(new Error('Origin not allowed by CORS'));
- }
- },
-};
-
-// Enable preflight requests for all routes
-app.options('*', cors(corsOptions));
-
-app.get('/', cors(corsOptions), (req, res, next) => {
- res.json({ message: 'This route is CORS-enabled for an allowed origin.' });
-});
-
-app.listen(3000, () => {
- console.log('CORS-enabled web server listening on port 3000');
-});
-```
-
-### B. Working around CORS in a server you can't control
-
-#### Don't leak your keys!
-
-If you are trying to connect to a 3rd-party API, first check in its documentation that is safe to use it directly from the app (client-side) and that it won't leak any secret/private keys or credentials, as it's easy to see them in clear text in Javascript code. Many APIs don't support CORS on purpose, in order to force developers to use them in the server and protect important information or keys.
-
-#### 1. Native-only apps (iOS/Android)
-
-Use the [HTTP plugin from Ionic Native](../native/http.md) to make the requests natively from outside the webview. Please note that this plugin doesn't work in the browser, so the development and testing of the app must always be done in a device or simulator going forward.
-
-##### Usage in Ionic Angular 4
-
-```tsx
-import { Component } from '@angular/core';
-import { HTTP } from '@awesome-cordova-plugins/http/ngx';
-
-@Component({
- selector: 'app-home',
- templateUrl: './home.page.html',
- styleUrls: ['./home.page.scss'],
-})
-export class HomePage {
- constructor(private http: HTTP) {}
-
- async getData() {
- try {
- const url = 'https://api.example.com';
- const params = {};
- const headers = {};
-
- const response = await this.http.get(url, params, headers);
-
- console.log(response.status);
- console.log(JSON.parse(response.data)); // JSON data returned by server
- console.log(response.headers);
- } catch (error) {
- console.error(error.status);
- console.error(error.error); // Error message as string
- console.error(error.headers);
- }
- }
-}
-```
-
-#### 2. Native + PWAs
-
-Send the requests through an HTTP/HTTPS proxy that bypasses them to the external resources and adds the necessary CORS headers to the responses. This proxy must be trusted or under your control, as it will be intercepting most traffic made by the app.
-
-Also, keep in mind that the browser or webview will not receive the original HTTPS certificates but the one being sent from the proxy if it's provided. URLs may need to be rewritten in your code in order to use the proxy.
-
-Check cors-anywhere for a Node.js CORS proxy that can be deployed in your own server. Using free hosted CORS proxies in production is not recommended.
-
-### C. Disabling CORS or browser web security
-
-Please be aware that CORS exists for a reason (security of user data and to prevent attacks against your app). **It's not possible or advisable to try to disable CORS**.
-
-Older webviews like `UIWebView` on iOS don't enforce CORS but are deprecated and are very likely to disappear soon. Modern webviews like iOS `WKWebView` or Android `WebView` (both used by Capacitor) do enforce CORS and provide huge security and performance improvements.
-
-If you are developing a PWA or testing in the browser, using the `--disable-web-security` flag in Google Chrome or an extension to disable CORS is a really bad idea. You will be exposed to all kind of attacks, you can't ask your users to take the risk, and your app won't work once in production.
-
-##### Sources
-
--
- CORS Errors in Ionic Apps
-
--
- MDN
-
diff --git a/versioned_docs/version-v5/troubleshooting/cors.mdx b/versioned_docs/version-v5/troubleshooting/cors.mdx
new file mode 100644
index 00000000000..8cb6a321315
--- /dev/null
+++ b/versioned_docs/version-v5/troubleshooting/cors.mdx
@@ -0,0 +1,291 @@
+# CORS Errors
+
+## What is CORS?
+
+**Cross-Origin Resource Sharing (CORS)** is a mechanism that browsers and webviews — like the ones powering Capacitor and Cordova — use to restrict HTTP and HTTPS requests made from scripts to resources in a different origin for security reasons, mainly to protect your user's data and prevent attacks that would compromise your app.
+
+In order to know if an external origin supports CORS, the server has to send some [special headers](#cors-headers) for the browser to allow the requests.
+
+An **origin** is the combination of the **protocol**, **domain**, and **port** from which your Ionic app or the external resource is served. For example, apps running in Capacitor have `capacitor://localhost` (iOS) or `http://localhost` (Android) as their origin.
+
+When the origin where your app is served (e.g. `http://localhost:8100` with `ionic serve`) and the origin of the resource being requested (e.g. `https://api.example.com`) don't match, the browser's Same Origin Policy takes effect and CORS is required for the request to be made.
+
+CORS errors are common in web apps when a cross-origin request is made but the server doesn't return the required headers in the response (is not CORS-enabled):
+
+
+ XMLHttpRequest cannot load https://api.example.com. No 'Access-Control-Allow-Origin' header is present on the
+ requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
+
+
+## How does CORS work
+
+### Request with preflight
+
+By default, when a web app tries to make a cross-origin request the browser sends a **preflight request** before the actual request. This preflight request is needed in order to know if the external resource supports CORS and if the actual request can be sent safely, since it may impact user data.
+
+A preflight request is sent by the browser if:
+
+- **The method is:**
+ - PUT
+ - DELETE
+ - CONNECT
+ - OPTIONS
+ - TRACE
+ - PATCH
+- **Or if it has a header other than:**
+ - Accept
+ - Accept-Language
+ - Content-Language
+ - Content-Type
+ - DPR
+ - Downlink
+ - Save-Data
+ - Viewport-Width
+ - Width
+- **Or if it has a `Content-Type` header other than:**
+ - application/x-www-form-urlencoded
+ - multipart/form-data
+ - text/plain
+- Or if a `ReadableStream` or event listeners in `XMLHttpRequestUpload` are used.
+
+If any of the conditions above are met, a preflight request with the `OPTIONS` method is sent to the resource URL.
+
+Let's suppose we are making a `POST` request to a fictional JSON API at `https://api.example.com` with a `Content-Type` of `application/json`. The preflight request would be like this (some default headers omitted for clarity):
+
+```http
+OPTIONS / HTTP/1.1
+Host: api.example.com
+Origin: http://localhost:8100
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: Content-Type
+```
+
+If the server is CORS enabled, it will parse the `Access-Control-Request-*` headers and understand that a `POST` request is trying to be made from `http://localhost:8100` with a custom `Content-Type`.
+
+The server will then respond to this preflight with which origins, methods, and headers are allowed by using the `Access-Control-Allow-*` headers:
+
+```http
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: http://localhost:8100
+Access-Control-Allow-Methods: GET, POST, OPTIONS
+Access-Control-Allow-Headers: Content-Type
+```
+
+If the returned origin and method don't match the ones from the actual request, or any of the headers used are not allowed, the request will be blocked by the browser and an error will be shown in the console. Otherwise, the request will be made after the preflight.
+
+In our example, since the API expects JSON, all `POST` requests will have a `Content-Type: application/json` header and always be preflighted.
+
+### Simple requests
+
+Some requests are always considered safe to send and don't need a preflight if they meet all of the following conditions:
+
+- **The method is:**
+ - GET
+ - HEAD
+ - POST
+- **Have only these headers:**
+ - Accept
+ - Accept-Language
+ - Content-Language
+ - Content-Type
+ - DPR
+ - Downlink
+ - Save-Data
+ - Viewport-Width
+ - Width
+- **The `Content-Type` header is:**
+ - application/x-www-form-urlencoded
+ - multipart/form-data
+ - text/plain
+- No `ReadableStream` or event listeners in `XMLHttpRequestUpload` are used.
+
+In our example API, `GET` requests don't need to be preflighted because no JSON data is being sent, and so the app doesn't need to use the `Content-Type: application/json` header. They will always be simple requests.
+
+## CORS Headers
+
+### Server Headers (Response)
+
+| Header | Value | Description |
+| -------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Access-Control-Allow-Origin** | `origin` or `*` | Specifies the origin to be allowed, like `http://localhost:8100` or `*` to allow all origins. |
+| **Access-Control-Allow-Methods** | `methods` | Which methods are allowed when accessing the resource: `GET`, `HEAD`, `POST`, `PUT`, `DELETE`, `CONNECT`, `OPTIONS`, `TRACE`, `PATCH`. |
+| **Access-Control-Allow-Headers** | `headers` | Used in response to a preflight request to indicate which headers can be used when making the actual request, aside from the [simple headers](#simple-requests), which are always allowed. |
+| Access-Control-Allow-Credentials | `true` or `false` | Whether or not the request can be made with credentials. |
+| Access-Control-Expose-Headers | `headers` | Specifies the headers that the browser is allowed to access. |
+| Access-Control-Max-Age | `seconds` | Indicates how long the results of a preflight request can be cached. |
+
+### Browser Headers (Request)
+
+The browser automatically sends the appropriate headers for CORS in every request to the server, including the preflight requests. Please note that the headers below are for reference only, and **should not be set in your app code** (the browser will ignore them).
+
+#### All Requests
+
+| Header | Value | Description |
+| ---------- | -------- | ------------------------------------ |
+| **Origin** | `origin` | Indicates the origin of the request. |
+
+#### Preflight Requests
+
+| Header | Value | Description |
+| --------------------------------- | --------- | ------------------------------------------------------------------------------------------------- |
+| **Access-Control-Request-Method** | `method` | Used to let the server know what method will be used when the actual request is made. |
+| Access-Control-Request-Headers | `headers` | Used to let the server know what non-simple headers will be used when the actual request is made. |
+
+## Solutions for CORS Errors
+
+### A. Enabling CORS in a server you control
+
+The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response-) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular.
+
+Ionic apps may be run from different origins, but only one origin can be specified in the `Access-Control-Allow-Origin` header. Therefore we recommend checking the value of the `Origin` header from the request and reflecting it in the `Access-Control-Allow-Origin` header in the response.
+
+Please note that all of the `Access-Control-Allow-*` headers have to be sent from the server, and don't belong in your app code.
+
+Here are some of the origins your Ionic app may be served from:
+
+#### Capacitor
+
+| Platform | Origin |
+| -------- | ----------------------- |
+| iOS | `capacitor://localhost` |
+| Android | `http://localhost` |
+
+Replace `localhost` with your own hostname if you have changed the default in the Capacitor config.
+
+#### Ionic WebView 3.x plugin on Cordova
+
+| Platform | Origin |
+| -------- | ------------------- |
+| iOS | `ionic://localhost` |
+| Android | `http://localhost` |
+
+Replace `localhost` with your own hostname if you have changed the default in the plugin config.
+
+#### Ionic WebView 2.x plugin on Cordova
+
+| Platform | Origin |
+| -------- | ----------------------- |
+| iOS | `http://localhost:8080` |
+| Android | `http://localhost:8080` |
+
+Replace port `8080` with your own if you have changed the default in the plugin config.
+
+#### Local development in the browser
+
+| Command | Origin |
+| ----------------------------- | -------------------------------------------------------- |
+| `ionic serve` | `http://localhost:8100` or `http://YOUR_MACHINE_IP:8100` |
+| `npm run start` or `ng serve` | `http://localhost:4200` for Ionic Angular apps. |
+
+Port numbers can be higher if you are serving multiple apps at the same time.
+
+Allowing any origin with `Access-Control-Allow-Origin: *` is guaranteed to work in all scenarios but may have security implications — like some CSRF attacks — depending on how the server controls access to resources and use sessions and cookies.
+
+For more information on how to enable CORS in different web and app servers, please check enable-cors.org
+
+CORS can be easily enabled in Express/Connect apps with the cors middleware:
+
+```javascript
+const express = require('express');
+const cors = require('cors');
+const app = express();
+
+const allowedOrigins = [
+ 'capacitor://localhost',
+ 'ionic://localhost',
+ 'http://localhost',
+ 'http://localhost:8080',
+ 'http://localhost:8100',
+];
+
+// Reflect the origin if it's in the allowed list or not defined (cURL, Postman, etc.)
+const corsOptions = {
+ origin: (origin, callback) => {
+ if (allowedOrigins.includes(origin) || !origin) {
+ callback(null, true);
+ } else {
+ callback(new Error('Origin not allowed by CORS'));
+ }
+ },
+};
+
+// Enable preflight requests for all routes
+app.options('*', cors(corsOptions));
+
+app.get('/', cors(corsOptions), (req, res, next) => {
+ res.json({ message: 'This route is CORS-enabled for an allowed origin.' });
+});
+
+app.listen(3000, () => {
+ console.log('CORS-enabled web server listening on port 3000');
+});
+```
+
+### B. Working around CORS in a server you can't control
+
+#### Don't leak your keys!
+
+If you are trying to connect to a 3rd-party API, first check in its documentation that is safe to use it directly from the app (client-side) and that it won't leak any secret/private keys or credentials, as it's easy to see them in clear text in Javascript code. Many APIs don't support CORS on purpose, in order to force developers to use them in the server and protect important information or keys.
+
+#### 1. Native-only apps (iOS/Android)
+
+Use the [HTTP plugin from Ionic Native](../native/http.mdx) to make the requests natively from outside the webview. Please note that this plugin doesn't work in the browser, so the development and testing of the app must always be done in a device or simulator going forward.
+
+##### Usage in Ionic Angular 4
+
+```tsx
+import { Component } from '@angular/core';
+import { HTTP } from '@awesome-cordova-plugins/http/ngx';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: './home.page.html',
+ styleUrls: ['./home.page.scss'],
+})
+export class HomePage {
+ constructor(private http: HTTP) {}
+
+ async getData() {
+ try {
+ const url = 'https://api.example.com';
+ const params = {};
+ const headers = {};
+
+ const response = await this.http.get(url, params, headers);
+
+ console.log(response.status);
+ console.log(JSON.parse(response.data)); // JSON data returned by server
+ console.log(response.headers);
+ } catch (error) {
+ console.error(error.status);
+ console.error(error.error); // Error message as string
+ console.error(error.headers);
+ }
+ }
+}
+```
+
+#### 2. Native + PWAs
+
+Send the requests through an HTTP/HTTPS proxy that bypasses them to the external resources and adds the necessary CORS headers to the responses. This proxy must be trusted or under your control, as it will be intercepting most traffic made by the app.
+
+Also, keep in mind that the browser or webview will not receive the original HTTPS certificates but the one being sent from the proxy if it's provided. URLs may need to be rewritten in your code in order to use the proxy.
+
+Check cors-anywhere for a Node.js CORS proxy that can be deployed in your own server. Using free hosted CORS proxies in production is not recommended.
+
+### C. Disabling CORS or browser web security
+
+Please be aware that CORS exists for a reason (security of user data and to prevent attacks against your app). **It's not possible or advisable to try to disable CORS**.
+
+Older webviews like `UIWebView` on iOS don't enforce CORS but are deprecated and are very likely to disappear soon. Modern webviews like iOS `WKWebView` or Android `WebView` (both used by Capacitor) do enforce CORS and provide huge security and performance improvements.
+
+If you are developing a PWA or testing in the browser, using the `--disable-web-security` flag in Google Chrome or an extension to disable CORS is a really bad idea. You will be exposed to all kind of attacks, you can't ask your users to take the risk, and your app won't work once in production.
+
+##### Sources
+
+-
+ CORS Errors in Ionic Apps
+
+-
+ MDN
+
diff --git a/versioned_docs/version-v5/troubleshooting/debugging.md b/versioned_docs/version-v5/troubleshooting/debugging.md
deleted file mode 100644
index 56c1c98ad14..00000000000
--- a/versioned_docs/version-v5/troubleshooting/debugging.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# Debugging
-
-
-
-## Live Reload
-
-Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. [Learn more here](../cli/livereload.md).
-
-## iOS and Safari
-
-Safari can be used to debug an Ionic app on a connected iOS device or iOS simulator.
-
-First, on the iOS device, enable **Web Inspector** from Settings > Safari > Advanced.
-
-Next, open Safari on a Mac then enable **Show Develop menu in menu bar** under Safari > Preferences > Advanced.
-
-Run the iOS simulator or connect your iOS device to your Mac, then run the Ionic app that you want to debug.
-
-Within Safari, select **Develop** in the toolbar. In the dropdown menu options, you should see the name of your device and app. Hover over the app name and click on **localhost**. This will open a new window with the Safari Developer Tools - use them to inspect and debug the Ionic app running on your device.
-
-## Android and Chrome
-
-Use Google Chrome's DevTools to debug an app when it is running in the browser using the `ionic serve` command, deployed to an emulator, or on a physical device.
-
-To inspect a physical device, first you need to have developer mode enabled. Connect your Android device to the computer then go to `Settings > About` scroll to `Build Number` and tap that 7 times. This will activate a new option in the **Settings** menu called **Developer Options**.
-
-Next, go to `Settings > Developer Options` and ensure that the developer options switch is toggled on. Scroll down to **USB Debugging** and ensure that it is also enabled. Developer Options & USB Debugging are enabled by default in the Android emulator.
-
-Open the Chrome browser and navigate to the URL `chrome://inspect/#devices`. Your connected Android device should show up in the list of Remote Targets.
-
-On your device, open the Ionic app that you would like to debug using Chrome.
-
-With your app running on the device, head back to Chrome and click on **inspect** under your device in the list of remote targets. This will open the Chrome Developer Tools in a new window. You will then be able to use all of the Chrome DevTools to debug the application as it runs on your device.
-
-:::note
-The app preview may not automatically appear when you open Chrome Developer Tools due to a minor bug. To make it appear, click on the **Elements** tab then click on any DOM element then toggle off and on any CSS rule and the app preview window will appear.
-:::
-
-## Debugging with Visual Studio locally in Chrome (both Android & iOS)
-
-
-Visual Studio Code can also be used to debug an Ionic app running in the Chrome web browser.{' '}
-
-To do this, run your app in the browser using `ionic serve`. Take note of the port that your app is running on. Next, open your Ionic project using Visual Studio Code.
-
-In the far-left vertical menu within VS Code, click on the `run` icon. If you are configuring this for the first time in your project, click on the option to create a `launch.json` file. Select **Chrome** from the environment options dropdown. This will automatically generate a `launch.json` file with configurations for launching Chrome against localhost.
-
-Make sure that the port used in the url property of your `launch.json` file matches the port that you observed earlier when you ran `ionic serve`. Using an incorrect port number will not work.
-
-In the debug target dropdown menu, select **Launch against Chrome**, then click run. This will open a new instance of the Chrome browser and VS code will attach to it. You can set breakpoints and use the other debugging tools within VS Code while your app is running in Chrome.
-
-## Debugging with Visual Studio Code in Android
-
-
-Visual Studio Code has a dedicated plugin for debugging apps that run in an Android WebView.
-
-
-The plugin creates a bridge between the device and the Visual Studio Code developer tools and permits debugging right from the
-editor.
-
-In order to use this plugin to debug your Ionic apps, first install it then start your app in the Android emulator or connect your Android device and run the app. You may need to enable USB debugging on your Android device.
-
-In the root of your Ionic project, create a folder called `.vscode` and inside that folder create a file called `launch.json`. Inside `launch.json`, enter the following code to configure the plugin to debug Ionic apps:
-
-```
-{
- "version": "0.2.0",
- "configurations": [
- {
- "type": "android-webview",
- "request": "attach",
- "name": "Attach to Android WebView",
- "webRoot": "${workspaceFolder}/www",
- "sourceMaps": true,
- "sourceMapPathOverrides": {
- "webpack:/*": "${workspaceFolder}/*"
- }
- }
- ]
-}
-```
-
-Next, launch the debugging process, selecting your device and Ionic app. VS Code will attach to both the Android device and Ionic app and you can now debug your app, which includes setting breakpoints.
-
-:::note
-If you are unable to set breakpoints and get an error saying, **"Breakpoint ignored because generated code not found (source map problem?)"** it means that the paths to the transpiled javascript files are incorrect. Use the `.scripts` command in the Debug console to see the loaded scripts. Make sure the paths of the scripts are correct by experimenting with different values in the `sourceMapPathOverrides` key in your `launch.json` configuration file.
-:::
diff --git a/versioned_docs/version-v5/troubleshooting/debugging.mdx b/versioned_docs/version-v5/troubleshooting/debugging.mdx
new file mode 100644
index 00000000000..1b1ed0d7a68
--- /dev/null
+++ b/versioned_docs/version-v5/troubleshooting/debugging.mdx
@@ -0,0 +1,94 @@
+# Debugging
+
+
+
+## Live Reload
+
+Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. [Learn more here](../cli/livereload.mdx).
+
+## iOS and Safari
+
+Safari can be used to debug an Ionic app on a connected iOS device or iOS simulator.
+
+First, on the iOS device, enable **Web Inspector** from Settings > Safari > Advanced.
+
+Next, open Safari on a Mac then enable **Show Develop menu in menu bar** under Safari > Preferences > Advanced.
+
+Run the iOS simulator or connect your iOS device to your Mac, then run the Ionic app that you want to debug.
+
+Within Safari, select **Develop** in the toolbar. In the dropdown menu options, you should see the name of your device and app. Hover over the app name and click on **localhost**. This will open a new window with the Safari Developer Tools - use them to inspect and debug the Ionic app running on your device.
+
+## Android and Chrome
+
+Use Google Chrome's DevTools to debug an app when it is running in the browser using the `ionic serve` command, deployed to an emulator, or on a physical device.
+
+To inspect a physical device, first you need to have developer mode enabled. Connect your Android device to the computer then go to `Settings > About` scroll to `Build Number` and tap that 7 times. This will activate a new option in the **Settings** menu called **Developer Options**.
+
+Next, go to `Settings > Developer Options` and ensure that the developer options switch is toggled on. Scroll down to **USB Debugging** and ensure that it is also enabled. Developer Options & USB Debugging are enabled by default in the Android emulator.
+
+Open the Chrome browser and navigate to the URL `chrome://inspect/#devices`. Your connected Android device should show up in the list of Remote Targets.
+
+On your device, open the Ionic app that you would like to debug using Chrome.
+
+With your app running on the device, head back to Chrome and click on **inspect** under your device in the list of remote targets. This will open the Chrome Developer Tools in a new window. You will then be able to use all of the Chrome DevTools to debug the application as it runs on your device.
+
+:::note
+The app preview may not automatically appear when you open Chrome Developer Tools due to a minor bug. To make it appear, click on the **Elements** tab then click on any DOM element then toggle off and on any CSS rule and the app preview window will appear.
+:::
+
+## Debugging with Visual Studio locally in Chrome (both Android & iOS)
+
+
+Visual Studio Code can also be used to debug an Ionic app running in the Chrome web browser.{' '}
+
+To do this, run your app in the browser using `ionic serve`. Take note of the port that your app is running on. Next, open your Ionic project using Visual Studio Code.
+
+In the far-left vertical menu within VS Code, click on the `run` icon. If you are configuring this for the first time in your project, click on the option to create a `launch.json` file. Select **Chrome** from the environment options dropdown. This will automatically generate a `launch.json` file with configurations for launching Chrome against localhost.
+
+Make sure that the port used in the url property of your `launch.json` file matches the port that you observed earlier when you ran `ionic serve`. Using an incorrect port number will not work.
+
+In the debug target dropdown menu, select **Launch against Chrome**, then click run. This will open a new instance of the Chrome browser and VS code will attach to it. You can set breakpoints and use the other debugging tools within VS Code while your app is running in Chrome.
+
+## Debugging with Visual Studio Code in Android
+
+
+Visual Studio Code has a dedicated plugin for debugging apps that run in an Android WebView.
+
+
+The plugin creates a bridge between the device and the Visual Studio Code developer tools and permits debugging right from the
+editor.
+
+In order to use this plugin to debug your Ionic apps, first install it then start your app in the Android emulator or connect your Android device and run the app. You may need to enable USB debugging on your Android device.
+
+In the root of your Ionic project, create a folder called `.vscode` and inside that folder create a file called `launch.json`. Inside `launch.json`, enter the following code to configure the plugin to debug Ionic apps:
+
+```
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "android-webview",
+ "request": "attach",
+ "name": "Attach to Android WebView",
+ "webRoot": "${workspaceFolder}/www",
+ "sourceMaps": true,
+ "sourceMapPathOverrides": {
+ "webpack:/*": "${workspaceFolder}/*"
+ }
+ }
+ ]
+}
+```
+
+Next, launch the debugging process, selecting your device and Ionic app. VS Code will attach to both the Android device and Ionic app and you can now debug your app, which includes setting breakpoints.
+
+:::note
+If you are unable to set breakpoints and get an error saying, **"Breakpoint ignored because generated code not found (source map problem?)"** it means that the paths to the transpiled javascript files are incorrect. Use the `.scripts` command in the Debug console to see the loaded scripts. Make sure the paths of the scripts are correct by experimenting with different values in the `sourceMapPathOverrides` key in your `launch.json` configuration file.
+:::
diff --git a/versioned_docs/version-v5/troubleshooting/native.md b/versioned_docs/version-v5/troubleshooting/native.md
deleted file mode 100644
index 7e418bb6e9d..00000000000
--- a/versioned_docs/version-v5/troubleshooting/native.md
+++ /dev/null
@@ -1,88 +0,0 @@
-# Native Errors
-
-## Code Signing errors
-
-```shell
-Code Signing Error: Failed to create provisioning profile. The app ID "com.csform.ionic.yellow" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Code Signing Error: No profiles for 'com.csform.ionic.yellow' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.csform.ionic.yellow'. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.1'
-```
-
-Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions:
-
-1. Set the [Package ID](../reference/glossary.md#package-id).
-
- For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
-
- For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information.
-
-
-2. Open the project in Xcode.
-
- For Capacitor, run the following to open the app in Xcode:
-
- ```shell
- $ ionic capacitor open ios
- ```
-
- For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory.
-
-
-3. In Project navigator, select the project root to open the project editor. Under the **Identity** section,
- verify that the Package ID that was set matches the Bundle Identifier.
-
- 
-
-
-4. In the same project editor, under the Signing section, ensure Automatically manage signing is
- enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
-
- 
-
-## Xcode build error 65
-
-```shell
-Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/ionitron/projects/my-project/platforms/ios/cordova/build-debug.xcconfig,-workspace,SC project.xcworkspace,-scheme,SC project,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/sharedpch
-```
-
-This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.md#running-with-xcode).
-
-If this does not fix the error then run the following commands:
-
-```shell
-rm -rf node_modules
-rm -rf platform
-npm i
-ionic cordova platform add ios
-ionic cordova prepare ios
-ionic cordova build ios --prod
-```
-
-Once these commands have been ran a fresh build can be done.
-
-## Clashing Google Play Services versions
-
-```shell
-Error: more than one library with package name com.google.android.gms
-```
-
-This error is caused by two separate plugins trying to use different versions of the `Google Play Services`. To fix this issue make sure you are running `cordova` version `7.1.0` or higher and `cordova-android` `6.3.0` or higher. To install latest `cordova` run:
-
-```shell
-npm install cordova@latest
-```
-
-and to update `cordova-android` run:
-
-```shell
-cordova platform update android
-```
-
-Plugins that depend on `Google Play Services` can now be updated to use the same version. For example, if `pluginA` uses version 11.0 and `pluginB` uses version 15.0 they can be updated to use the same version with the following snippet in the `config.xml` file:
-
-```xml
-
-
-
-
-
-
-```
diff --git a/versioned_docs/version-v5/troubleshooting/native.mdx b/versioned_docs/version-v5/troubleshooting/native.mdx
new file mode 100644
index 00000000000..fc8328c837f
--- /dev/null
+++ b/versioned_docs/version-v5/troubleshooting/native.mdx
@@ -0,0 +1,88 @@
+# Native Errors
+
+## Code Signing errors
+
+```shell
+Code Signing Error: Failed to create provisioning profile. The app ID "com.csform.ionic.yellow" cannot be registered to your development team. Change your bundle identifier to a unique string to try again. Code Signing Error: No profiles for 'com.csform.ionic.yellow' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.csform.ionic.yellow'. Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 11.1'
+```
+
+Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions:
+
+1. Set the [Package ID](../reference/glossary.mdx#package-id).
+
+ For Capacitor, open the `capacitor.config.json` file and modify the `appId` property.
+
+ For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information.
+
+
+2. Open the project in Xcode.
+
+ For Capacitor, run the following to open the app in Xcode:
+
+ ```shell
+ $ ionic capacitor open ios
+ ```
+
+ For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory.
+
+
+3. In Project navigator, select the project root to open the project editor. Under the **Identity** section,
+ verify that the Package ID that was set matches the Bundle Identifier.
+
+ 
+
+
+4. In the same project editor, under the Signing section, ensure Automatically manage signing is
+ enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
+
+ 
+
+## Xcode build error 65
+
+```shell
+Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/ionitron/projects/my-project/platforms/ios/cordova/build-debug.xcconfig,-workspace,SC project.xcworkspace,-scheme,SC project,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/sharedpch
+```
+
+This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.mdx#running-with-xcode).
+
+If this does not fix the error then run the following commands:
+
+```shell
+rm -rf node_modules
+rm -rf platform
+npm i
+ionic cordova platform add ios
+ionic cordova prepare ios
+ionic cordova build ios --prod
+```
+
+Once these commands have been ran a fresh build can be done.
+
+## Clashing Google Play Services versions
+
+```shell
+Error: more than one library with package name com.google.android.gms
+```
+
+This error is caused by two separate plugins trying to use different versions of the `Google Play Services`. To fix this issue make sure you are running `cordova` version `7.1.0` or higher and `cordova-android` `6.3.0` or higher. To install latest `cordova` run:
+
+```shell
+npm install cordova@latest
+```
+
+and to update `cordova-android` run:
+
+```shell
+cordova platform update android
+```
+
+Plugins that depend on `Google Play Services` can now be updated to use the same version. For example, if `pluginA` uses version 11.0 and `pluginB` uses version 15.0 they can be updated to use the same version with the following snippet in the `config.xml` file:
+
+```xml
+
+
+
+
+
+
+```
diff --git a/versioned_docs/version-v5/troubleshooting/runtime.md b/versioned_docs/version-v5/troubleshooting/runtime.mdx
similarity index 100%
rename from versioned_docs/version-v5/troubleshooting/runtime.md
rename to versioned_docs/version-v5/troubleshooting/runtime.mdx
diff --git a/versioned_docs/version-v5/utilities/animations.md b/versioned_docs/version-v5/utilities/animations.md
deleted file mode 100644
index e1fe5b310cd..00000000000
--- a/versioned_docs/version-v5/utilities/animations.md
+++ /dev/null
@@ -1,1623 +0,0 @@
-import Codepen from '@components/global/Codepen';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-# Animations
-
-## Overview
-
-Ionic Animations is a tool that enables developers to create complex animations in a platform-agnostic manner, without requiring a specific framework or an Ionic app.
-
-Creating efficient animations can be challenging, as developers are limited by the available libraries and hardware resources of the device. Moreover, many animation libraries use a JavaScript-driven approach, which can reduce the scalability of animations and use up CPU time.
-
-Ionic Animations, on the other hand, uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offloads all the computation and running of animations to the browser. This approach allows the browser to optimize the animations and ensure their smooth execution. In cases where Web Animations are not supported, Ionic Animations will fall back to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), which should have a negligible difference in performance.
-
-## Installation
-
-````mdx-code-block
-
-
-
-Developers using Ionic Core and JavaScript should install the latest version of `@ionic/core`.
-
-```javascript
-import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/esm/index.mjs';
-
-...
-
-const animation = createAnimation()
- .addElement(myElementRef)
- .duration(1000)
- .fromTo('opacity', '1', '0.5');
-}
-
-```
-
-
-
-Developers using Ionic Core and TypeScript should install the latest version of `@ionic/core`.
-
-```tsx
-import { createAnimation, Animation } from '@ionic/core';
-
-...
-
-const animation: Animation = createAnimation('')
- .addElement(myElementRef)
- .duration(1000)
- .fromTo('opacity', '1', '0.5');
-}
-```
-
-
-
-Developers using Angular should install the latest version of `@ionic/angular`. Animations can be created via the `AnimationController` dependency injection.
-
-```tsx
-
-import { Animation, AnimationController } from '@ionic/angular';
-
-...
-
-constructor(private animationCtrl: AnimationController) {
- const animation: Animation = this.animationCtrl.create()
- .addElement(myElementRef)
- .duration(1000)
- .fromTo('opacity', '1', '0.5');
-}
-
-```
-
-
-
-Developers using React should install the latest version of `@ionic/react`. React wrappers are in beta. Please report any issues on GitHub!
-
-```tsx
-
-import { CreateAnimation, Animation } from '@ionic/react';
-
-...
-
-
-...
-
-
-```
-
-
-
-Developers using Ionic Vue should install the latest version of `@ionic/vue`.
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const myElementRef = ref();
-
-...
-
-const animation = createAnimation()
- .addElement(myElementRef.value)
- .duration(1000)
- .fromTo('opacity', '1', '0.5');
-}
-
-```
-
-
-````
-
-## Basic Animations
-
-### Usage
-
-````mdx-code-block
-
-
-
-```javascript
-createAnimation()
- .addElement(document.querySelector('.square'))
- .duration(1500)
- .iterations(Infinity)
- .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
- .fromTo('opacity', '1', '0.2');
-```
-
-
-
-```javascript
-this.animationCtrl.create()
- .addElement(document.querySelector('.square'))
- .duration(1500)
- .iterations(Infinity)
- .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
- .fromTo('opacity', '1', '0.2');
-```
-
-
-
-```tsx
-
- ...
-
-```
-
-
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const elementRef = ref();
-
-...
-
-createAnimation()
- .addElement(elementRef.value)
- .duration(1500)
- .iterations(Infinity)
- .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
- .fromTo('opacity', '1', '0.2');
-```
-
-
-````
-
-In the example above, an animation that changes the opacity on the `.square` element and moves it from left to right along the X axis has been created. This animation will run an infinite number of times, and each iteration of the animation will last 1500ms.
-
-By default, all Ionic Animations are paused until the `play` method is called.
-
-
-
-## Keyframe Animations
-
-Ionic Animations allows you to control the intermediate steps in an animation using keyframes. Any valid CSS property can be used here, and you can even use CSS Variables as values.
-
-Hyphenated CSS properties should be written using camel case when writing keyframes. For example, `border-radius` should be written as `borderRadius`. This also applies to the `fromTo()`, `from(),` and `to()` methods.
-
-### Usage
-
-````mdx-code-block
-
-
-
-```javascript
-createAnimation()
- .addElement(document.querySelector('.square'))
- .duration(3000)
- .iterations(Infinity)
- .keyframes([
- { offset: 0, background: 'red' },
- { offset: 0.72, background: 'var(--background)' },
- { offset: 1, background: 'green' }
- ]);
-```
-
-
-
-```javascript
-this.animationCtrl.create()
- .addElement(this.square.nativeElement)
- .duration(3000)
- .iterations(Infinity)
- .keyframes([
- { offset: 0, background: 'red' },
- { offset: 0.72, background: 'var(--background)' },
- { offset: 1, background: 'green' }
- ]);
-```
-
-
-
-```tsx
-
-...
-
-```
-
-
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const squareRef = ref();
-
-...
-
-createAnimation()
- .addElement(squareRef.value)
- .duration(3000)
- .iterations(Infinity)
- .keyframes([
- { offset: 0, background: 'red' },
- { offset: 0.72, background: 'var(--background)' },
- { offset: 1, background: 'green' }
- ]);
-```
-
-
-````
-
-In the example above, the `.square` element will transition from a red background color, to a background color defined by the `--background` variable, and then transition on to a green background color.
-
-Each keyframe object contains an `offset` property. `offset` is a value between 0 and 1 that defines the keyframe step. Offset values must go in ascending order and cannot repeat.
-
-
-
-## Grouped Animations
-
-Multiple elements can be animated at the same time and controlled via a single parent animation object. Child animations inherit properties such as duration, easing, and iterations unless otherwise specified. A parent animation's `onFinish` callback will not be called until all child animations have completed.
-
-### Usage
-
-````mdx-code-block
-
-
-
-```javascript
-const squareA = createAnimation()
- .addElement(document.querySelector('.square-a'))
- .keyframes([
- { offset: 0, transform: 'scale(1) rotate(0)' },
- { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
- { offset: 1, transform: 'scale(1) rotate(45deg)' }
- ]);
-
-const squareB = createAnimation()
- .addElement(document.querySelector('.square-b'))
- .keyframes([
- { offset: 0, transform: 'scale(1))', opacity: '1' },
- { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
- { offset: 1, transform: 'scale(1)', opacity: '1' }
- ]);
-
-const squareC = createAnimation()
- .addElement(document.querySelector('.square-c'))
- .duration(5000)
- .keyframes([
- { offset: 0, transform: 'scale(1))', opacity: '0.5' },
- { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
- { offset: 1, transform: 'scale(1)', opacity: '0.5' }
- ]);
-
-const parent = createAnimation()
- .duration(2000)
- .iterations(Infinity)
- .addAnimation([squareA, squareB, squareC]);
-```
-
-
-
-
-```javascript
-const squareA = this.animationCtrl.create()
- .addElement(this.squareA.nativeElement)
- .keyframes([
- { offset: 0, transform: 'scale(1) rotate(0)' },
- { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
- { offset: 1, transform: 'scale(1) rotate(45deg)' }
- ]);
-
-const squareB = this.animationCtrl.create()
- .addElement(this.squareB.nativeElement)
- .keyframes([
- { offset: 0, transform: 'scale(1))', opacity: '1' },
- { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
- { offset: 1, transform: 'scale(1)', opacity: '1' }
- ]);
-
-const squareC = this.animationCtrl.create()
- .addElement(this.squareC.nativeElement)
- .duration(5000)
- .keyframes([
- { offset: 0, transform: 'scale(1))', opacity: '0.5' },
- { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
- { offset: 1, transform: 'scale(1)', opacity: '0.5' }
- ]);
-
-const parent = this.animationCtrl.create()
- .duration(2000)
- .iterations(Infinity)
- .addAnimation([squareA, squareB, squareC]);
-```
-
-
-
-
-```tsx
-private parentRef: React.RefObject = React.createRef();
-private squareARef: React.RefObject = React.createRef();
-private squareBRef: React.RefObject = React.createRef();
-private squareCRef: React.RefObject = React.createRef();
-
-...
-
-componentDidMount() {
- const parent = this.parentRef.current!.animation;
- const squareA = this.squareARef.current!.animation;
- const squareB = this.squareBRef.current!.animation;
- const squareC = this.squareCRef.current!.animation;
-
- parent.addAnimation([squareA, squareB, squareC]);
-}
-
-render() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-```
-
-
-
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const squareARef = ref();
-const squareBRef = ref();
-const squareCRef = ref();
-
-...
-
-const squareA = createAnimation()
- .addElement(squareARef.value)
- .keyframes([
- { offset: 0, transform: 'scale(1) rotate(0)' },
- { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
- { offset: 1, transform: 'scale(1) rotate(45deg)' }
- ]);
-
-const squareB = createAnimation()
- .addElement(squareBRef.value)
- .keyframes([
- { offset: 0, transform: 'scale(1))', opacity: '1' },
- { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
- { offset: 1, transform: 'scale(1)', opacity: '1' }
- ]);
-
-const squareC = createAnimation()
- .addElement(squareCRef.value)
- .duration(5000)
- .keyframes([
- { offset: 0, transform: 'scale(1))', opacity: '0.5' },
- { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
- { offset: 1, transform: 'scale(1)', opacity: '0.5' }
- ]);
-
-const parent = createAnimation()
- .duration(2000)
- .iterations(Infinity)
- .addAnimation([squareA, squareB, squareC]);
-```
-
-
-
-````
-
-This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set.
-
-
-
-
-
-## Before and After Hooks
-
-Ionic Animations provides hooks that let you alter an element before an animation runs and after an animation completes. These hooks can be used to perform DOM reads and writes as well as add or remove classes and inline styles.
-
-### Usage
-
-````mdx-code-block
-
-
-
-```javascript
-createAnimation()
- .addElement(document.querySelector('.square'))
- .duration(2000)
- .beforeStyles({
- opacity: 0.2
- })
- .afterStyles({
- background: 'rgba(0, 255, 0, 0.5)'
- })
- .afterClearStyles(['opacity'])
- .keyframes([
- { offset: 0, transform: 'scale(1)' },
- { offset: 0.5, transform: 'scale(1.5)' },
- { offset: 1, transform: 'scale(1)' }
- ])
-```
-
-
-
-```javascript
-this.animationCtrl.create()
- .addElement(this.square.nativeElement)
- .duration(2000)
- .beforeStyles({
- opacity: 0.2
- })
- .afterStyles({
- background: 'rgba(0, 255, 0, 0.5)'
- })
- .afterClearStyles(['opacity'])
- .keyframes([
- { offset: 0, transform: 'scale(1)' },
- { offset: 0.5, transform: 'scale(1.5)' },
- { offset: 1, transform: 'scale(1)' }
- ])
-```
-
-
-
-```tsx
-
- ...
-
-```
-
-
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const squareRef = ref();
-
-...
-
-createAnimation()
- .addElement(squareRef.value)
- .duration(2000)
- .beforeStyles({
- opacity: 0.2
- })
- .afterStyles({
- background: 'rgba(0, 255, 0, 0.5)'
- })
- .afterClearStyles(['opacity'])
- .keyframes([
- { offset: 0, transform: 'scale(1)' },
- { offset: 0.5, transform: 'scale(1.5)' },
- { offset: 1, transform: 'scale(1)' }
- ])
-```
-
-
-````
-
-In this example, an inline opacity of 0.2 is set on the `.square` element prior to the animation starting. Once the animation finishes, the background color of the element is set to `rgba(0, 255, 0, 0.5)`, and the inline opacity is cleared.
-
-See [Methods](#methods) for a complete list of hooks.
-
-
-
-
-
-## Chained Animations
-
-Animations can be chained to run one after the other. The `play` method returns a Promise that resolves when the animation has completed.
-
-### Usage
-
-````mdx-code-block
-
-
-
-```javascript
-const squareA = createAnimation()
- .addElement(document.querySelector('.square-a'))
- .fill('none')
- .duration(1000)
- .keyframes([
- { offset: 0, transform: 'scale(1) rotate(0)' },
- { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
- { offset: 1, transform: 'scale(1) rotate(0)' }
- ]);
-
-const squareB = createAnimation()
- .addElement(document.querySelector('.square-b'))
- .fill('none')
- .duration(1000)
- .keyframes([
- { offset: 0, transform: 'scale(1)', opacity: '1' },
- { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
- { offset: 1, transform: 'scale(1)', opacity: '1' }
- ]);
-
-const squareC = createAnimation()
- .addElement(document.querySelector('.square-c'))
- .fill('none')
- .duration(1000)
- .keyframes([
- { offset: 0, transform: 'scale(1)', opacity: '0.5' },
- { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
- { offset: 1, transform: 'scale(1)', opacity: '0.5' }
- ]);
-
-await squareA.play();
-await squareB.play();
-await squareC.play();
-```
-
-
-
-```javascript
-const squareA = this.animationCtrl.create()
- .addElement(this.squareA.nativeElement)
- .fill('none')
- .duration(1000)
- .keyframes([
- { offset: 0, transform: 'scale(1) rotate(0)' },
- { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
- { offset: 1, transform: 'scale(1) rotate(0)' }
- ]);
-
-const squareB = this.animationCtrl.create()
- .addElement(this.squareB.nativeElement)
- .fill('none')
- .duration(1000)
- .keyframes([
- { offset: 0, transform: 'scale(1)', opacity: '1' },
- { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
- { offset: 1, transform: 'scale(1)', opacity: '1' }
- ]);
-
-const squareC = this.animationCtrl.create()
- .addElement(this.squareC.nativeElement)
- .fill('none')
- .duration(1000)
- .keyframes([
- { offset: 0, transform: 'scale(1)', opacity: '0.5' },
- { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
- { offset: 1, transform: 'scale(1)', opacity: '0.5' }
- ]);
-
-await squareA.play();
-await squareB.play();
-await squareC.play();
-```
-
-
-
-```tsx
-private squareARef: React.RefObject = React.createRef();
-private squareBRef: React.RefObject = React.createRef();
-private squareCRef: React.RefObject = React.createRef();
-
-...
-
-async componentDidMount() {
- const squareA = this.squareARef.current!.animation;
- const squareB = this.squareBRef.current!.animation;
- const squareC = this.squareCRef.current!.animation;
-
- await squareA.play();
- await squareB.play();
- await squareC.play();
-}
-
-render() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-```
-
-
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const squareARef = ref();
-const squareBRef = ref();
-const squareCRef = ref();
-
-...
-
-const squareA = createAnimation()
- .addElement(squareARef.value)
- .fill('none')
- .duration(1000)
- .keyframes([
- { offset: 0, transform: 'scale(1) rotate(0)' },
- { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
- { offset: 1, transform: 'scale(1) rotate(0)' }
- ]);
-
-const squareB = createAnimation()
- .addElement(squareBRef.value)
- .fill('none')
- .duration(1000)
- .keyframes([
- { offset: 0, transform: 'scale(1)', opacity: '1' },
- { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
- { offset: 1, transform: 'scale(1)', opacity: '1' }
- ]);
-
-const squareC = createAnimation()
- .addElement(squareCRef.value)
- .fill('none')
- .duration(1000)
- .keyframes([
- { offset: 0, transform: 'scale(1)', opacity: '0.5' },
- { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
- { offset: 1, transform: 'scale(1)', opacity: '0.5' }
- ]);
-
-await squareA.play();
-await squareB.play();
-await squareC.play();
-```
-
-
-````
-
-
-
-## Gesture Animations
-
-Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.md).
-
-### Usage
-
-````mdx-code-block
-
-
-
-```javascript
-let initialStep = 0;
-let started = false;
-
-const square = document.querySelector('.square');
-const MAX_TRANSLATE = 400;
-
-const animation = createAnimation()
- .addElement(square)
- .duration(1000)
- .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
-
-const gesture = createGesture({
- el: square,
- threshold: 0,
- gestureName: 'square-drag',
- onMove: ev => onMove(ev),
- onEnd: ev => onEnd(ev)
-})
-
-gesture.enable(true);
-
-const onMove = (ev): {
- if (!started) {
- animation.progressStart();
- started = true;
- }
-
- animation.progressStep(getStep(ev));
-}
-
-const onEnd = (ev): {
- if (!started) { return; }
-
- gesture.enable(false);
-
- const step = getStep(ev);
- const shouldComplete = step > 0.5;
-
- animation
- .progressEnd((shouldComplete) ? 1 : 0, step)
- .onFinish((): { gesture.enable(true); });
-
- initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
- started = false;
-}
-
-const clamp = (min, n, max): {
- return Math.max(min, Math.min(n, max));
-};
-
-const getStep = (ev): {
- const delta = initialStep + ev.deltaX;
- return clamp(0, delta / MAX_TRANSLATE, 1);
-}
-```
-
-
-
-```tsx
-private animation?: Animation;
-private gesture?: Gesture;
-
-private started: boolean = false;
-private initialStep: number = 0;
-private MAX_TRANSLATE: number = 400;
-
-ngOnInit() {
- this.animation = this.animationCtrl.create()
- .addElement(this.square.nativeElement)
- .duration(1000)
- .fromTo('transform', 'translateX(0)', `translateX(${this.MAX_TRANSLATE}px)`);
-
- this.gesture = this.gestureCtrl.create({
- el: this.square.nativeElement,
- threshold: 0,
- gestureName: 'square-drag',
- onMove: ev => this.onMove(ev),
- onEnd: ev => this.onEnd(ev)
- })
-
- this.gesture.enable(true);
-}
-
-private onMove(ev) {
- if (!started) {
- this.animation.progressStart();
- this.started = true;
- }
-
- this.animation.progressStep(this.getStep(ev));
-}
-
-private onEnd(ev) {
- if (!this.started) { return; }
-
- this.gesture.enable(false);
-
- const step = this.getStep(ev);
- const shouldComplete = step > 0.5;
-
- this.animation
- .progressEnd((shouldComplete) ? 1 : 0, step)
- .onFinish((): { this.gesture.enable(true); });
-
- this.initialStep = (shouldComplete) ? this.MAX_TRANSLATE : 0;
- this.started = false;
-}
-
-private clamp(min, n, max) {
- return Math.max(min, Math.min(n, max));
-}
-
-private getStep(ev) {
- const delta = this.initialStep + ev.deltaX;
- return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
-}
-```
-
-
-
-```javascript
-import { createGesture, CreateAnimation, Gesture, GestureDetail } from '@ionic/react';
-import React from 'react';
-
-const MAX_TRANSLATE = 400;
-
-class MyComponent extends React.Component<{}, any> {
- private animation: React.RefObject = React.createRef();
- private gesture?: Gesture;
- private started: boolean = false;
- private initialStep: number = 0;
-
- constructor(props: any) {
- super(props);
-
- this.state = {
- progressStart: undefined,
- progressStep: undefined,
- progressEnd: undefined,
- onFinish: undefined
- };
- }
-
- componentDidMount() {
- const square = Array.from(this.animation.current!.nodes.values())[0];
-
- this.gesture = createGesture({
- el: square,
- gestureName: 'square-drag',
- threshold: 0,
- onMove: ev => this.onMove(ev),
- onEnd: ev => this.onEnd(ev)
- });
-
- this.gesture.enable(true);
- }
-
- private onMove(ev: GestureDetail) {
- if (!this.started) {
- this.setState({
- ...this.state,
- progressStart: { forceLinearEasing: true }
- });
- this.started = true;
- }
-
- this.setState({
- ...this.state,
- progressStep: { step: this.getStep(ev) }
- });
- }
-
- private onEnd(ev: GestureDetail) {
- if (!this.started) { return; }
-
- this.gesture!.enable(false);
-
- const step = this.getStep(ev);
- const shouldComplete = step > 0.5;
-
- this.setState({
- ...this.state,
- progressEnd: { playTo: (shouldComplete) ? 1 : 0, step },
- onFinish: { callback: () => {
- this.gesture!.enable(true);
- this.setState({
- progressStart: undefined,
- progressStep: undefined,
- progressEnd: undefined
- })
- }, opts: { oneTimeCallback: true }}
- });
-
- this.initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
- this.started = false;
- }
-
- private getStep(ev: GestureDetail) {
- const delta = this.initialStep + ev.deltaX;
- return this.clamp(0, delta / MAX_TRANSLATE, 1);
- }
-
- private clamp(min: number, n: number, max: number) {
- return Math.max(min, Math.min(n, max));
- }
-
- render() {
- return (
- <>
-
-
- );
- }
-}
-```
-
-
-
-```javascript
-import { createAnimation, createGesture } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-let initialStep = 0;
-let started = false;
-
-const squareRef = ref();
-const MAX_TRANSLATE = 400;
-
-const animation = createAnimation()
- .addElement(squareRef.value)
- .duration(1000)
- .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
-
-const gesture = createGesture({
- el: squareRef.value,
- threshold: 0,
- gestureName: 'square-drag',
- onMove: ev => onMove(ev),
- onEnd: ev => onEnd(ev)
-})
-
-gesture.enable(true);
-
-const onMove = (ev): {
- if (!started) {
- animation.progressStart();
- started = true;
- }
-
- animation.progressStep(getStep(ev));
-}
-
-const onEnd = (ev): {
- if (!started) { return; }
-
- gesture.enable(false);
-
- const step = getStep(ev);
- const shouldComplete = step > 0.5;
-
- animation
- .progressEnd((shouldComplete) ? 1 : 0, step)
- .onFinish((): { gesture.enable(true); });
-
- initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
- started = false;
-}
-
-const clamp = (min, n, max): {
- return Math.max(min, Math.min(n, max));
-};
-
-const getStep = (ev): {
- const delta = initialStep + ev.deltaX;
- return clamp(0, delta / MAX_TRANSLATE, 1);
-}
-```
-
-
-````
-
-In this example we are creating a track along which we can drag the `.square` element. Our `animation` object will take care of moving the `.square` element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
-
-
-
-## Preference-Based Animations
-
-Developers can also tailor their animations to user preferences such as `prefers-reduced-motion` and `prefers-color-scheme` using CSS Variables.
-
-### Usage
-
-```css
-.square {
- width: 100px;
- height: 100px;
- opacity: 0.5;
- background: blue;
- margin: 10px;
-
- --background: red;
-}
-
-@media (prefers-color-scheme: dark) {
- .square {
- --background: green;
- }
-}
-```
-
-````mdx-code-block
-
-
-
-```javascript
-createAnimation()
- .addElement(document.querySelector('.square'))
- .duration(1500)
- .iterations(Infinity)
- .direction('alternate')
- .fromTo('background', 'blue', 'var(--background)');
-```
-
-
-
-```javascript
-this.animationCtrl.create()
- .addElement(this.square.nativeElement)
- .duration(1500)
- .iterations(Infinity)
- .direction('alternate')
- .fromTo('background', 'blue', 'var(--background)');
-```
-
-
-
-```tsx
-
-
-
-```
-
-
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const squareRef = ref();
-
-...
-
-createAnimation()
- .addElement(squareRef.value)
- .duration(1500)
- .iterations(Infinity)
- .direction('alternate')
- .fromTo('background', 'blue', 'var(--background)');
-```
-
-
-````
-
-This method works in all supported browsers when creating animations for the first time. Most browsers are also capable of dynamically updating keyframe animations as the CSS Variables change.
-
-Safari does not currently support dynamically updating keyframe animations. For developers who need this kind of support in Safari, they can use [MediaQueryList.addListener()](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener).
-
-
-
-## Overriding Ionic Component Animations
-
-Certain Ionic components allow developers to provide custom animations. All animations are provided as either properties on the component or are set via a global config.
-
-### Modals
-
-````mdx-code-block
-
-
-
-```javascript
-customElements.define('modal-page', class extends HTMLElement {
- connectedCallback() {
- this.innerHTML = `
-
-
- Modal Header
-
-
-
- Modal Content
-
- `;
- }
-});
-
-function presentModal() {
- const enterAnimation = (baseEl: any) => {
- const backdropAnimation = createAnimation()
- .addElement(baseEl.querySelector('ion-backdrop')!)
- .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
- const wrapperAnimation = createAnimation()
- .addElement(baseEl.querySelector('.modal-wrapper')!)
- .keyframes([
- { offset: 0, opacity: '0', transform: 'scale(0)' },
- { offset: 1, opacity: '0.99', transform: 'scale(1)' }
- ]);
-
- return createAnimation()
- .addElement(baseEl)
- .easing('ease-out')
- .duration(500)
- .addAnimation([backdropAnimation, wrapperAnimation]);
- }
-
- const leaveAnimation = (baseEl: any) => {
- return enterAnimation(baseEl).direction('reverse');
- }
-
- // create the modal with the `modal-page` component
- const modalElement = document.createElement('ion-modal');
- modalElement.component = 'modal-page';
- modalElement.enterAnimation = enterAnimation;
- modalElement.leaveAnimation = leaveAnimation;
-
- // present the modal
- document.body.appendChild(modalElement);
- return modalElement.present();
-}
-```
-
-
-
-```tsx
-import { Component } from '@angular/core';
-import { ModalController, AnimationController } from '@ionic/angular';
-import { ModalPage } from '../modal/modal.page';
-
-@Component({
- selector: 'modal-example',
- templateUrl: 'modal-example.html',
- styleUrls: ['./modal-example.css']
-})
-export class ModalExample {
- constructor(public modalController: ModalController,
- public animationCtrl: AnimationController) { }
-
- async presentModal() {
- const enterAnimation = (baseEl: any) => {
- const backdropAnimation = this.animationCtrl.create()
- .addElement(baseEl.querySelector('ion-backdrop')!)
- .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
- const wrapperAnimation = this.animationCtrl.create()
- .addElement(baseEl.querySelector('.modal-wrapper')!)
- .keyframes([
- { offset: 0, opacity: '0', transform: 'scale(0)' },
- { offset: 1, opacity: '0.99', transform: 'scale(1)' }
- ]);
-
- return this.animationCtrl.create()
- .addElement(baseEl)
- .easing('ease-out')
- .duration(500)
- .addAnimation([backdropAnimation, wrapperAnimation]);
- }
-
- const leaveAnimation = (baseEl: any) => {
- return enterAnimation(baseEl).direction('reverse');
- }
-
- const modal = await this.modalController.create({
- component: ModalPage,
- enterAnimation,
- leaveAnimation
- });
- return await modal.present();
- }
-}
-```
-
-
-
-```javascript
-import React, { useState } from 'react';
-import { CreateAnimation, IonModal, IonButton, IonContent } from '@ionic/react';
-
-export const ModalExample: React.FC = () => {
- const [showModal, setShowModal] = useState(false);
-
- const enterAnimation = (baseEl: any) => {
- const backdropAnimation = createAnimation()
- .addElement(baseEl.querySelector('ion-backdrop')!)
- .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
-
- const wrapperAnimation = createAnimation()
- .addElement(baseEl.querySelector('.modal-wrapper')!)
- .keyframes([
- { offset: 0, opacity: '0', transform: 'scale(0)' },
- { offset: 1, opacity: '0.99', transform: 'scale(1)' }
- ]);
-
- return createAnimation()
- .addElement(baseEl)
- .easing('ease-out')
- .duration(500)
- .addAnimation([backdropAnimation, wrapperAnimation]);
- }
-
- const leaveAnimation = (baseEl: any) => {
- return enterAnimation(baseEl).direction('reverse');
- }
-
- return (
-
-
- This is modal content
- setShowModal(false)}>Close Modal
-
- setShowModal(true)}>Show Modal
-
- );
-};
-```
-
-
-
-```javascript
-
-
-
-
- Modal content goes here.
-
-
- Show Modal
-
-
-
-
-
-```
-
-
-````
-
-
-
-
-
-## Performance Considerations
-
-CSS and Web Animations are usually handled on the compositor thread. This is different than the main thread where layout, painting, styling, and your JavaScript is executed. It is recommended that you prefer using properties that can be handled on the compositor thread for optimal animation performance.
-
-Animating properties such as `height` and `width` cause additional layouts and paints which can cause jank and degrade animation performance. On the other hand, animating properties such as `transform` and `opacity` are highly optimizable by the browser and typically do not cause much jank.
-
-For information on which CSS properties cause layouts or paints to occur, see [CSS Triggers](https://csstriggers.com/).
-
-## Debugging
-
-For debugging animations in Chrome, there is a great blog post about inspecting animations using the Chrome DevTools: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations.
-
-It is also recommended to assign unique identifiers to your animations. These identifiers will show up in the Animations inspector in Chrome and should make it easier to debug:
-
-```javascript
-/**
- * The animation for the .square element should
- * show "my-animation-identifier" in Chrome DevTools.
- */
-const animation = createAnimation('my-animation-identifier')
- .addElement(document.querySelector('.square'))
- .duration(1000)
- .fromTo('opacity', '1', '0');
-```
-
-## API
-
-This section provides a list of all the methods and properties available on the `Animation` class.
-
-### Interfaces
-
-#### AnimationDirection
-
-```tsx
-type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
-```
-
-#### AnimationFill
-
-```tsx
-type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
-```
-
-#### AnimationBuilder
-
-```tsx
-type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
-```
-
-:::note
-
-`opts` are additional options that are specific to the custom animation. For example, the sheet modal enter animation includes information for the current breakpoint.
-
-:::
-
-#### AnimationCallbackOptions
-
-```tsx
-interface AnimationCallbackOptions {
- /**
- * If true, the associated callback will only be fired once.
- */
- oneTimeCallback: boolean;
-}
-```
-
-#### AnimationPlayOptions
-
-```tsx
-interface AnimationPlayOptions {
- /**
- * If true, the animation will play synchronously.
- * This is the equivalent of running the animation
- * with a duration of 0ms.
- */
- sync: boolean;
-}
-```
-
-### Properties
-
-| Name | Description |
-| ------------------------------ | ------------------------------------------------- |
-| `childAnimations: Animation[]` | All child animations of a given parent animation. |
-| `elements: HTMLElement[]` | All elements attached to an animation. |
-| `parentAnimation?: Animation` | The parent animation of a given animation object. |
-
-### Methods
-
-| Name | Description |
-| -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `addAnimation(animationToAdd: Animation \| Animation[]): Animation` | Group one or more animations together to be controlled by a parent animation. |
-| `addElement(el: Element \| Element[] \| Node \| Node[] \| NodeList): Animation` | Add one or more elements to the animation. |
-| `afterAddClass(className: string \| string[]): Animation` | Add a class or array of classes to be added to all elements in an animation after the animation ends. |
-| `afterAddRead(readFn: (): void): Animation` | Add a function that performs a DOM read to be run after the animation ends. |
-| `afterAddWrite(writeFn: (): void): Animation` | Add a function that performs a DOM write to be run after the animation ends. |
-| `afterClearStyles(propertyNames: string[]): Animation` | Add an array of property names to be cleared from the inline styles on all elements in an animation after the animation ends. |
-| `afterRemoveClass(className: string \| string[]): Animation` | Add a class or an array of classes to be removed from all elements in an animation after the animation ends. |
-| `afterStyles(styles: { [property: string]: any }): Animation` | Add an object of styles to be applied to all elements in an animation after the animation ends. |
-| `beforeAddClass(className: string \| string[]): Animation` | Add a class or array of classes to be added to all elements in an animation before the animation starts. |
-| `beforeAddRead(readFn: (): void): Animation` | Add a function that performs a DOM read to be run before the animation starts. |
-| `beforeAddWrite(writeFn: (): void): Animation` | Add a function that performs a DOM write to be run before the animation starts. |
-| `beforeClearStyles(propertyNames: string[]): Animation` | Add an array of property names to be cleared from the inline styles on all elements in an animation before the animation starts. |
-| `beforeRemoveClass(className: string \| string[]): Animation` | Add a class or an array of classes to be removed from all elements in an animation before the animation starts. |
-| `beforeStyles(styles: { [property: string]: any }): Animation` | Add an object of styles to be applied to all elements in an animation before the animation starts. |
-| `direction(direction?: AnimationDirection): Animation` | Set the direction the animation should play in. |
-| `delay(delay?: number): Animation` | Set the delay for the start of the animation in milliseconds. |
-| `destroy(clearStyleSheets?: boolean): Animation` | Destroy the animation and clear all elements, child animations, and keyframes. |
-| `duration(duration?: number): Animation` | Set the duration of the animation in milliseconds. |
-| `easing(easing?: string): Animation` | Set the easing of the animation in milliseconds. See [Easing Effects](https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/easing#Value) for a list of accepted easing values. |
-| `from(property: string, value: any): Animation` | Set the start styles of the animation. |
-| `fromTo(property: string, fromValue: any, toValue: any): Animation` | Set the start and end styles of the animation. |
-| `fill(fill?: AnimationFill): Animation` | Set how the animation applies styles to its elements before and after the animation's execution. |
-| `iterations(iterations: number): Animation` | Set the number of times the animation cycle should be played before stopping. |
-| `keyframes(keyframes: any[]): Animation` | Set the keyframes for an animation. |
-| `onFinish(callback: (didComplete: boolean, animation: Animation): void, opts?: AnimationCallbackOptions): Animation` | Add a callback to be run upon the animation ending. |
-| `pause(): Animation` | Pause the animation. |
-| `play(opts?: AnimationPlayOptions): Promise` | Play the animation. |
-| `progressEnd(playTo?: 0 \| 1, step: number, dur?: number): Animation` | Stop seeking through an animation. |
-| `progressStart(forceLinearEasing?: boolean, step?: number): Animation` | Begin seeking through an animation. |
-| `progressStep(step: number): Animation` | Seek through an animation. |
-| `stop(): Animation` | Stop the animation and reset all elements to their initial state. |
-| `to(property: string, value: any): Animation` | Set the end styles of the animation. |
diff --git a/versioned_docs/version-v5/utilities/animations.mdx b/versioned_docs/version-v5/utilities/animations.mdx
new file mode 100644
index 00000000000..4f48176ce33
--- /dev/null
+++ b/versioned_docs/version-v5/utilities/animations.mdx
@@ -0,0 +1,1623 @@
+import Codepen from '@components/global/Codepen';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Animations
+
+## Overview
+
+Ionic Animations is a tool that enables developers to create complex animations in a platform-agnostic manner, without requiring a specific framework or an Ionic app.
+
+Creating efficient animations can be challenging, as developers are limited by the available libraries and hardware resources of the device. Moreover, many animation libraries use a JavaScript-driven approach, which can reduce the scalability of animations and use up CPU time.
+
+Ionic Animations, on the other hand, uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offloads all the computation and running of animations to the browser. This approach allows the browser to optimize the animations and ensure their smooth execution. In cases where Web Animations are not supported, Ionic Animations will fall back to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), which should have a negligible difference in performance.
+
+## Installation
+
+````mdx-code-block
+
+
+
+Developers using Ionic Core and JavaScript should install the latest version of `@ionic/core`.
+
+```javascript
+import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/esm/index.mjs';
+
+...
+
+const animation = createAnimation()
+ .addElement(myElementRef)
+ .duration(1000)
+ .fromTo('opacity', '1', '0.5');
+}
+
+```
+
+
+
+Developers using Ionic Core and TypeScript should install the latest version of `@ionic/core`.
+
+```tsx
+import { createAnimation, Animation } from '@ionic/core';
+
+...
+
+const animation: Animation = createAnimation('')
+ .addElement(myElementRef)
+ .duration(1000)
+ .fromTo('opacity', '1', '0.5');
+}
+```
+
+
+
+Developers using Angular should install the latest version of `@ionic/angular`. Animations can be created via the `AnimationController` dependency injection.
+
+```tsx
+
+import { Animation, AnimationController } from '@ionic/angular';
+
+...
+
+constructor(private animationCtrl: AnimationController) {
+ const animation: Animation = this.animationCtrl.create()
+ .addElement(myElementRef)
+ .duration(1000)
+ .fromTo('opacity', '1', '0.5');
+}
+
+```
+
+
+
+Developers using React should install the latest version of `@ionic/react`. React wrappers are in beta. Please report any issues on GitHub!
+
+```tsx
+
+import { CreateAnimation, Animation } from '@ionic/react';
+
+...
+
+
+...
+
+
+```
+
+
+
+Developers using Ionic Vue should install the latest version of `@ionic/vue`.
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const myElementRef = ref();
+
+...
+
+const animation = createAnimation()
+ .addElement(myElementRef.value)
+ .duration(1000)
+ .fromTo('opacity', '1', '0.5');
+}
+
+```
+
+
+````
+
+## Basic Animations
+
+### Usage
+
+````mdx-code-block
+
+
+
+```javascript
+createAnimation()
+ .addElement(document.querySelector('.square'))
+ .duration(1500)
+ .iterations(Infinity)
+ .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+ .fromTo('opacity', '1', '0.2');
+```
+
+
+
+```javascript
+this.animationCtrl.create()
+ .addElement(document.querySelector('.square'))
+ .duration(1500)
+ .iterations(Infinity)
+ .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+ .fromTo('opacity', '1', '0.2');
+```
+
+
+
+```tsx
+
+ ...
+
+```
+
+
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const elementRef = ref();
+
+...
+
+createAnimation()
+ .addElement(elementRef.value)
+ .duration(1500)
+ .iterations(Infinity)
+ .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+ .fromTo('opacity', '1', '0.2');
+```
+
+
+````
+
+In the example above, an animation that changes the opacity on the `.square` element and moves it from left to right along the X axis has been created. This animation will run an infinite number of times, and each iteration of the animation will last 1500ms.
+
+By default, all Ionic Animations are paused until the `play` method is called.
+
+
+
+## Keyframe Animations
+
+Ionic Animations allows you to control the intermediate steps in an animation using keyframes. Any valid CSS property can be used here, and you can even use CSS Variables as values.
+
+Hyphenated CSS properties should be written using camel case when writing keyframes. For example, `border-radius` should be written as `borderRadius`. This also applies to the `fromTo()`, `from(),` and `to()` methods.
+
+### Usage
+
+````mdx-code-block
+
+
+
+```javascript
+createAnimation()
+ .addElement(document.querySelector('.square'))
+ .duration(3000)
+ .iterations(Infinity)
+ .keyframes([
+ { offset: 0, background: 'red' },
+ { offset: 0.72, background: 'var(--background)' },
+ { offset: 1, background: 'green' }
+ ]);
+```
+
+
+
+```javascript
+this.animationCtrl.create()
+ .addElement(this.square.nativeElement)
+ .duration(3000)
+ .iterations(Infinity)
+ .keyframes([
+ { offset: 0, background: 'red' },
+ { offset: 0.72, background: 'var(--background)' },
+ { offset: 1, background: 'green' }
+ ]);
+```
+
+
+
+```tsx
+
+...
+
+```
+
+
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const squareRef = ref();
+
+...
+
+createAnimation()
+ .addElement(squareRef.value)
+ .duration(3000)
+ .iterations(Infinity)
+ .keyframes([
+ { offset: 0, background: 'red' },
+ { offset: 0.72, background: 'var(--background)' },
+ { offset: 1, background: 'green' }
+ ]);
+```
+
+
+````
+
+In the example above, the `.square` element will transition from a red background color, to a background color defined by the `--background` variable, and then transition on to a green background color.
+
+Each keyframe object contains an `offset` property. `offset` is a value between 0 and 1 that defines the keyframe step. Offset values must go in ascending order and cannot repeat.
+
+
+
+## Grouped Animations
+
+Multiple elements can be animated at the same time and controlled via a single parent animation object. Child animations inherit properties such as duration, easing, and iterations unless otherwise specified. A parent animation's `onFinish` callback will not be called until all child animations have completed.
+
+### Usage
+
+````mdx-code-block
+
+
+
+```javascript
+const squareA = createAnimation()
+ .addElement(document.querySelector('.square-a'))
+ .keyframes([
+ { offset: 0, transform: 'scale(1) rotate(0)' },
+ { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+ { offset: 1, transform: 'scale(1) rotate(45deg)' }
+ ]);
+
+const squareB = createAnimation()
+ .addElement(document.querySelector('.square-b'))
+ .keyframes([
+ { offset: 0, transform: 'scale(1))', opacity: '1' },
+ { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+ { offset: 1, transform: 'scale(1)', opacity: '1' }
+ ]);
+
+const squareC = createAnimation()
+ .addElement(document.querySelector('.square-c'))
+ .duration(5000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1))', opacity: '0.5' },
+ { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+ { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+ ]);
+
+const parent = createAnimation()
+ .duration(2000)
+ .iterations(Infinity)
+ .addAnimation([squareA, squareB, squareC]);
+```
+
+
+
+
+```javascript
+const squareA = this.animationCtrl.create()
+ .addElement(this.squareA.nativeElement)
+ .keyframes([
+ { offset: 0, transform: 'scale(1) rotate(0)' },
+ { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+ { offset: 1, transform: 'scale(1) rotate(45deg)' }
+ ]);
+
+const squareB = this.animationCtrl.create()
+ .addElement(this.squareB.nativeElement)
+ .keyframes([
+ { offset: 0, transform: 'scale(1))', opacity: '1' },
+ { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+ { offset: 1, transform: 'scale(1)', opacity: '1' }
+ ]);
+
+const squareC = this.animationCtrl.create()
+ .addElement(this.squareC.nativeElement)
+ .duration(5000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1))', opacity: '0.5' },
+ { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+ { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+ ]);
+
+const parent = this.animationCtrl.create()
+ .duration(2000)
+ .iterations(Infinity)
+ .addAnimation([squareA, squareB, squareC]);
+```
+
+
+
+
+```tsx
+private parentRef: React.RefObject = React.createRef();
+private squareARef: React.RefObject = React.createRef();
+private squareBRef: React.RefObject = React.createRef();
+private squareCRef: React.RefObject = React.createRef();
+
+...
+
+componentDidMount() {
+ const parent = this.parentRef.current!.animation;
+ const squareA = this.squareARef.current!.animation;
+ const squareB = this.squareBRef.current!.animation;
+ const squareC = this.squareCRef.current!.animation;
+
+ parent.addAnimation([squareA, squareB, squareC]);
+}
+
+render() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+```
+
+
+
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const squareARef = ref();
+const squareBRef = ref();
+const squareCRef = ref();
+
+...
+
+const squareA = createAnimation()
+ .addElement(squareARef.value)
+ .keyframes([
+ { offset: 0, transform: 'scale(1) rotate(0)' },
+ { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+ { offset: 1, transform: 'scale(1) rotate(45deg)' }
+ ]);
+
+const squareB = createAnimation()
+ .addElement(squareBRef.value)
+ .keyframes([
+ { offset: 0, transform: 'scale(1))', opacity: '1' },
+ { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+ { offset: 1, transform: 'scale(1)', opacity: '1' }
+ ]);
+
+const squareC = createAnimation()
+ .addElement(squareCRef.value)
+ .duration(5000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1))', opacity: '0.5' },
+ { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+ { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+ ]);
+
+const parent = createAnimation()
+ .duration(2000)
+ .iterations(Infinity)
+ .addAnimation([squareA, squareB, squareC]);
+```
+
+
+
+````
+
+This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set.
+
+
+
+
+
+## Before and After Hooks
+
+Ionic Animations provides hooks that let you alter an element before an animation runs and after an animation completes. These hooks can be used to perform DOM reads and writes as well as add or remove classes and inline styles.
+
+### Usage
+
+````mdx-code-block
+
+
+
+```javascript
+createAnimation()
+ .addElement(document.querySelector('.square'))
+ .duration(2000)
+ .beforeStyles({
+ opacity: 0.2
+ })
+ .afterStyles({
+ background: 'rgba(0, 255, 0, 0.5)'
+ })
+ .afterClearStyles(['opacity'])
+ .keyframes([
+ { offset: 0, transform: 'scale(1)' },
+ { offset: 0.5, transform: 'scale(1.5)' },
+ { offset: 1, transform: 'scale(1)' }
+ ])
+```
+
+
+
+```javascript
+this.animationCtrl.create()
+ .addElement(this.square.nativeElement)
+ .duration(2000)
+ .beforeStyles({
+ opacity: 0.2
+ })
+ .afterStyles({
+ background: 'rgba(0, 255, 0, 0.5)'
+ })
+ .afterClearStyles(['opacity'])
+ .keyframes([
+ { offset: 0, transform: 'scale(1)' },
+ { offset: 0.5, transform: 'scale(1.5)' },
+ { offset: 1, transform: 'scale(1)' }
+ ])
+```
+
+
+
+```tsx
+
+ ...
+
+```
+
+
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const squareRef = ref();
+
+...
+
+createAnimation()
+ .addElement(squareRef.value)
+ .duration(2000)
+ .beforeStyles({
+ opacity: 0.2
+ })
+ .afterStyles({
+ background: 'rgba(0, 255, 0, 0.5)'
+ })
+ .afterClearStyles(['opacity'])
+ .keyframes([
+ { offset: 0, transform: 'scale(1)' },
+ { offset: 0.5, transform: 'scale(1.5)' },
+ { offset: 1, transform: 'scale(1)' }
+ ])
+```
+
+
+````
+
+In this example, an inline opacity of 0.2 is set on the `.square` element prior to the animation starting. Once the animation finishes, the background color of the element is set to `rgba(0, 255, 0, 0.5)`, and the inline opacity is cleared.
+
+See [Methods](#methods) for a complete list of hooks.
+
+
+
+
+
+## Chained Animations
+
+Animations can be chained to run one after the other. The `play` method returns a Promise that resolves when the animation has completed.
+
+### Usage
+
+````mdx-code-block
+
+
+
+```javascript
+const squareA = createAnimation()
+ .addElement(document.querySelector('.square-a'))
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1) rotate(0)' },
+ { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+ { offset: 1, transform: 'scale(1) rotate(0)' }
+ ]);
+
+const squareB = createAnimation()
+ .addElement(document.querySelector('.square-b'))
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
+ { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+ { offset: 1, transform: 'scale(1)', opacity: '1' }
+ ]);
+
+const squareC = createAnimation()
+ .addElement(document.querySelector('.square-c'))
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+ { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+ { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+ ]);
+
+await squareA.play();
+await squareB.play();
+await squareC.play();
+```
+
+
+
+```javascript
+const squareA = this.animationCtrl.create()
+ .addElement(this.squareA.nativeElement)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1) rotate(0)' },
+ { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+ { offset: 1, transform: 'scale(1) rotate(0)' }
+ ]);
+
+const squareB = this.animationCtrl.create()
+ .addElement(this.squareB.nativeElement)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
+ { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+ { offset: 1, transform: 'scale(1)', opacity: '1' }
+ ]);
+
+const squareC = this.animationCtrl.create()
+ .addElement(this.squareC.nativeElement)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+ { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+ { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+ ]);
+
+await squareA.play();
+await squareB.play();
+await squareC.play();
+```
+
+
+
+```tsx
+private squareARef: React.RefObject = React.createRef();
+private squareBRef: React.RefObject = React.createRef();
+private squareCRef: React.RefObject = React.createRef();
+
+...
+
+async componentDidMount() {
+ const squareA = this.squareARef.current!.animation;
+ const squareB = this.squareBRef.current!.animation;
+ const squareC = this.squareCRef.current!.animation;
+
+ await squareA.play();
+ await squareB.play();
+ await squareC.play();
+}
+
+render() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+```
+
+
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const squareARef = ref();
+const squareBRef = ref();
+const squareCRef = ref();
+
+...
+
+const squareA = createAnimation()
+ .addElement(squareARef.value)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1) rotate(0)' },
+ { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+ { offset: 1, transform: 'scale(1) rotate(0)' }
+ ]);
+
+const squareB = createAnimation()
+ .addElement(squareBRef.value)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
+ { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+ { offset: 1, transform: 'scale(1)', opacity: '1' }
+ ]);
+
+const squareC = createAnimation()
+ .addElement(squareCRef.value)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+ { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+ { offset: 1, transform: 'scale(1)', opacity: '0.5' }
+ ]);
+
+await squareA.play();
+await squareB.play();
+await squareC.play();
+```
+
+
+````
+
+
+
+## Gesture Animations
+
+Ionic Animations gives developers the ability to create powerful gesture-based animations by integrating seamlessly with [Ionic Gestures](gestures.mdx).
+
+### Usage
+
+````mdx-code-block
+
+
+
+```javascript
+let initialStep = 0;
+let started = false;
+
+const square = document.querySelector('.square');
+const MAX_TRANSLATE = 400;
+
+const animation = createAnimation()
+ .addElement(square)
+ .duration(1000)
+ .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+
+const gesture = createGesture({
+ el: square,
+ threshold: 0,
+ gestureName: 'square-drag',
+ onMove: ev => onMove(ev),
+ onEnd: ev => onEnd(ev)
+})
+
+gesture.enable(true);
+
+const onMove = (ev): {
+ if (!started) {
+ animation.progressStart();
+ started = true;
+ }
+
+ animation.progressStep(getStep(ev));
+}
+
+const onEnd = (ev): {
+ if (!started) { return; }
+
+ gesture.enable(false);
+
+ const step = getStep(ev);
+ const shouldComplete = step > 0.5;
+
+ animation
+ .progressEnd((shouldComplete) ? 1 : 0, step)
+ .onFinish((): { gesture.enable(true); });
+
+ initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+ started = false;
+}
+
+const clamp = (min, n, max): {
+ return Math.max(min, Math.min(n, max));
+};
+
+const getStep = (ev): {
+ const delta = initialStep + ev.deltaX;
+ return clamp(0, delta / MAX_TRANSLATE, 1);
+}
+```
+
+
+
+```tsx
+private animation?: Animation;
+private gesture?: Gesture;
+
+private started: boolean = false;
+private initialStep: number = 0;
+private MAX_TRANSLATE: number = 400;
+
+ngOnInit() {
+ this.animation = this.animationCtrl.create()
+ .addElement(this.square.nativeElement)
+ .duration(1000)
+ .fromTo('transform', 'translateX(0)', `translateX(${this.MAX_TRANSLATE}px)`);
+
+ this.gesture = this.gestureCtrl.create({
+ el: this.square.nativeElement,
+ threshold: 0,
+ gestureName: 'square-drag',
+ onMove: ev => this.onMove(ev),
+ onEnd: ev => this.onEnd(ev)
+ })
+
+ this.gesture.enable(true);
+}
+
+private onMove(ev) {
+ if (!started) {
+ this.animation.progressStart();
+ this.started = true;
+ }
+
+ this.animation.progressStep(this.getStep(ev));
+}
+
+private onEnd(ev) {
+ if (!this.started) { return; }
+
+ this.gesture.enable(false);
+
+ const step = this.getStep(ev);
+ const shouldComplete = step > 0.5;
+
+ this.animation
+ .progressEnd((shouldComplete) ? 1 : 0, step)
+ .onFinish((): { this.gesture.enable(true); });
+
+ this.initialStep = (shouldComplete) ? this.MAX_TRANSLATE : 0;
+ this.started = false;
+}
+
+private clamp(min, n, max) {
+ return Math.max(min, Math.min(n, max));
+}
+
+private getStep(ev) {
+ const delta = this.initialStep + ev.deltaX;
+ return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
+}
+```
+
+
+
+```javascript
+import { createGesture, CreateAnimation, Gesture, GestureDetail } from '@ionic/react';
+import React from 'react';
+
+const MAX_TRANSLATE = 400;
+
+class MyComponent extends React.Component<{}, any> {
+ private animation: React.RefObject = React.createRef();
+ private gesture?: Gesture;
+ private started: boolean = false;
+ private initialStep: number = 0;
+
+ constructor(props: any) {
+ super(props);
+
+ this.state = {
+ progressStart: undefined,
+ progressStep: undefined,
+ progressEnd: undefined,
+ onFinish: undefined
+ };
+ }
+
+ componentDidMount() {
+ const square = Array.from(this.animation.current!.nodes.values())[0];
+
+ this.gesture = createGesture({
+ el: square,
+ gestureName: 'square-drag',
+ threshold: 0,
+ onMove: ev => this.onMove(ev),
+ onEnd: ev => this.onEnd(ev)
+ });
+
+ this.gesture.enable(true);
+ }
+
+ private onMove(ev: GestureDetail) {
+ if (!this.started) {
+ this.setState({
+ ...this.state,
+ progressStart: { forceLinearEasing: true }
+ });
+ this.started = true;
+ }
+
+ this.setState({
+ ...this.state,
+ progressStep: { step: this.getStep(ev) }
+ });
+ }
+
+ private onEnd(ev: GestureDetail) {
+ if (!this.started) { return; }
+
+ this.gesture!.enable(false);
+
+ const step = this.getStep(ev);
+ const shouldComplete = step > 0.5;
+
+ this.setState({
+ ...this.state,
+ progressEnd: { playTo: (shouldComplete) ? 1 : 0, step },
+ onFinish: { callback: () => {
+ this.gesture!.enable(true);
+ this.setState({
+ progressStart: undefined,
+ progressStep: undefined,
+ progressEnd: undefined
+ })
+ }, opts: { oneTimeCallback: true }}
+ });
+
+ this.initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+ this.started = false;
+ }
+
+ private getStep(ev: GestureDetail) {
+ const delta = this.initialStep + ev.deltaX;
+ return this.clamp(0, delta / MAX_TRANSLATE, 1);
+ }
+
+ private clamp(min: number, n: number, max: number) {
+ return Math.max(min, Math.min(n, max));
+ }
+
+ render() {
+ return (
+ <>
+
+
+ );
+ }
+}
+```
+
+
+
+```javascript
+import { createAnimation, createGesture } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+let initialStep = 0;
+let started = false;
+
+const squareRef = ref();
+const MAX_TRANSLATE = 400;
+
+const animation = createAnimation()
+ .addElement(squareRef.value)
+ .duration(1000)
+ .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+
+const gesture = createGesture({
+ el: squareRef.value,
+ threshold: 0,
+ gestureName: 'square-drag',
+ onMove: ev => onMove(ev),
+ onEnd: ev => onEnd(ev)
+})
+
+gesture.enable(true);
+
+const onMove = (ev): {
+ if (!started) {
+ animation.progressStart();
+ started = true;
+ }
+
+ animation.progressStep(getStep(ev));
+}
+
+const onEnd = (ev): {
+ if (!started) { return; }
+
+ gesture.enable(false);
+
+ const step = getStep(ev);
+ const shouldComplete = step > 0.5;
+
+ animation
+ .progressEnd((shouldComplete) ? 1 : 0, step)
+ .onFinish((): { gesture.enable(true); });
+
+ initialStep = (shouldComplete) ? MAX_TRANSLATE : 0;
+ started = false;
+}
+
+const clamp = (min, n, max): {
+ return Math.max(min, Math.min(n, max));
+};
+
+const getStep = (ev): {
+ const delta = initialStep + ev.deltaX;
+ return clamp(0, delta / MAX_TRANSLATE, 1);
+}
+```
+
+
+````
+
+In this example we are creating a track along which we can drag the `.square` element. Our `animation` object will take care of moving the `.square` element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
+
+
+
+## Preference-Based Animations
+
+Developers can also tailor their animations to user preferences such as `prefers-reduced-motion` and `prefers-color-scheme` using CSS Variables.
+
+### Usage
+
+```css
+.square {
+ width: 100px;
+ height: 100px;
+ opacity: 0.5;
+ background: blue;
+ margin: 10px;
+
+ --background: red;
+}
+
+@media (prefers-color-scheme: dark) {
+ .square {
+ --background: green;
+ }
+}
+```
+
+````mdx-code-block
+
+
+
+```javascript
+createAnimation()
+ .addElement(document.querySelector('.square'))
+ .duration(1500)
+ .iterations(Infinity)
+ .direction('alternate')
+ .fromTo('background', 'blue', 'var(--background)');
+```
+
+
+
+```javascript
+this.animationCtrl.create()
+ .addElement(this.square.nativeElement)
+ .duration(1500)
+ .iterations(Infinity)
+ .direction('alternate')
+ .fromTo('background', 'blue', 'var(--background)');
+```
+
+
+
+```tsx
+
+
+
+```
+
+
+
+```javascript
+import { createAnimation } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const squareRef = ref();
+
+...
+
+createAnimation()
+ .addElement(squareRef.value)
+ .duration(1500)
+ .iterations(Infinity)
+ .direction('alternate')
+ .fromTo('background', 'blue', 'var(--background)');
+```
+
+
+````
+
+This method works in all supported browsers when creating animations for the first time. Most browsers are also capable of dynamically updating keyframe animations as the CSS Variables change.
+
+Safari does not currently support dynamically updating keyframe animations. For developers who need this kind of support in Safari, they can use [MediaQueryList.addListener()](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener).
+
+
+
+## Overriding Ionic Component Animations
+
+Certain Ionic components allow developers to provide custom animations. All animations are provided as either properties on the component or are set via a global config.
+
+### Modals
+
+````mdx-code-block
+
+
+
+```javascript
+customElements.define('modal-page', class extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+
+
+ Modal Header
+
+
+
+ Modal Content
+
+ `;
+ }
+});
+
+function presentModal() {
+ const enterAnimation = (baseEl: any) => {
+ const backdropAnimation = createAnimation()
+ .addElement(baseEl.querySelector('ion-backdrop')!)
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = createAnimation()
+ .addElement(baseEl.querySelector('.modal-wrapper')!)
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' }
+ ]);
+
+ return createAnimation()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ }
+
+ const leaveAnimation = (baseEl: any) => {
+ return enterAnimation(baseEl).direction('reverse');
+ }
+
+ // create the modal with the `modal-page` component
+ const modalElement = document.createElement('ion-modal');
+ modalElement.component = 'modal-page';
+ modalElement.enterAnimation = enterAnimation;
+ modalElement.leaveAnimation = leaveAnimation;
+
+ // present the modal
+ document.body.appendChild(modalElement);
+ return modalElement.present();
+}
+```
+
+
+
+```tsx
+import { Component } from '@angular/core';
+import { ModalController, AnimationController } from '@ionic/angular';
+import { ModalPage } from '../modal/modal.page';
+
+@Component({
+ selector: 'modal-example',
+ templateUrl: 'modal-example.html',
+ styleUrls: ['./modal-example.css']
+})
+export class ModalExample {
+ constructor(public modalController: ModalController,
+ public animationCtrl: AnimationController) { }
+
+ async presentModal() {
+ const enterAnimation = (baseEl: any) => {
+ const backdropAnimation = this.animationCtrl.create()
+ .addElement(baseEl.querySelector('ion-backdrop')!)
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = this.animationCtrl.create()
+ .addElement(baseEl.querySelector('.modal-wrapper')!)
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' }
+ ]);
+
+ return this.animationCtrl.create()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ }
+
+ const leaveAnimation = (baseEl: any) => {
+ return enterAnimation(baseEl).direction('reverse');
+ }
+
+ const modal = await this.modalController.create({
+ component: ModalPage,
+ enterAnimation,
+ leaveAnimation
+ });
+ return await modal.present();
+ }
+}
+```
+
+
+
+```javascript
+import React, { useState } from 'react';
+import { CreateAnimation, IonModal, IonButton, IonContent } from '@ionic/react';
+
+export const ModalExample: React.FC = () => {
+ const [showModal, setShowModal] = useState(false);
+
+ const enterAnimation = (baseEl: any) => {
+ const backdropAnimation = createAnimation()
+ .addElement(baseEl.querySelector('ion-backdrop')!)
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = createAnimation()
+ .addElement(baseEl.querySelector('.modal-wrapper')!)
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' }
+ ]);
+
+ return createAnimation()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ }
+
+ const leaveAnimation = (baseEl: any) => {
+ return enterAnimation(baseEl).direction('reverse');
+ }
+
+ return (
+
+
+ This is modal content
+ setShowModal(false)}>Close Modal
+
+ setShowModal(true)}>Show Modal
+
+ );
+};
+```
+
+
+
+```javascript
+
+
+
+
+ Modal content goes here.
+
+
+ Show Modal
+
+
+
+
+
+```
+
+
+````
+
+
+
+
+
+## Performance Considerations
+
+CSS and Web Animations are usually handled on the compositor thread. This is different than the main thread where layout, painting, styling, and your JavaScript is executed. It is recommended that you prefer using properties that can be handled on the compositor thread for optimal animation performance.
+
+Animating properties such as `height` and `width` cause additional layouts and paints which can cause jank and degrade animation performance. On the other hand, animating properties such as `transform` and `opacity` are highly optimizable by the browser and typically do not cause much jank.
+
+For information on which CSS properties cause layouts or paints to occur, see [CSS Triggers](https://csstriggers.com/).
+
+## Debugging
+
+For debugging animations in Chrome, there is a great blog post about inspecting animations using the Chrome DevTools: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations.
+
+It is also recommended to assign unique identifiers to your animations. These identifiers will show up in the Animations inspector in Chrome and should make it easier to debug:
+
+```javascript
+/**
+ * The animation for the .square element should
+ * show "my-animation-identifier" in Chrome DevTools.
+ */
+const animation = createAnimation('my-animation-identifier')
+ .addElement(document.querySelector('.square'))
+ .duration(1000)
+ .fromTo('opacity', '1', '0');
+```
+
+## API
+
+This section provides a list of all the methods and properties available on the `Animation` class.
+
+### Interfaces
+
+#### AnimationDirection
+
+```tsx
+type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+```
+
+#### AnimationFill
+
+```tsx
+type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';
+```
+
+#### AnimationBuilder
+
+```tsx
+type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
+```
+
+:::note
+
+`opts` are additional options that are specific to the custom animation. For example, the sheet modal enter animation includes information for the current breakpoint.
+
+:::
+
+#### AnimationCallbackOptions
+
+```tsx
+interface AnimationCallbackOptions {
+ /**
+ * If true, the associated callback will only be fired once.
+ */
+ oneTimeCallback: boolean;
+}
+```
+
+#### AnimationPlayOptions
+
+```tsx
+interface AnimationPlayOptions {
+ /**
+ * If true, the animation will play synchronously.
+ * This is the equivalent of running the animation
+ * with a duration of 0ms.
+ */
+ sync: boolean;
+}
+```
+
+### Properties
+
+| Name | Description |
+| ------------------------------ | ------------------------------------------------- |
+| `childAnimations: Animation[]` | All child animations of a given parent animation. |
+| `elements: HTMLElement[]` | All elements attached to an animation. |
+| `parentAnimation?: Animation` | The parent animation of a given animation object. |
+
+### Methods
+
+| Name | Description |
+| -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `addAnimation(animationToAdd: Animation \| Animation[]): Animation` | Group one or more animations together to be controlled by a parent animation. |
+| `addElement(el: Element \| Element[] \| Node \| Node[] \| NodeList): Animation` | Add one or more elements to the animation. |
+| `afterAddClass(className: string \| string[]): Animation` | Add a class or array of classes to be added to all elements in an animation after the animation ends. |
+| `afterAddRead(readFn: (): void): Animation` | Add a function that performs a DOM read to be run after the animation ends. |
+| `afterAddWrite(writeFn: (): void): Animation` | Add a function that performs a DOM write to be run after the animation ends. |
+| `afterClearStyles(propertyNames: string[]): Animation` | Add an array of property names to be cleared from the inline styles on all elements in an animation after the animation ends. |
+| `afterRemoveClass(className: string \| string[]): Animation` | Add a class or an array of classes to be removed from all elements in an animation after the animation ends. |
+| `afterStyles(styles: { [property: string]: any }): Animation` | Add an object of styles to be applied to all elements in an animation after the animation ends. |
+| `beforeAddClass(className: string \| string[]): Animation` | Add a class or array of classes to be added to all elements in an animation before the animation starts. |
+| `beforeAddRead(readFn: (): void): Animation` | Add a function that performs a DOM read to be run before the animation starts. |
+| `beforeAddWrite(writeFn: (): void): Animation` | Add a function that performs a DOM write to be run before the animation starts. |
+| `beforeClearStyles(propertyNames: string[]): Animation` | Add an array of property names to be cleared from the inline styles on all elements in an animation before the animation starts. |
+| `beforeRemoveClass(className: string \| string[]): Animation` | Add a class or an array of classes to be removed from all elements in an animation before the animation starts. |
+| `beforeStyles(styles: { [property: string]: any }): Animation` | Add an object of styles to be applied to all elements in an animation before the animation starts. |
+| `direction(direction?: AnimationDirection): Animation` | Set the direction the animation should play in. |
+| `delay(delay?: number): Animation` | Set the delay for the start of the animation in milliseconds. |
+| `destroy(clearStyleSheets?: boolean): Animation` | Destroy the animation and clear all elements, child animations, and keyframes. |
+| `duration(duration?: number): Animation` | Set the duration of the animation in milliseconds. |
+| `easing(easing?: string): Animation` | Set the easing of the animation in milliseconds. See [Easing Effects](https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/easing#Value) for a list of accepted easing values. |
+| `from(property: string, value: any): Animation` | Set the start styles of the animation. |
+| `fromTo(property: string, fromValue: any, toValue: any): Animation` | Set the start and end styles of the animation. |
+| `fill(fill?: AnimationFill): Animation` | Set how the animation applies styles to its elements before and after the animation's execution. |
+| `iterations(iterations: number): Animation` | Set the number of times the animation cycle should be played before stopping. |
+| `keyframes(keyframes: any[]): Animation` | Set the keyframes for an animation. |
+| `onFinish(callback: (didComplete: boolean, animation: Animation): void, opts?: AnimationCallbackOptions): Animation` | Add a callback to be run upon the animation ending. |
+| `pause(): Animation` | Pause the animation. |
+| `play(opts?: AnimationPlayOptions): Promise` | Play the animation. |
+| `progressEnd(playTo?: 0 \| 1, step: number, dur?: number): Animation` | Stop seeking through an animation. |
+| `progressStart(forceLinearEasing?: boolean, step?: number): Animation` | Begin seeking through an animation. |
+| `progressStep(step: number): Animation` | Seek through an animation. |
+| `stop(): Animation` | Stop the animation and reset all elements to their initial state. |
+| `to(property: string, value: any): Animation` | Set the end styles of the animation. |
diff --git a/versioned_docs/version-v5/utilities/gestures.md b/versioned_docs/version-v5/utilities/gestures.md
deleted file mode 100644
index 80c96f088e1..00000000000
--- a/versioned_docs/version-v5/utilities/gestures.md
+++ /dev/null
@@ -1,496 +0,0 @@
-import Codepen from '@components/global/Codepen';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-# Gestures
-
-## Overview
-
-Ionic Gestures is a utility that allows developers to build custom gestures and interactions for their application in a platform agnostic manner. Developers do not need to be using a particular framework such as React or Angular, nor do they even need to be building an Ionic app! As long as developers have access to v5.0 or greater of Ionic Framework, they will have access to all of Ionic Animations.
-
-Building complex gestures can be time consuming. Other libraries that provide custom gestures are often times too heavy handed and end up capturing mouse or touch events and not letting them propagate. This can result in other elements no longer being scrollable or clickable.
-
-## Installation
-
-````mdx-code-block
-
-
-
-Developers using Ionic Core and JavaScript should install the latest version of `@ionic/core`.
-
-```javascript
-import { createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/esm/index.mjs';
-
-...
-
-const gesture = createGesture({
- el: elementRef,
- threshold: 15,
- gestureName: 'my-gesture',
- onMove: ev => onMoveHandler(ev)
-});
-
-```
-
-
-
-Developers using Ionic Core and TypeScript should install the latest version of `@ionic/core`.
-
-```tsx
-import { createGesture, Gesture } from '@ionic/core';
-
-...
-
-const gesture: Gesture = createGesture({
- el: elementRef,
- threshold: 15,
- gestureName: 'my-gesture',
- onMove: ev => onMoveHandler(ev)
-});
-```
-
-
-
-Developers using Angular should install the latest version of `@ionic/angular`. Animations can be created via the `AnimationController` dependency injection.
-
-By default, gesture callbacks do not run inside of NgZone. Developers can either set the `runInsideAngularZone` parameter to `true` when creating a gesture,
-or they can wrap their callbacks in an `NgZone.run()` call.
-
-```tsx
-import { Gesture, GestureController } from '@ionic/angular';
-
-...
-
-constructor(private gestureCtrl: GestureController) {
- const gesture: Gesture = this.gestureCtrl.create({
- el: this.element.nativeElement,
- threshold: 15,
- gestureName: 'my-gesture',
- onMove: ev => this.onMoveHandler(ev)
- }, true);
- // The `true` above ensures that callbacks run inside NgZone.
-}
-
-```
-
-
-
-Developers using React should install the latest version of `@ionic/react`. Full React wrappers are coming soon!
-
-```tsx
-import { createGesture, Gesture } from '@ionic/react';
-
-...
-
-const gesture: Gesture = createGesture({
- el: elementRef,
- threshold: 15,
- gestureName: 'my-gesture',
- onMove: ev => onMoveHandler(ev)
-});
-```
-
-
-
-Developers using Ionic Vue should install the latest version of `@ionic/vue`.
-
-```javascript
-import { createGesture } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const elementRef = ref();
-
-...
-
-const gesture = createGesture({
- el: elementRef.value,
- threshold: 15,
- gestureName: 'my-gesture',
- onMove: ev => onMoveHandler(ev)
-});
-
-```
-
-
-````
-
-## Basic Gestures
-
-### Usage
-
-````mdx-code-block
-
-
-
-```javascript
-let p = document.querySelector('p');
-const gesture = createGesture({
- el: document.querySelector('.rectangle'),
- onMove: (detail) => { onMove(detail); }
-})
-
-gesture.enable();
-
-const onMove = (detail) => {
- const type = detail.type;
- const currentX = detail.currentX;
- const deltaX = detail.deltaX;
- const velocityX = detail.velocityX;
-
- p.innerHTML = `
- Type: ${type}
- Current X: ${currentX}
- Delta X: ${deltaX}
- Velocity X: ${velocityX}
- `
-}
-```
-
-
-
-```javascript
-@ViewChild('paragraph') p: ElementRef;
-
-ngOnInit() {
- const gesture = this.gestureCtrl.create({
- gestureName: 'my-gesture',
- el: this.rectangle.nativeElement,
- onMove: (detail) => { this.onMove(detail); }
- })
-
- gesture.enable();
-}
-
-private onMove(detail) {
- const type = detail.type;
- const currentX = detail.currentX;
- const deltaX = detail.deltaX;
- const velocityX = detail.velocityX;
-
- this.p.nativeElement.innerHTML = `
- Type: ${type}
- Current X: ${currentX}
- Delta X: ${deltaX}
- Velocity X: ${velocityX}
- `
-}
-```
-
-
-
-```javascript
-let p = document.querySelector('p');
-const gesture = createGesture({
- el: document.querySelector('.rectangle'),
- onMove: (detail) => { onMove(detail); }
-})
-
-gesture.enable();
-
-const onMove = (detail) => {
- const type = detail.type;
- const currentX = detail.currentX;
- const deltaX = detail.deltaX;
- const velocityX = detail.velocityX;
-
- p.innerHTML = `
- Type: ${type}
- Current X: ${currentX}
- Delta X: ${deltaX}
- Velocity X: ${velocityX}
- `
-}
-```
-
-
-
-```javascript
-import { createGesture } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-let pRef = ref();
-const rectangleRef = ref();
-const gesture = createGesture({
- el: rectangleRef.value,
- onMove: (detail) => { onMove(detail); }
-})
-
-gesture.enable();
-
-const onMove = (detail) => {
- const type = detail.type;
- const currentX = detail.currentX;
- const deltaX = detail.deltaX;
- const velocityX = detail.velocityX;
-
- pRef.value.innerHTML = `
- Type: ${type}
- Current X: ${currentX}
- Delta X: ${deltaX}
- Velocity X: ${velocityX}
- `
-}
-```
-
-
-````
-
-In this example, our app listens for gestures on the `.rectangle` element. When a gesture movement is detected, the `onMove` function is called, and our app logs the current gesture information.
-
-
-
-## Double Click Gesture
-
-### Usage
-
-````mdx-code-block
-
-
-
-```javascript
-const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
-const DOUBLE_CLICK_THRESHOLD = 500;
-const rectangle = document.querySelector('.rectangle');
-const gesture = createGesture({
- el: rectangle,
- threshold: 0,
- onStart: () => { onStart(); }
-});
-
-gesture.enable();
-
-let lastOnStart = 0;
-let currentColor = 'rgba(0, 0, 255, 0.5)';
-
-const onStart = () => {
- const now = Date.now();
-
- if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
- rectangle.style.setProperty('background', getRandomBackground());
- lastOnStart = 0;
- } else {
- lastOnStart = now;
- }
-}
-
-const getRandomBackground = () => {
- const options = backgrounds.filter(bg => bg !== currentColor);
- currentColor = options[Math.floor(Math.random() * options.length)];
-
- return currentColor;
-}
-```
-
-
-
-```tsx
-@ViewChild('rectangle') rectangle: ElementRef;
-
-private backgrounds: string[] = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
-private currentColor: string = 'rgba(0, 0, 255, 0.5)';
-private lastOnStart: number = 0;
-private DOUBLE_CLICK_THRESHOLD: number = 500;
-
-ngOnInit() {
- const gesture = this.gestureCtrl.create({
- el: this.rectangle.nativeElement,
- threshold: 0,
- onStart: () => { this.onStart(); }
- });
-
- gesture.enable();
-}
-
-private onStart() {
- const now = Date.now();
-
- if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
- this.rectangle.nativeElement.style.setProperty('background', this.getRandomBackground());
- this.lastOnStart = 0;
- } else {
- this.lastOnStart = now;
- }
-}
-
-private getRandomBackground() {
- const options = this.backgrounds.filter(bg => bg !== this.currentColor);
- this.currentColor = options[Math.floor(Math.random() * options.length)];
-
- return this.currentColor;
-}
-```
-
-
-
-```javascript
-const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
-const DOUBLE_CLICK_THRESHOLD = 500;
-const rectangle = document.querySelector('.rectangle');
-const gesture = createGesture({
- el: rectangle,
- threshold: 0,
- onStart: () => { onStart(); }
-});
-
-gesture.enable();
-
-let lastOnStart = 0;
-let currentColor = 'rgba(0, 0, 255, 0.5)';
-
-const onStart = () => {
- const now = Date.now();
-
- if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
- rectangle.style.setProperty('background', getRandomBackground());
- lastOnStart = 0;
- } else {
- lastOnStart = now;
- }
-}
-
-const getRandomBackground = () => {
- const options = backgrounds.filter(bg => bg !== currentColor);
- currentColor = options[Math.floor(Math.random() * options.length)];
-
- return currentColor;
-}
-```
-
-
-
-```javascript
-import { createGesture } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
-const DOUBLE_CLICK_THRESHOLD = 500;
-const rectangleRef = ref();
-const gesture = createGesture({
- el: rectangleRef.value,
- threshold: 0,
- onStart: () => { onStart(); }
-});
-
-gesture.enable();
-
-let lastOnStart = 0;
-let currentColor = 'rgba(0, 0, 255, 0.5)';
-
-const onStart = () => {
- const now = Date.now();
-
- if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
- rectangleRef.value.style.setProperty('background', getRandomBackground());
- lastOnStart = 0;
- } else {
- lastOnStart = now;
- }
-}
-
-const getRandomBackground = () => {
- const options = backgrounds.filter(bg => bg !== currentColor);
- currentColor = options[Math.floor(Math.random() * options.length)];
-
- return currentColor;
-}
-```
-
-
-````
-
-In the example above, we want to be able to detect double clicks on an element. By setting our `threshold` to `0`, we can ensure our gesture object can detect clicks. Additionally, we define a click threshold so that only 2 clicks that occur in quick succession count as a double click.
-
-
-
-## Gesture Animations
-
-See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.md#gesture-animations)
-
-## Types
-
-| Name | Value |
-| ----------------- | -------------------------------------------- |
-| `GestureCallback` | `(detail: GestureDetail) => boolean \| void` |
-
-## Interfaces
-
-### GestureConfig
-
-| Property | Type | Default | Description |
-| --------------- | ------------------------------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| el | `Node` | `undefined` | The element to listen on for gestures. |
-| disableScroll | `boolean \| undefined` | `false` | If true, scrolling will be disabled on `el` while the gesture is enabled. |
-| direction | `'x' \| 'y' \| undefined` | `'x'` | Limit gesture detection to movements along a certain axis. |
-| gestureName | `string` | `undefined` | The name of the gesture to create. |
-| gesturePriority | `number \| undefined` | `0` | Gestures with higher priorities will override gestures with lower priorities. Useful for ensuring the multiple gestures do not collide with one another. |
-| passive | `boolean \| undefined` | `true` | If true, this will indicate that the gesture will never call `preventDefault()`. This can be used to improve scrolling performance. See [Passive Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners) for more information. |
-| maxAngle | `number \| undefined` | `40` | The maximum angle to allow when detecting a gesture. |
-| threshold | `number \| undefined` | `10` | Defines how much a pointer must move before the gesture starts. |
-| blurOnStart | `boolean \| undefined` | `undefined` | If true, the gesture will blur any active selectable element such as an input or a textarea before firing the `onStart` callback. |
-| canStart | `GestureCallback \| undefined` | `undefined` | A callback that returns true if a gesture is allowed to start. |
-| onWillStart | `(detail: GestureDetail) => Promise` | `undefined` | A callback that fires when a gesture is about to start. This is fired after `canStart` but before `onStart`. |
-| onStart | `GestureCallback \| undefined` | `undefined` | A callback that fires when a gesture has started. |
-| onMove | `GestureCallback \| undefined` | `undefined` | A callback that fires when a gesture movement was detected. |
-| onEnd | `GestureCallback \| undefined` | `undefined` | A callback that fires when a gesture has ended. This is usually when a pointer has been released. |
-| notCaptured | `GestureCallback \| undefined` | `undefined` | A callback that fires when a gesture has not been captured. This usually happens when there is a conflicting gesture with a higher priority. |
-
-### GestureDetail
-
-| Property | Type | Description |
-| -------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| type | `string` | The type of gesture that was detected. |
-| startX | `number` | The starting x coordinate of the gesture. |
-| startY | `number` | The starting y coordinate of the gesture. |
-| startTimeStamp | `number` | The timestamp at which the gesture was started. |
-| currentX | `number` | The current x coordinate of the gesture. |
-| currentY | `number` | The current y coordinate of the gesture. |
-| velocityX | `number` | How fast the gesture is currently moving on the x axis. |
-| velocityY | `number` | How fast the gesture is currently moving on the y axis. |
-| deltaX | `number` | How much the gesture has moved on the x axis since it started. |
-| deltaY | `number` | How much the gesture has moved on the y axis since it started. |
-| timeStamp | `number` | The current timestamp of the gesture. |
-| event | `UIEvent` | The native event dispatched by the browser. See [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) for more information. |
-| data | `any \| undefined` | Any data specified by the user. This can be set and read in any of the callbacks. |
-
-## Methods
-
-#### `enable(enable: boolean = true) => void`
-
-Enable or disable the gesture.
-
-#### `destroy() => void`
-
-Destroy the gesture instance and stop listening on the target element.
diff --git a/versioned_docs/version-v5/utilities/gestures.mdx b/versioned_docs/version-v5/utilities/gestures.mdx
new file mode 100644
index 00000000000..62fbd99c9dd
--- /dev/null
+++ b/versioned_docs/version-v5/utilities/gestures.mdx
@@ -0,0 +1,496 @@
+import Codepen from '@components/global/Codepen';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Gestures
+
+## Overview
+
+Ionic Gestures is a utility that allows developers to build custom gestures and interactions for their application in a platform agnostic manner. Developers do not need to be using a particular framework such as React or Angular, nor do they even need to be building an Ionic app! As long as developers have access to v5.0 or greater of Ionic Framework, they will have access to all of Ionic Animations.
+
+Building complex gestures can be time consuming. Other libraries that provide custom gestures are often times too heavy handed and end up capturing mouse or touch events and not letting them propagate. This can result in other elements no longer being scrollable or clickable.
+
+## Installation
+
+````mdx-code-block
+
+
+
+Developers using Ionic Core and JavaScript should install the latest version of `@ionic/core`.
+
+```javascript
+import { createGesture } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/esm/index.mjs';
+
+...
+
+const gesture = createGesture({
+ el: elementRef,
+ threshold: 15,
+ gestureName: 'my-gesture',
+ onMove: ev => onMoveHandler(ev)
+});
+
+```
+
+
+
+Developers using Ionic Core and TypeScript should install the latest version of `@ionic/core`.
+
+```tsx
+import { createGesture, Gesture } from '@ionic/core';
+
+...
+
+const gesture: Gesture = createGesture({
+ el: elementRef,
+ threshold: 15,
+ gestureName: 'my-gesture',
+ onMove: ev => onMoveHandler(ev)
+});
+```
+
+
+
+Developers using Angular should install the latest version of `@ionic/angular`. Animations can be created via the `AnimationController` dependency injection.
+
+By default, gesture callbacks do not run inside of NgZone. Developers can either set the `runInsideAngularZone` parameter to `true` when creating a gesture,
+or they can wrap their callbacks in an `NgZone.run()` call.
+
+```tsx
+import { Gesture, GestureController } from '@ionic/angular';
+
+...
+
+constructor(private gestureCtrl: GestureController) {
+ const gesture: Gesture = this.gestureCtrl.create({
+ el: this.element.nativeElement,
+ threshold: 15,
+ gestureName: 'my-gesture',
+ onMove: ev => this.onMoveHandler(ev)
+ }, true);
+ // The `true` above ensures that callbacks run inside NgZone.
+}
+
+```
+
+
+
+Developers using React should install the latest version of `@ionic/react`. Full React wrappers are coming soon!
+
+```tsx
+import { createGesture, Gesture } from '@ionic/react';
+
+...
+
+const gesture: Gesture = createGesture({
+ el: elementRef,
+ threshold: 15,
+ gestureName: 'my-gesture',
+ onMove: ev => onMoveHandler(ev)
+});
+```
+
+
+
+Developers using Ionic Vue should install the latest version of `@ionic/vue`.
+
+```javascript
+import { createGesture } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const elementRef = ref();
+
+...
+
+const gesture = createGesture({
+ el: elementRef.value,
+ threshold: 15,
+ gestureName: 'my-gesture',
+ onMove: ev => onMoveHandler(ev)
+});
+
+```
+
+
+````
+
+## Basic Gestures
+
+### Usage
+
+````mdx-code-block
+
+
+
+```javascript
+let p = document.querySelector('p');
+const gesture = createGesture({
+ el: document.querySelector('.rectangle'),
+ onMove: (detail) => { onMove(detail); }
+})
+
+gesture.enable();
+
+const onMove = (detail) => {
+ const type = detail.type;
+ const currentX = detail.currentX;
+ const deltaX = detail.deltaX;
+ const velocityX = detail.velocityX;
+
+ p.innerHTML = `
+ Type: ${type}
+ Current X: ${currentX}
+ Delta X: ${deltaX}
+ Velocity X: ${velocityX}
+ `
+}
+```
+
+
+
+```javascript
+@ViewChild('paragraph') p: ElementRef;
+
+ngOnInit() {
+ const gesture = this.gestureCtrl.create({
+ gestureName: 'my-gesture',
+ el: this.rectangle.nativeElement,
+ onMove: (detail) => { this.onMove(detail); }
+ })
+
+ gesture.enable();
+}
+
+private onMove(detail) {
+ const type = detail.type;
+ const currentX = detail.currentX;
+ const deltaX = detail.deltaX;
+ const velocityX = detail.velocityX;
+
+ this.p.nativeElement.innerHTML = `
+ Type: ${type}
+ Current X: ${currentX}
+ Delta X: ${deltaX}
+ Velocity X: ${velocityX}
+ `
+}
+```
+
+
+
+```javascript
+let p = document.querySelector('p');
+const gesture = createGesture({
+ el: document.querySelector('.rectangle'),
+ onMove: (detail) => { onMove(detail); }
+})
+
+gesture.enable();
+
+const onMove = (detail) => {
+ const type = detail.type;
+ const currentX = detail.currentX;
+ const deltaX = detail.deltaX;
+ const velocityX = detail.velocityX;
+
+ p.innerHTML = `
+ Type: ${type}
+ Current X: ${currentX}
+ Delta X: ${deltaX}
+ Velocity X: ${velocityX}
+ `
+}
+```
+
+
+
+```javascript
+import { createGesture } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+let pRef = ref();
+const rectangleRef = ref();
+const gesture = createGesture({
+ el: rectangleRef.value,
+ onMove: (detail) => { onMove(detail); }
+})
+
+gesture.enable();
+
+const onMove = (detail) => {
+ const type = detail.type;
+ const currentX = detail.currentX;
+ const deltaX = detail.deltaX;
+ const velocityX = detail.velocityX;
+
+ pRef.value.innerHTML = `
+ Type: ${type}
+ Current X: ${currentX}
+ Delta X: ${deltaX}
+ Velocity X: ${velocityX}
+ `
+}
+```
+
+
+````
+
+In this example, our app listens for gestures on the `.rectangle` element. When a gesture movement is detected, the `onMove` function is called, and our app logs the current gesture information.
+
+
+
+## Double Click Gesture
+
+### Usage
+
+````mdx-code-block
+
+
+
+```javascript
+const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+const DOUBLE_CLICK_THRESHOLD = 500;
+const rectangle = document.querySelector('.rectangle');
+const gesture = createGesture({
+ el: rectangle,
+ threshold: 0,
+ onStart: () => { onStart(); }
+});
+
+gesture.enable();
+
+let lastOnStart = 0;
+let currentColor = 'rgba(0, 0, 255, 0.5)';
+
+const onStart = () => {
+ const now = Date.now();
+
+ if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+ rectangle.style.setProperty('background', getRandomBackground());
+ lastOnStart = 0;
+ } else {
+ lastOnStart = now;
+ }
+}
+
+const getRandomBackground = () => {
+ const options = backgrounds.filter(bg => bg !== currentColor);
+ currentColor = options[Math.floor(Math.random() * options.length)];
+
+ return currentColor;
+}
+```
+
+
+
+```tsx
+@ViewChild('rectangle') rectangle: ElementRef;
+
+private backgrounds: string[] = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+private currentColor: string = 'rgba(0, 0, 255, 0.5)';
+private lastOnStart: number = 0;
+private DOUBLE_CLICK_THRESHOLD: number = 500;
+
+ngOnInit() {
+ const gesture = this.gestureCtrl.create({
+ el: this.rectangle.nativeElement,
+ threshold: 0,
+ onStart: () => { this.onStart(); }
+ });
+
+ gesture.enable();
+}
+
+private onStart() {
+ const now = Date.now();
+
+ if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
+ this.rectangle.nativeElement.style.setProperty('background', this.getRandomBackground());
+ this.lastOnStart = 0;
+ } else {
+ this.lastOnStart = now;
+ }
+}
+
+private getRandomBackground() {
+ const options = this.backgrounds.filter(bg => bg !== this.currentColor);
+ this.currentColor = options[Math.floor(Math.random() * options.length)];
+
+ return this.currentColor;
+}
+```
+
+
+
+```javascript
+const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+const DOUBLE_CLICK_THRESHOLD = 500;
+const rectangle = document.querySelector('.rectangle');
+const gesture = createGesture({
+ el: rectangle,
+ threshold: 0,
+ onStart: () => { onStart(); }
+});
+
+gesture.enable();
+
+let lastOnStart = 0;
+let currentColor = 'rgba(0, 0, 255, 0.5)';
+
+const onStart = () => {
+ const now = Date.now();
+
+ if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+ rectangle.style.setProperty('background', getRandomBackground());
+ lastOnStart = 0;
+ } else {
+ lastOnStart = now;
+ }
+}
+
+const getRandomBackground = () => {
+ const options = backgrounds.filter(bg => bg !== currentColor);
+ currentColor = options[Math.floor(Math.random() * options.length)];
+
+ return currentColor;
+}
+```
+
+
+
+```javascript
+import { createGesture } from '@ionic/vue';
+import { ref } from 'vue';
+
+...
+
+const backgrounds = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+const DOUBLE_CLICK_THRESHOLD = 500;
+const rectangleRef = ref();
+const gesture = createGesture({
+ el: rectangleRef.value,
+ threshold: 0,
+ onStart: () => { onStart(); }
+});
+
+gesture.enable();
+
+let lastOnStart = 0;
+let currentColor = 'rgba(0, 0, 255, 0.5)';
+
+const onStart = () => {
+ const now = Date.now();
+
+ if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+ rectangleRef.value.style.setProperty('background', getRandomBackground());
+ lastOnStart = 0;
+ } else {
+ lastOnStart = now;
+ }
+}
+
+const getRandomBackground = () => {
+ const options = backgrounds.filter(bg => bg !== currentColor);
+ currentColor = options[Math.floor(Math.random() * options.length)];
+
+ return currentColor;
+}
+```
+
+
+````
+
+In the example above, we want to be able to detect double clicks on an element. By setting our `threshold` to `0`, we can ensure our gesture object can detect clicks. Additionally, we define a click threshold so that only 2 clicks that occur in quick succession count as a double click.
+
+
+
+## Gesture Animations
+
+See our guide on implementing gesture animations: [Gesture Animations with Ionic Animations](animations.mdx#gesture-animations)
+
+## Types
+
+| Name | Value |
+| ----------------- | -------------------------------------------- |
+| `GestureCallback` | `(detail: GestureDetail) => boolean \| void` |
+
+## Interfaces
+
+### GestureConfig
+
+| Property | Type | Default | Description |
+| --------------- | ------------------------------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| el | `Node` | `undefined` | The element to listen on for gestures. |
+| disableScroll | `boolean \| undefined` | `false` | If true, scrolling will be disabled on `el` while the gesture is enabled. |
+| direction | `'x' \| 'y' \| undefined` | `'x'` | Limit gesture detection to movements along a certain axis. |
+| gestureName | `string` | `undefined` | The name of the gesture to create. |
+| gesturePriority | `number \| undefined` | `0` | Gestures with higher priorities will override gestures with lower priorities. Useful for ensuring the multiple gestures do not collide with one another. |
+| passive | `boolean \| undefined` | `true` | If true, this will indicate that the gesture will never call `preventDefault()`. This can be used to improve scrolling performance. See [Passive Listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners) for more information. |
+| maxAngle | `number \| undefined` | `40` | The maximum angle to allow when detecting a gesture. |
+| threshold | `number \| undefined` | `10` | Defines how much a pointer must move before the gesture starts. |
+| blurOnStart | `boolean \| undefined` | `undefined` | If true, the gesture will blur any active selectable element such as an input or a textarea before firing the `onStart` callback. |
+| canStart | `GestureCallback \| undefined` | `undefined` | A callback that returns true if a gesture is allowed to start. |
+| onWillStart | `(detail: GestureDetail) => Promise` | `undefined` | A callback that fires when a gesture is about to start. This is fired after `canStart` but before `onStart`. |
+| onStart | `GestureCallback \| undefined` | `undefined` | A callback that fires when a gesture has started. |
+| onMove | `GestureCallback \| undefined` | `undefined` | A callback that fires when a gesture movement was detected. |
+| onEnd | `GestureCallback \| undefined` | `undefined` | A callback that fires when a gesture has ended. This is usually when a pointer has been released. |
+| notCaptured | `GestureCallback \| undefined` | `undefined` | A callback that fires when a gesture has not been captured. This usually happens when there is a conflicting gesture with a higher priority. |
+
+### GestureDetail
+
+| Property | Type | Description |
+| -------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| type | `string` | The type of gesture that was detected. |
+| startX | `number` | The starting x coordinate of the gesture. |
+| startY | `number` | The starting y coordinate of the gesture. |
+| startTimeStamp | `number` | The timestamp at which the gesture was started. |
+| currentX | `number` | The current x coordinate of the gesture. |
+| currentY | `number` | The current y coordinate of the gesture. |
+| velocityX | `number` | How fast the gesture is currently moving on the x axis. |
+| velocityY | `number` | How fast the gesture is currently moving on the y axis. |
+| deltaX | `number` | How much the gesture has moved on the x axis since it started. |
+| deltaY | `number` | How much the gesture has moved on the y axis since it started. |
+| timeStamp | `number` | The current timestamp of the gesture. |
+| event | `UIEvent` | The native event dispatched by the browser. See [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) for more information. |
+| data | `any \| undefined` | Any data specified by the user. This can be set and read in any of the callbacks. |
+
+## Methods
+
+#### `enable(enable: boolean = true) => void`
+
+Enable or disable the gesture.
+
+#### `destroy() => void`
+
+Destroy the gesture instance and stop listening on the target element.
diff --git a/versioned_docs/version-v5/vue/config.md b/versioned_docs/version-v5/vue/config.md
deleted file mode 100644
index 410c3bcf8b9..00000000000
--- a/versioned_docs/version-v5/vue/config.md
+++ /dev/null
@@ -1,113 +0,0 @@
-# Config
-
-Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.
-
-## Global Config
-
-To override the initial Ionic config for the app, provide your config object as an additional parameter when installing the `IonicVue` plugin:
-
-```tsx
-createApp(App).use(IonicVue, {
- rippleEffect: false,
- mode: 'md',
-});
-```
-
-In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design.
-
-## Per-Platform Config
-
-Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.
-
-In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
-The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values.
-
-```tsx
-import { IonicVue, isPlatform } from '@ionic/vue';
-
-createApp(App).use(IonicVue, {
- animated: !isPlatform('mobileweb'),
-});
-```
-
-The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
-
-```tsx
-import { IonicVue, isPlatform } from '@ionic/vue';
-
-const getConfig = () => {
- if (isPlatform('hybrid')) {
- return {
- backButtonText: 'Previous',
- tabButtonLayout: 'label-hide',
- };
- }
-
- return {
- menuIcon: 'ellipsis-vertical',
- };
-};
-
-createApp(App).use(IonicVue, getConfig());
-```
-
-Finally, this example allows you to accumulate a config object based upon different platform requirements:
-
-```tsx
-import { IonicVue, isPlatform } from '@ionic/vue';
-
-const getConfig = () => {
- let config = {
- animated: false,
- };
-
- if (isPlatform('iphone')) {
- config = {
- ...config,
- backButtonText: 'Previous',
- };
- }
-
- return config;
-};
-
-createApp(App).use(IonicVue, getConfig());
-```
-
-## Config Options
-
-Below is a list of config options that Ionic uses.
-
-| Config | Type | Description |
-| ------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------- |
-| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". |
-| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". |
-| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". |
-| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". |
-| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. |
-| `backButtonIcon` | `string` | Overrides the default icon in all `` components. |
-| `backButtonText` | `string` | Overrides the default text in all `` components. |
-| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. |
-| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. |
-| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". |
-| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". |
-| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. |
-| `menuIcon` | `string` | Overrides the default icon in all `` components. |
-| `menuType` | `string` | Overrides the default menu type for all `` components. |
-| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". |
-| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". |
-| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. |
-| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. |
-| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". |
-| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". |
-| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". |
-| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". |
-| `refreshingIcon` | `string` | Overrides the default icon in all `` components. |
-| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. |
-| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. |
-| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. |
-| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. |
-| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. |
-| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. |
-| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". |
-| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". |
diff --git a/versioned_docs/version-v5/vue/config.mdx b/versioned_docs/version-v5/vue/config.mdx
new file mode 100644
index 00000000000..76b4250a1a0
--- /dev/null
+++ b/versioned_docs/version-v5/vue/config.mdx
@@ -0,0 +1,113 @@
+# Config
+
+Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.
+
+## Global Config
+
+To override the initial Ionic config for the app, provide your config object as an additional parameter when installing the `IonicVue` plugin:
+
+```tsx
+createApp(App).use(IonicVue, {
+ rippleEffect: false,
+ mode: 'md',
+});
+```
+
+In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design.
+
+## Per-Platform Config
+
+Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.
+
+In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
+The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.mdx#platforms) for a list of possible values.
+
+```tsx
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+createApp(App).use(IonicVue, {
+ animated: !isPlatform('mobileweb'),
+});
+```
+
+The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
+
+```tsx
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+const getConfig = () => {
+ if (isPlatform('hybrid')) {
+ return {
+ backButtonText: 'Previous',
+ tabButtonLayout: 'label-hide',
+ };
+ }
+
+ return {
+ menuIcon: 'ellipsis-vertical',
+ };
+};
+
+createApp(App).use(IonicVue, getConfig());
+```
+
+Finally, this example allows you to accumulate a config object based upon different platform requirements:
+
+```tsx
+import { IonicVue, isPlatform } from '@ionic/vue';
+
+const getConfig = () => {
+ let config = {
+ animated: false,
+ };
+
+ if (isPlatform('iphone')) {
+ config = {
+ ...config,
+ backButtonText: 'Previous',
+ };
+ }
+
+ return config;
+};
+
+createApp(App).use(IonicVue, getConfig());
+```
+
+## Config Options
+
+Below is a list of config options that Ionic uses.
+
+| Config | Type | Description |
+| ------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------- |
+| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". |
+| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". |
+| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". |
+| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". |
+| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. |
+| `backButtonIcon` | `string` | Overrides the default icon in all `` components. |
+| `backButtonText` | `string` | Overrides the default text in all `` components. |
+| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. |
+| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. |
+| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". |
+| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". |
+| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. |
+| `menuIcon` | `string` | Overrides the default icon in all `` components. |
+| `menuType` | `string` | Overrides the default menu type for all `` components. |
+| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". |
+| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". |
+| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. |
+| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. |
+| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". |
+| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". |
+| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". |
+| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". |
+| `refreshingIcon` | `string` | Overrides the default icon in all `` components. |
+| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. |
+| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. |
+| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. |
+| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. |
+| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. |
+| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. |
+| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". |
+| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". |
diff --git a/versioned_docs/version-v5/vue/lifecycle.md b/versioned_docs/version-v5/vue/lifecycle.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/lifecycle.md
rename to versioned_docs/version-v5/vue/lifecycle.mdx
diff --git a/versioned_docs/version-v5/vue/navigation.md b/versioned_docs/version-v5/vue/navigation.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/navigation.md
rename to versioned_docs/version-v5/vue/navigation.mdx
diff --git a/versioned_docs/version-v5/vue/overview.md b/versioned_docs/version-v5/vue/overview.md
deleted file mode 100644
index 3f76716b824..00000000000
--- a/versioned_docs/version-v5/vue/overview.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-sidebar_label: Overview
----
-
-import DocsCard from '@components/global/DocsCard';
-import DocsCards from '@components/global/DocsCards';
-
-# Ionic Vue Overview
-
-`@ionic/vue` combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.
-
-## Vue Version Support
-
-Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue dependencies.
-
-## Vue Tooling
-
-Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meaning you'll be building with the Vue CLI and all of it's features. In addition, starter projects also ship with few features enabled by default, like Routing and TypeScript support.
-
-## Native Tooling
-
-[Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web.
-
-While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova).
-
-## From the Community
-
-- [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders
-
-## Installation
-
-```shell-session
-$ npm install -g @ionic/cli
-$ ionic start myApp tabs --type vue
-
-$ cd myApp
-$ ionic serve █
-```
-
-## Resources
-
-
-
- Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.
-
-
-
- Learn the basics of navigation inside your app with Ionic and Vue Router
-
-
-
- Learn about using Ionic lifecycle events in class components and with hooks
-
-
-
diff --git a/versioned_docs/version-v5/vue/overview.mdx b/versioned_docs/version-v5/vue/overview.mdx
new file mode 100644
index 00000000000..81f3727d603
--- /dev/null
+++ b/versioned_docs/version-v5/vue/overview.mdx
@@ -0,0 +1,55 @@
+---
+sidebar_label: Overview
+---
+
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
+
+# Ionic Vue Overview
+
+`@ionic/vue` combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.
+
+## Vue Version Support
+
+Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue dependencies.
+
+## Vue Tooling
+
+Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meaning you'll be building with the Vue CLI and all of it's features. In addition, starter projects also ship with few features enabled by default, like Routing and TypeScript support.
+
+## Native Tooling
+
+[Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web.
+
+While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.mdx) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova).
+
+## From the Community
+
+- [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders
+
+## Installation
+
+```shell-session
+$ npm install -g @ionic/cli
+$ ionic start myApp tabs --type vue
+
+$ cd myApp
+$ ionic serve █
+```
+
+## Resources
+
+
+
+ Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.
+
+
+
+ Learn the basics of navigation inside your app with Ionic and Vue Router
+
+
+
+ Learn about using Ionic lifecycle events in class components and with hooks
+
+
+
diff --git a/versioned_docs/version-v5/vue/performance.md b/versioned_docs/version-v5/vue/performance.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/performance.md
rename to versioned_docs/version-v5/vue/performance.mdx
diff --git a/versioned_docs/version-v5/vue/platform.md b/versioned_docs/version-v5/vue/platform.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/platform.md
rename to versioned_docs/version-v5/vue/platform.mdx
diff --git a/versioned_docs/version-v5/vue/pwa.md b/versioned_docs/version-v5/vue/pwa.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/pwa.md
rename to versioned_docs/version-v5/vue/pwa.mdx
diff --git a/versioned_docs/version-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.md
deleted file mode 100644
index d67b4a2282f..00000000000
--- a/versioned_docs/version-v5/vue/quickstart.md
+++ /dev/null
@@ -1,849 +0,0 @@
----
-sidebar_label: Quickstart
----
-
-# Ionic Vue Quickstart
-
-## What is Ionic Framework?
-
-First off, if you're new here, welcome! Ionic Framework is a free and open source component library for building apps that run on iOS, Android, Electron, and the Web. Write your app once using familiar technologies (HTML, CSS, JavaScript) and deploy to any platform.
-
-Along with the UI components, Ionic Framework also provides a command line tool for creating new apps, as well as deploying to the various platforms we support.
-
-In this guide, we will go over the basics of both Vue and Ionic Framework, including any Ionic Framework specific features. If you are familiar with Vue, enjoy the guide and learn something new about Ionic Framework. If you are not familiar with either, no worries! This guide will cover the basics and provide enough information to get an app up and running.
-
-## Creating a project with the Ionic CLI
-
-To begin, let's install the latest version of the Ionic CLI.
-
-```shell
-npm install -g @ionic/cli@latest
-```
-
-From here, the global command `ionic` will allow for the creation of a Vue project with Ionic Framework and any other dependencies. To create a new project, run the following command:
-
-```shell
-ionic start myApp blank --type vue
-cd myApp
-```
-
-From here, we run `ionic serve` and have our project running in the browser.
-
-## Build your way with TypeScript or JavaScript
-
-We love TypeScript at Ionic, and have believed for quite some time now that it’s a great tool for building scalable apps. That said, we know how much the Vue community values simplicity – in their tooling, languages, and more. In fact, it’s likely what drew you to Vue in the first place. Start simple – then scale up as needed.
-
-So, if you’d prefer to use JavaScript instead of TypeScript, you can. After generating an Ionic Vue app, follow these steps:
-
-1. Remove TypeScript dependencies:
-
-```shell
-npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript
-```
-
-2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/main.ts`. If you're using tests, also change the extension of files in the `tests` directory.
-
-3. In `index.html`, change the imported `
-```
-
-Let's break it down, starting with the first group of imports.
-
-```tsx
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
-```
-
-To use a component in Vue, you must first import it. So for Ionic Framework, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our `App` component, we are using `IonApp` and `IonRouterOutlet`. You can also register components globally if you find yourself importing the same components repeatedly. This comes with performance tradeoffs that we cover in [Optimizing Your App](#optimizing-your-app).
-
-From there, let's look at the template.
-
-```html
-
-
-
-
-
-```
-
-All Vue components must have a ``. Inside of there, we place our `IonApp` and `IonRouterOutlet` components.
-
-Finally, let's look at the component definition:
-
-```tsx
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
- name: 'App',
- components: {
- IonApp,
- IonRouterOutlet,
- },
-});
-```
-
-Vue 3 offers a new `defineComponent` function when creating components for improved tooling support, and we are going to use that here. We first define the name of the component, and then we supply the components that we will use in our template.
-
-There are several arguments you can supply here such as `methods`, `setup` and more. This is explained as part of Vue's [Composition API Documentation](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api).
-
-## Initializing the router
-
-Ionic Vue uses the [vue-router](https://router.vuejs.org/) dependency, so if you are already familiar with Vue Router, you will be able to apply what you know to navigation in Ionic Vue. Let's take a look at the router configuration we mentioned before. In `router/index.ts`, you should see something similar to the following:
-
-```tsx
-import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
-
-const routes: Array = [
- {
- path: '/',
- redirect: '/home',
- },
- {
- path: '/home',
- name: 'Home',
- component: Home,
- },
-];
-
-const router = createRouter({
- history: createWebHistory(process.env.BASE_URL),
- routes,
-});
-
-export default router;
-```
-
-:::note
-This example is using the Ionic Vue Blank starter application, so your actual routes may look a bit different.
-:::
-
-The setup here is the same as if you were using `vue-router` directly, but instead you need to import dependencies such as `createRouter` and `createWebHistory` from the `@ionic/vue-router` package.
-
-After importing our dependencies, we can declare our routes in the `routes` array. From there, we can create a router instance and provide it with our routes and the type of history we want to use.
-
-With Ionic Vue, lazy loading works right out of the box. Instead of importing our `Home` component, we could also do:
-
-```tsx
-const routes: Array = [
- {
- path: '/',
- redirect: '/home',
- },
- {
- path: '/home',
- name: 'Home',
- component: () => import('@/views/Home.vue'),
- },
-];
-```
-
-Now, you might be wondering: Why do we use `@` when describing the path to our components? The `@` symbol is a shortcut we can use to describe paths relative to the `src` directory. This is useful if we are trying to reference a component while in a file several folders deep. Instead of doing `'../../../views/Home.vue'`, we could simply do `'@/views/Home.vue'`.
-
-## A component with style
-
-Now the `App` component does not really have a lot to modify here. It is a basic example of a container component. With the router logic set, all it is responsible for is to render a component that matches the given URL route. Since we already have one component/router setup, let's go ahead and modify our `Home` component.
-
-Currently, the `Home` component looks like so:
-
-
-
-```html
-
-
-
-
- Blank
-
-
-
-
-
-
- Blank
-
-
-
-
-
Ready to create an app?
-
- Start with Ionic
- UI Components
-
-
Create Idea
- Run Idea By Brandy
-
- 5 Days
-
-
-
-
-
-```
-
-Here in our `IonContent`, we are adding an `IonList` and a much more involved `IonItem` component. Let's look at `IonItem` as it is the centerpiece here.
-
-```html
-
-
-
- Create Idea
- Run Idea By Brandy
-
- 5 Days
-
-```
-
-Looking at our code, we have a special attribute called slot. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a Vue API, but a web standards API. Additionally, this is different from the slots API you may recall from Vue 2.
-
-Let's look at another component from Ionic Framework, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we will need three components: a FAB, a FAB Button, and an Icon.
-
-```html
-
-
-
- ...
-
-
-
-
-
-
-
-
-
-
-
-```
-
-On our main `IonFab`, we are setting its positioning with the vertical and horizontal attributes. We are also setting the render location to "fixed" with the slot attribute. This will tell `IonFab` to render outside of the scrollable content in `IonContent`.
-
-Now let's wire up a click handler to this. When clicking the FAB button, we want to navigate to a new page (which we will create in a moment). To do this, we will need to get access to Vue Router's navigation API. This can be done by importing `useRouter` from the `vue-router` package.
-
-```html
-
-
-
- ...
-
-
-
-
-
-
-
-
-
-
-
-```
-
-In our component file, we are importing the `useRouter` function. When called, this function injects the router dependency into the component. It gives us access to the history API from Vue Router, allowing us to push a new route onto the navigation stack. On our `IonFabButton`, we can add a click handler, and just call `router.push` and pass in the new route. In this case, we will navigate to `new`.
-
-```html
- ...
-```
-
-## Creating a new Route
-
-Now that we have the pieces in place to navigate in our app, we need to create a new component and add the new route to our router declaration. Let's open our `router/index.ts` file and add the new route.
-
-```tsx
-import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue';
-import NewItem from '@/views/NewItem.vue';
-
-const routes: Array = [
- {
- path: '/',
- redirect: '/home',
- },
- {
- path: '/home',
- name: 'Home',
- component: Home,
- },
- {
- path: '/new',
- name: 'NewItem',
- component: NewItem,
- },
-];
-
-const router = createRouter({
- history: createWebHistory(process.env.BASE_URL),
- routes,
-});
-
-export default router;
-```
-
-With our router now having an entry for the route `/new`, we will create the component needed, `NewItem`. This will exist in `views/NewItem.vue`.
-
-Let's fill the `NewItem.vue` file with some placeholder content for the moment.
-
-```html
-
-
-
-
-
-
-
- New Item
-
-
-
-
-
-
-
-```
-
-:::note
-Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.md#ionpage) for more information.
-:::
-
-The content here should look similar to the `Home` component. What is different here is the `IonBackButton` component. This is used to navigate back to the previous route. Seems easy enough, right? Ok, but what if we reload the page?
-
-In this case, the in-memory history is lost, so the back button disappears. To address this, we can set the `default-href` attribute value to the URL we want to navigate to if there is no history.
-
-```html
-
-```
-
-Now, If there is no app history present, we will be able to navigate back to our home route.
-
-## Calling Methods on Components
-
-In order to call a method on any of the Ionic Vue components, you will first need to get a reference to the component instance. Next, you will need to access the underlying Web Component using `$el` and call the method.
-
-In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.
-
-```html
-
-
- Scroll to Bottom
-
- ...
-
-
-
-
-```
-
-## Adding Icons
-
-Ionic Vue comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. There are a couple options developers have for using them in their application.
-
-### Dynamic Imports
-
-Dynamic Imports is the recommended approach to using Ionicons. This involves importing the icon of your choice from the `ionicons` package and passing it to your template:
-
-```html
-
-
-
-
-
-
-
-
-
-```
-
-Let's break down what we are doing here. First, we are importing the `heart` icon from `ionicons/icons`. This will load the appropriate SVG data for our icon.
-
-Next, we pass the `heart` data to our template in the `setup` method.
-
-Finally, we pass the icon data into the `ion-icon` component via the `icon` property.
-
-Developers also have the option of setting different icons based upon the mode:
-
-```html
-
-
-
-
-
-
-
-
-
-```
-
-Note that any icon names that are hyphenated should be written in camel case when importing.
-
-### Global Imports
-
-The other option is to import specific icons globally. This is not typically recommended as it will force icons to be loaded every time your application starts and can increase your application's initial chunk size.
-
-That being said, there may be use cases when it makes sense to load specific icons globally:
-
-**main.ts**
-
-```tsx
-import { addIcons } from 'ionicons';
-import { heart } from 'ionicons/icons';
-
-addIcons({
- heart: heart,
-});
-```
-
-**Home.vue**
-
-```html
-
-
-
-
-
-
-
-
-
-```
-
-In `main.ts`, the `addIcons` function lets us register icons globally and give it a string as a key. We then reference the icon by that key in our `Home` component.
-
-## Optimizing Your Build
-
-Vue gives you several tools to fine tune your application. This section will cover the options that are most relevant to Ionic Framework.
-
-### Local Component Registration (Recommended)
-
-By default, Ionic Framework components are registered locally. With local registration, these components are imported and provided to each Vue component you want to use them in. This is the recommended approach as it allows lazy loading and treeshaking to work properly with Ionic Framework components.
-
-The one downside to this approach is that it may be tedious to re-import your Ionic Framework components multiple times. However, we feel that the performance benefits you receive in exchange are worth it.
-
-Also note that locally registered components are not available in subcomponents. You will need to re-import the Ionic Framework components you would like to use in your subcomponent.
-
-Let's take a look at how local component registration works:
-
-```html
-
-
-
-
-
-
-
-
-
-```
-
-In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue`. Then, we provide them to our Vue component in the `components` option. From there, we can use the components in our template.
-
-Note that since we are registering these components locally, neither `IonPage` nor `IonContent` will be available in `Subcomponent` unless we register them there as well.
-
-For more information, see the Local Registration Vue Documentation.
-
-### Global Component Registration
-
-The other option for registering components is to use global registration. Global registration involves importing the components you want to use in `main.ts` and calling the `component` method on your Vue app instance.
-
-While this makes it easier to add Ionic Framework components to your Vue app, global registration often is not ideal. To quote the Vue documentation: "If you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download".
-
-Let's take a look at how global component registration works:
-
-**main.ts**
-
-```tsx
-import { IonContent, IonicVue, IonPage } from '@ionic/vue';
-
-const app = createApp(App).use(IonicVue).use(router);
-
-app.component('ion-content', IonContent);
-app.component('ion-page', IonPage);
-```
-
-**MyComponent.vue**
-
-```html
-
-
-
-
-
-
-
-
-
-```
-
-In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue` in `main.ts`. From there, we call the `component` method on our app instance and pass it the tag name as well as the component definition. After we do that, we can use the components in the rest of our application without having to import them into each Vue component.
-
-For more information, see the Global Registration Vue Documentation.
-
-### Prefetching Application JavaScript
-
-By default, the Vue CLI will automatically generate prefetch hints for the JavaScript in your application. Prefetching utilizes the browser idle time to download documents that the user might visit in the near future. When the user visits a page that requires the prefetched document, it can be served quickly from the browser's cache.
-
-Prefetching consumes bandwidth, so if you have a large app, you may want to disable it. You can do this by modifying or creating your `vue.config.js` file:
-
-**vue.config.js**
-
-```js
-module.exports = {
- chainWebpack: (config) => {
- config.plugins.delete('prefetch');
- },
-};
-```
-
-The configuration above will prevent all files from being prefetched and, instead, will be loaded when they are needed. You can also select certain chunks to prefetch. Check out the Vue CLI Docs on Prefetching for more examples.
-
-## Build a Native App
-
-We now have the basics of an Ionic Vue app down, including some UI components and navigation. The great thing about Ionic Framework’s components is that they work anywhere, including iOS, Android, and PWAs. To deploy to mobile, desktop, and beyond, we use Ionic’s cross-platform app runtime [Capacitor](https://capacitorjs.com). It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible while accessing rich native device features on platforms that support them.
-
-Adding native functionality is easy. First, add Capacitor to your project:
-
-```shell
-ionic integrations enable capacitor
-```
-
-Next, build the project, then add your platform of choice:
-
-```shell
-ionic build
-ionic cap add ios
-ionic cap add android
-```
-
-We use the standard native IDEs (Xcode and Android Studio) to open, build, and run the iOS and Android projects:
-
-```shell
-ionic cap open ios
-ionic cap open android
-```
-
-Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
-
-Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are available. There is some great features, including the [Camera API](https://capacitorjs.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
-
-```html
-
-
-
-
- Ionic Blank
-
-
-
- ![]()
- Take Photo
-
-
-
-
-
-```
-
-## Where to go from here
-
-This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.md).
-
-For a more detailed look at Ionic Frameworks’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on Vue, review the [Vue Docs](https://v3.vuejs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/).
-
-Happy app building! 🎉
diff --git a/versioned_docs/version-v5/vue/quickstart.mdx b/versioned_docs/version-v5/vue/quickstart.mdx
new file mode 100644
index 00000000000..aa5efc9d5c6
--- /dev/null
+++ b/versioned_docs/version-v5/vue/quickstart.mdx
@@ -0,0 +1,849 @@
+---
+sidebar_label: Quickstart
+---
+
+# Ionic Vue Quickstart
+
+## What is Ionic Framework?
+
+First off, if you're new here, welcome! Ionic Framework is a free and open source component library for building apps that run on iOS, Android, Electron, and the Web. Write your app once using familiar technologies (HTML, CSS, JavaScript) and deploy to any platform.
+
+Along with the UI components, Ionic Framework also provides a command line tool for creating new apps, as well as deploying to the various platforms we support.
+
+In this guide, we will go over the basics of both Vue and Ionic Framework, including any Ionic Framework specific features. If you are familiar with Vue, enjoy the guide and learn something new about Ionic Framework. If you are not familiar with either, no worries! This guide will cover the basics and provide enough information to get an app up and running.
+
+## Creating a project with the Ionic CLI
+
+To begin, let's install the latest version of the Ionic CLI.
+
+```shell
+npm install -g @ionic/cli@latest
+```
+
+From here, the global command `ionic` will allow for the creation of a Vue project with Ionic Framework and any other dependencies. To create a new project, run the following command:
+
+```shell
+ionic start myApp blank --type vue
+cd myApp
+```
+
+From here, we run `ionic serve` and have our project running in the browser.
+
+## Build your way with TypeScript or JavaScript
+
+We love TypeScript at Ionic, and have believed for quite some time now that it’s a great tool for building scalable apps. That said, we know how much the Vue community values simplicity – in their tooling, languages, and more. In fact, it’s likely what drew you to Vue in the first place. Start simple – then scale up as needed.
+
+So, if you’d prefer to use JavaScript instead of TypeScript, you can. After generating an Ionic Vue app, follow these steps:
+
+1. Remove TypeScript dependencies:
+
+```shell
+npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript
+```
+
+2. Change all `.ts` files to `.js`. In a blank Ionic Vue app, this should only be `src/router/index.ts` and `src/main.ts`. If you're using tests, also change the extension of files in the `tests` directory.
+
+3. In `index.html`, change the imported `
+```
+
+Let's break it down, starting with the first group of imports.
+
+```tsx
+import { IonApp, IonRouterOutlet } from '@ionic/vue';
+```
+
+To use a component in Vue, you must first import it. So for Ionic Framework, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our `App` component, we are using `IonApp` and `IonRouterOutlet`. You can also register components globally if you find yourself importing the same components repeatedly. This comes with performance tradeoffs that we cover in [Optimizing Your App](#optimizing-your-app).
+
+From there, let's look at the template.
+
+```html
+
+
+
+
+
+```
+
+All Vue components must have a ``. Inside of there, we place our `IonApp` and `IonRouterOutlet` components.
+
+Finally, let's look at the component definition:
+
+```tsx
+import { IonApp, IonRouterOutlet } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+ name: 'App',
+ components: {
+ IonApp,
+ IonRouterOutlet,
+ },
+});
+```
+
+Vue 3 offers a new `defineComponent` function when creating components for improved tooling support, and we are going to use that here. We first define the name of the component, and then we supply the components that we will use in our template.
+
+There are several arguments you can supply here such as `methods`, `setup` and more. This is explained as part of Vue's [Composition API Documentation](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api).
+
+## Initializing the router
+
+Ionic Vue uses the [vue-router](https://router.vuejs.org/) dependency, so if you are already familiar with Vue Router, you will be able to apply what you know to navigation in Ionic Vue. Let's take a look at the router configuration we mentioned before. In `router/index.ts`, you should see something similar to the following:
+
+```tsx
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import Home from '@/views/Home.vue';
+
+const routes: Array = [
+ {
+ path: '/',
+ redirect: '/home',
+ },
+ {
+ path: '/home',
+ name: 'Home',
+ component: Home,
+ },
+];
+
+const router = createRouter({
+ history: createWebHistory(process.env.BASE_URL),
+ routes,
+});
+
+export default router;
+```
+
+:::note
+This example is using the Ionic Vue Blank starter application, so your actual routes may look a bit different.
+:::
+
+The setup here is the same as if you were using `vue-router` directly, but instead you need to import dependencies such as `createRouter` and `createWebHistory` from the `@ionic/vue-router` package.
+
+After importing our dependencies, we can declare our routes in the `routes` array. From there, we can create a router instance and provide it with our routes and the type of history we want to use.
+
+With Ionic Vue, lazy loading works right out of the box. Instead of importing our `Home` component, we could also do:
+
+```tsx
+const routes: Array = [
+ {
+ path: '/',
+ redirect: '/home',
+ },
+ {
+ path: '/home',
+ name: 'Home',
+ component: () => import('@/views/Home.vue'),
+ },
+];
+```
+
+Now, you might be wondering: Why do we use `@` when describing the path to our components? The `@` symbol is a shortcut we can use to describe paths relative to the `src` directory. This is useful if we are trying to reference a component while in a file several folders deep. Instead of doing `'../../../views/Home.vue'`, we could simply do `'@/views/Home.vue'`.
+
+## A component with style
+
+Now the `App` component does not really have a lot to modify here. It is a basic example of a container component. With the router logic set, all it is responsible for is to render a component that matches the given URL route. Since we already have one component/router setup, let's go ahead and modify our `Home` component.
+
+Currently, the `Home` component looks like so:
+
+
+
+```html
+
+
+
+
+ Blank
+
+
+
+
+
+
+ Blank
+
+
+
+
+
Ready to create an app?
+
+ Start with Ionic
+ UI Components
+
+
Create Idea
+ Run Idea By Brandy
+
+ 5 Days
+
+
+
+
+
+```
+
+Here in our `IonContent`, we are adding an `IonList` and a much more involved `IonItem` component. Let's look at `IonItem` as it is the centerpiece here.
+
+```html
+
+
+
+ Create Idea
+ Run Idea By Brandy
+
+ 5 Days
+
+```
+
+Looking at our code, we have a special attribute called slot. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a Vue API, but a web standards API. Additionally, this is different from the slots API you may recall from Vue 2.
+
+Let's look at another component from Ionic Framework, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we will need three components: a FAB, a FAB Button, and an Icon.
+
+```html
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
+
+```
+
+On our main `IonFab`, we are setting its positioning with the vertical and horizontal attributes. We are also setting the render location to "fixed" with the slot attribute. This will tell `IonFab` to render outside of the scrollable content in `IonContent`.
+
+Now let's wire up a click handler to this. When clicking the FAB button, we want to navigate to a new page (which we will create in a moment). To do this, we will need to get access to Vue Router's navigation API. This can be done by importing `useRouter` from the `vue-router` package.
+
+```html
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
+
+```
+
+In our component file, we are importing the `useRouter` function. When called, this function injects the router dependency into the component. It gives us access to the history API from Vue Router, allowing us to push a new route onto the navigation stack. On our `IonFabButton`, we can add a click handler, and just call `router.push` and pass in the new route. In this case, we will navigate to `new`.
+
+```html
+ ...
+```
+
+## Creating a new Route
+
+Now that we have the pieces in place to navigate in our app, we need to create a new component and add the new route to our router declaration. Let's open our `router/index.ts` file and add the new route.
+
+```tsx
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { RouteRecordRaw } from 'vue-router';
+import Home from '@/views/Home.vue';
+import NewItem from '@/views/NewItem.vue';
+
+const routes: Array = [
+ {
+ path: '/',
+ redirect: '/home',
+ },
+ {
+ path: '/home',
+ name: 'Home',
+ component: Home,
+ },
+ {
+ path: '/new',
+ name: 'NewItem',
+ component: NewItem,
+ },
+];
+
+const router = createRouter({
+ history: createWebHistory(process.env.BASE_URL),
+ routes,
+});
+
+export default router;
+```
+
+With our router now having an entry for the route `/new`, we will create the component needed, `NewItem`. This will exist in `views/NewItem.vue`.
+
+Let's fill the `NewItem.vue` file with some placeholder content for the moment.
+
+```html
+
+
+
+
+
+
+
+ New Item
+
+
+
+
+
+
+
+```
+
+:::note
+Each view must contain an `IonPage` component. Page transitions will not work correctly without it. See the [IonPage Documentation](navigation.mdx#ionpage) for more information.
+:::
+
+The content here should look similar to the `Home` component. What is different here is the `IonBackButton` component. This is used to navigate back to the previous route. Seems easy enough, right? Ok, but what if we reload the page?
+
+In this case, the in-memory history is lost, so the back button disappears. To address this, we can set the `default-href` attribute value to the URL we want to navigate to if there is no history.
+
+```html
+
+```
+
+Now, If there is no app history present, we will be able to navigate back to our home route.
+
+## Calling Methods on Components
+
+In order to call a method on any of the Ionic Vue components, you will first need to get a reference to the component instance. Next, you will need to access the underlying Web Component using `$el` and call the method.
+
+In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.
+
+```html
+
+
+ Scroll to Bottom
+
+ ...
+
+
+
+
+```
+
+## Adding Icons
+
+Ionic Vue comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. There are a couple options developers have for using them in their application.
+
+### Dynamic Imports
+
+Dynamic Imports is the recommended approach to using Ionicons. This involves importing the icon of your choice from the `ionicons` package and passing it to your template:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+Let's break down what we are doing here. First, we are importing the `heart` icon from `ionicons/icons`. This will load the appropriate SVG data for our icon.
+
+Next, we pass the `heart` data to our template in the `setup` method.
+
+Finally, we pass the icon data into the `ion-icon` component via the `icon` property.
+
+Developers also have the option of setting different icons based upon the mode:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+Note that any icon names that are hyphenated should be written in camel case when importing.
+
+### Global Imports
+
+The other option is to import specific icons globally. This is not typically recommended as it will force icons to be loaded every time your application starts and can increase your application's initial chunk size.
+
+That being said, there may be use cases when it makes sense to load specific icons globally:
+
+**main.ts**
+
+```tsx
+import { addIcons } from 'ionicons';
+import { heart } from 'ionicons/icons';
+
+addIcons({
+ heart: heart,
+});
+```
+
+**Home.vue**
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+In `main.ts`, the `addIcons` function lets us register icons globally and give it a string as a key. We then reference the icon by that key in our `Home` component.
+
+## Optimizing Your Build
+
+Vue gives you several tools to fine tune your application. This section will cover the options that are most relevant to Ionic Framework.
+
+### Local Component Registration (Recommended)
+
+By default, Ionic Framework components are registered locally. With local registration, these components are imported and provided to each Vue component you want to use them in. This is the recommended approach as it allows lazy loading and treeshaking to work properly with Ionic Framework components.
+
+The one downside to this approach is that it may be tedious to re-import your Ionic Framework components multiple times. However, we feel that the performance benefits you receive in exchange are worth it.
+
+Also note that locally registered components are not available in subcomponents. You will need to re-import the Ionic Framework components you would like to use in your subcomponent.
+
+Let's take a look at how local component registration works:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue`. Then, we provide them to our Vue component in the `components` option. From there, we can use the components in our template.
+
+Note that since we are registering these components locally, neither `IonPage` nor `IonContent` will be available in `Subcomponent` unless we register them there as well.
+
+For more information, see the Local Registration Vue Documentation.
+
+### Global Component Registration
+
+The other option for registering components is to use global registration. Global registration involves importing the components you want to use in `main.ts` and calling the `component` method on your Vue app instance.
+
+While this makes it easier to add Ionic Framework components to your Vue app, global registration often is not ideal. To quote the Vue documentation: "If you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download".
+
+Let's take a look at how global component registration works:
+
+**main.ts**
+
+```tsx
+import { IonContent, IonicVue, IonPage } from '@ionic/vue';
+
+const app = createApp(App).use(IonicVue).use(router);
+
+app.component('ion-content', IonContent);
+app.component('ion-page', IonPage);
+```
+
+**MyComponent.vue**
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+In the example above, we are using the `IonPage` and `IonContent` components. To use them, we first import them from `@ionic/vue` in `main.ts`. From there, we call the `component` method on our app instance and pass it the tag name as well as the component definition. After we do that, we can use the components in the rest of our application without having to import them into each Vue component.
+
+For more information, see the Global Registration Vue Documentation.
+
+### Prefetching Application JavaScript
+
+By default, the Vue CLI will automatically generate prefetch hints for the JavaScript in your application. Prefetching utilizes the browser idle time to download documents that the user might visit in the near future. When the user visits a page that requires the prefetched document, it can be served quickly from the browser's cache.
+
+Prefetching consumes bandwidth, so if you have a large app, you may want to disable it. You can do this by modifying or creating your `vue.config.js` file:
+
+**vue.config.js**
+
+```js
+module.exports = {
+ chainWebpack: (config) => {
+ config.plugins.delete('prefetch');
+ },
+};
+```
+
+The configuration above will prevent all files from being prefetched and, instead, will be loaded when they are needed. You can also select certain chunks to prefetch. Check out the Vue CLI Docs on Prefetching for more examples.
+
+## Build a Native App
+
+We now have the basics of an Ionic Vue app down, including some UI components and navigation. The great thing about Ionic Framework’s components is that they work anywhere, including iOS, Android, and PWAs. To deploy to mobile, desktop, and beyond, we use Ionic’s cross-platform app runtime [Capacitor](https://capacitorjs.com). It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible while accessing rich native device features on platforms that support them.
+
+Adding native functionality is easy. First, add Capacitor to your project:
+
+```shell
+ionic integrations enable capacitor
+```
+
+Next, build the project, then add your platform of choice:
+
+```shell
+ionic build
+ionic cap add ios
+ionic cap add android
+```
+
+We use the standard native IDEs (Xcode and Android Studio) to open, build, and run the iOS and Android projects:
+
+```shell
+ionic cap open ios
+ionic cap open android
+```
+
+Additional details can be found [here](https://capacitorjs.com/docs/getting-started/with-ionic).
+
+Next, check out [all the APIs](https://capacitorjs.com/docs/apis) that are available. There is some great features, including the [Camera API](https://capacitorjs.com/docs/apis/camera). We can implement photo capture functionality in just a few lines of code:
+
+```html
+
+
+
+
+ Ionic Blank
+
+
+
+ ![]()
+ Take Photo
+
+
+
+
+
+```
+
+## Where to go from here
+
+This guide covered the basics of creating an Ionic Vue app, adding some basic navigation, and introducing Capacitor as a way of building native apps. To dive deeper into building complete Ionic Framework apps with Vue and Capacitor, follow our [First App guide](your-first-app.mdx).
+
+For a more detailed look at Ionic Frameworks’s components, check out the [component API pages](https://ionicframework.com/docs/components). For more details on Vue, review the [Vue Docs](https://v3.vuejs.org/). To keep building native features, see the [Capacitor docs](https://capacitorjs.com/docs/).
+
+Happy app building! 🎉
diff --git a/versioned_docs/version-v5/vue/storage.md b/versioned_docs/version-v5/vue/storage.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/storage.md
rename to versioned_docs/version-v5/vue/storage.mdx
diff --git a/versioned_docs/version-v5/vue/testing.md b/versioned_docs/version-v5/vue/testing.mdx
similarity index 100%
rename from versioned_docs/version-v5/vue/testing.md
rename to versioned_docs/version-v5/vue/testing.mdx
diff --git a/versioned_docs/version-v5/vue/troubleshooting.md b/versioned_docs/version-v5/vue/troubleshooting.md
deleted file mode 100644
index d48b1843a1b..00000000000
--- a/versioned_docs/version-v5/vue/troubleshooting.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# Troubleshooting
-
-This guide covers some of the more common issues you may run into when developing with Ionic Vue.
-
-Have an issue that you think should be covered here? Let us know!
-
-## Failed to resolve component
-
-```shell
-[Vue warn]: Failed to resolve component: ion-button
-```
-
-If you see this warning, then it is likely you did not import your component from `@ionic/vue`. By default, all Ionic Vue components are locally registered, meaning you need to import them each time you want to use them.
-
-Without importing the component, you will only get the underlying Web Component, and Vue-specific features such as `v-model` will not work.
-
-To resolve this issue, you need to import the component from `@ionic/vue` and provide it to your Vue component:
-
-```html
-
- Hello World
-
-
-
-```
-
-Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.md#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
-
-## Slot attributes are deprecated
-
-```shell
-`slot` attributes are deprecated vue/no-deprecated-slot-attribute
-```
-
-The slots that are used in Ionic Vue are Web Component slots, which are different than the slots used in Vue 2. Unfortunately, the APIs for both are very similar, and your linter is likely getting the two confused.
-
-All Ionic Vue starters ship with this rule turned off, but you can do it yourself by adding the following to your `.eslintrc.js` file:
-
-```js
-module.exports = {
- rules: {
- 'vue/no-deprecated-slot-attribute': 'off',
- },
-};
-```
-
-If you are using VSCode and have the Vetur plugin installed, you are likely getting this warning because of Vetur, not ESLint. By default, Vetur loads the default Vue 3 linting rules and ignores any custom ESLint rules.
-
-To resolve this issue, you will need to turn off Vetur's template validation with `vetur.validation.template: false`. See the Vetur Linting Guide for more information.
-
-## Method on component is not a function
-
-In order to access a method on an Ionic Framework component in Vue, you will need to access the underlying Web Component instance first:
-
-```js
-// ✅ This is correct
-ionContentRef.value.$el.scrollToBottom();
-
-// ❌ This is incorrect and will result in an error.
-ionContentRef.value.scrollToBottom();
-```
-
-In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.
-
-See the [Quickstart Guide](quickstart.md#calling-methods-on-components) for more information.
-
-## Page transitions are not working
-
-In order for page transitions to work correctly, each page must have an `ion-page` component at the root:
-
-```html
-
-
-
-
- Home
-
-
- Hello World
-
-
-
-
-```
-
-See the [IonPage documentation](navigation.md#ionpage) for more information.
diff --git a/versioned_docs/version-v5/vue/troubleshooting.mdx b/versioned_docs/version-v5/vue/troubleshooting.mdx
new file mode 100644
index 00000000000..7ea1856c16e
--- /dev/null
+++ b/versioned_docs/version-v5/vue/troubleshooting.mdx
@@ -0,0 +1,106 @@
+# Troubleshooting
+
+This guide covers some of the more common issues you may run into when developing with Ionic Vue.
+
+Have an issue that you think should be covered here? Let us know!
+
+## Failed to resolve component
+
+```shell
+[Vue warn]: Failed to resolve component: ion-button
+```
+
+If you see this warning, then it is likely you did not import your component from `@ionic/vue`. By default, all Ionic Vue components are locally registered, meaning you need to import them each time you want to use them.
+
+Without importing the component, you will only get the underlying Web Component, and Vue-specific features such as `v-model` will not work.
+
+To resolve this issue, you need to import the component from `@ionic/vue` and provide it to your Vue component:
+
+```html
+
+ Hello World
+
+
+
+```
+
+Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach.
+
+## Slot attributes are deprecated
+
+```shell
+`slot` attributes are deprecated vue/no-deprecated-slot-attribute
+```
+
+The slots that are used in Ionic Vue are Web Component slots, which are different than the slots used in Vue 2. Unfortunately, the APIs for both are very similar, and your linter is likely getting the two confused.
+
+All Ionic Vue starters ship with this rule turned off, but you can do it yourself by adding the following to your `.eslintrc.js` file:
+
+```js
+module.exports = {
+ rules: {
+ 'vue/no-deprecated-slot-attribute': 'off',
+ },
+};
+```
+
+If you are using VSCode and have the Vetur plugin installed, you are likely getting this warning because of Vetur, not ESLint. By default, Vetur loads the default Vue 3 linting rules and ignores any custom ESLint rules.
+
+To resolve this issue, you will need to turn off Vetur's template validation with `vetur.validation.template: false`. See the Vetur Linting Guide for more information.
+
+## Method on component is not a function
+
+In order to access a method on an Ionic Framework component in Vue, you will need to access the underlying Web Component instance first:
+
+```js
+// ✅ This is correct
+ionContentRef.value.$el.scrollToBottom();
+
+// ❌ This is incorrect and will result in an error.
+ionContentRef.value.scrollToBottom();
+```
+
+In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs.
+
+See the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information.
+
+## Page transitions are not working
+
+In order for page transitions to work correctly, each page must have an `ion-page` component at the root:
+
+```html
+
+
+
+
+ Home
+
+
+ Hello World
+
+
+
+
+```
+
+See the [IonPage documentation](navigation.mdx#ionpage) for more information.
diff --git a/versioned_docs/version-v5/vue/your-first-app.md b/versioned_docs/version-v5/vue/your-first-app.md
deleted file mode 100644
index f952a9a1e46..00000000000
--- a/versioned_docs/version-v5/vue/your-first-app.md
+++ /dev/null
@@ -1,254 +0,0 @@
----
-sidebar_label: Build Your First App
----
-
-# Your First Ionic App: Vue
-
-The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
-
-Here’s the finished app running on all 3 platforms:
-
-
-
-## What We'll Build
-
-We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device.
-
-Highlights include:
-
-- One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
-- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
-
-Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-vue).
-
-## Download Required Tools
-
-Download and install these right away to ensure an optimal Ionic development experience:
-
-- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
-- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
-- **Command-line interface/terminal (CLI)**:
- - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
- CLI, running in Administrator mode.
- - **Mac/Linux** users, virtually any terminal will work.
-
-## Install Ionic Tooling
-
-Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens:
-
-:::note
-To open a terminal in Visual Studio Code, go to Terminal -> New Terminal.
-:::
-
-```shell
-npm install -g @ionic/cli@latest native-run cordova-res
-```
-
-:::note
-The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
-
-Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
-:::
-
-## Create an App
-
-Next, create an Ionic Vue app that uses the "Tabs" starter template and adds Capacitor for native functionality:
-
-```shell
-ionic start photo-gallery tabs --type vue --capacitor
-```
-
-This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
-
-Next, change into the app folder:
-
-```shell
-cd photo-gallery
-```
-
-Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
-
-```shell
-npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
-```
-
-### PWA Elements
-
-Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
-
-It's a separate dependency, so install it next:
-
-```shell
-npm install @ionic/pwa-elements
-```
-
-After installation, open up the project in your code editor of choice.
-
-Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
-
-```tsx
-// Above the createApp() line
-import { defineCustomElements } from '@ionic/pwa-elements/loader';
-
-// Call the element loader after the platform has been bootstrapped
-defineCustomElements(window);
-```
-
-That’s it! Now for the fun part - let’s see the app in action.
-
-## Run the App
-
-Run this command in your shell:
-
-```shell
-ionic serve
-```
-
-And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed.
-
-## Photo Gallery!!!
-
-There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
-
-
-Open `/src/views/Tab2.vue`. We see:
-
-```html
-
-
-
-
- Tab 2
-
-
-
-
-
- Tab 2
-
-
-
-
-
-
-
-```
-
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
-
-```html
-Photo Gallery
-```
-
-We put the visual aspects of our app into ``. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. But first, remove the `ExploreContainer` component, beginning with the import statement:
-
-```tsx
-import ExploreContainer from '@/components/ExploreContainer.vue';
-```
-
-Next, remove the component name (`ExploreContainer`) from the `components` list in the Default Export and the HTML:
-
-```html
-
-```
-
-We'll replace it with a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports within the `
-```
-
-
-
-
-## Buttons
-
-In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button.
-
-Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
-
-import Buttons from '@site/static/usage/v6/alert/buttons/index.md';
-
-
-
-## Inputs
-
-Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
-
-### Text Inputs Example
-
-import TextInputs from '@site/static/usage/v6/alert/inputs/text-inputs/index.md';
-
-
-
-### Radio Example
-
-import Radios from '@site/static/usage/v6/alert/inputs/radios/index.md';
-
-
-
-## Customization
-
-Alert uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
-
-We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces.
-
-```css
-/* DOES NOT WORK - not specific enough */
-.alert-wrapper {
- background: #e5e5e5;
-}
-
-/* Works - pass "my-custom-class" in cssClass to increase specificity */
-.my-custom-class .alert-wrapper {
- background: #e5e5e5;
-}
-```
-
-Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Alert without needing to target individual elements:
-
-```css
-.my-custom-class {
- --background: #e5e5e5;
-}
-```
-
-import Customization from '@site/static/usage/v6/alert/customization/index.md';
-
-
-
-:::note
-If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
-:::
-
-## Accessibility
-
-Ionic automatically sets the Alert's `role` to either [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) if there are any inputs or buttons included, or [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) if there are none.
-
-If the `header` property is defined for the Alert, the `aria-labelledby` attribute will be automatically set to the header's ID. The `subHeader` element will be used as a fallback if `header` is not defined. Similarly, the `aria-describedby` attribute will be automatically set to the ID of the `message` element if that property is defined.
-
-It is strongly recommended that your Alert have a `message`, as well as either a `header` or `subHeader`, in order to align with the ARIA spec. If you choose not to include a `header` or `subHeader`, an alternative is to provide a descriptive `aria-label` using the `htmlAttributes` property.
-
-All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert.
-
-## Interfaces
-
-### AlertButton
-
-```typescript
-interface AlertButton {
- text: string;
- role?: 'cancel' | 'destructive' | string;
- cssClass?: string | string[];
- handler?: (value: any) => boolean | void | { [key: string]: any };
-}
-```
-
-### AlertInput
-
-```typescript
-interface AlertInput {
- type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
- name?: string;
- placeholder?: string;
- value?: any;
- /**
- * The label text to display next to the input, if the input type is `radio` or `checkbox`.
- */
- label?: string;
- checked?: boolean;
- disabled?: boolean;
- id?: string;
- handler?: (input: AlertInput) => void;
- min?: string | number;
- max?: string | number;
- cssClass?: string | string[];
- attributes?: { [key: string]: any };
- tabindex?: number;
-}
-```
-
-### AlertOptions
-
-```typescript
-interface AlertOptions {
- header?: string;
- subHeader?: string;
- message?: string | IonicSafeString;
- cssClass?: string | string[];
- inputs?: AlertInput[];
- buttons?: (AlertButton | string)[];
- backdropDismiss?: boolean;
- translucent?: boolean;
- animated?: boolean;
- htmlAttributes?: { [key: string]: any };
-
- mode?: Mode;
- keyboardClose?: boolean;
- id?: string;
-
- enterAnimation?: AnimationBuilder;
- leaveAnimation?: AnimationBuilder;
-}
-```
-
-## Properties
-
-
-
-## Events
-
-
-
-## Methods
-
-
-
-## CSS Shadow Parts
-
-
-
-## CSS Custom Properties
-
-
-
-## Slots
-
-
diff --git a/versioned_docs/version-v6/api/alert.mdx b/versioned_docs/version-v6/api/alert.mdx
new file mode 100644
index 00000000000..44db1bcf1a6
--- /dev/null
+++ b/versioned_docs/version-v6/api/alert.mdx
@@ -0,0 +1,257 @@
+---
+title: 'ion-alert'
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+import Props from '@ionic-internal/component-api/v6/alert/props.mdx';
+import Events from '@ionic-internal/component-api/v6/alert/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/alert/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/alert/parts.mdx';
+import CustomProps from '@ionic-internal/component-api/v6/alert/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v6/alert/slots.mdx';
+
+
+ ion-alert: Ionic API Alert Buttons with Custom Message Prompts
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`.
+
+## Presenting
+
+### Controller
+
+import Controller from '@site/static/usage/v6/alert/presenting/controller/index.mdx';
+
+
+
+### Inline
+
+When using Ionic with React or Vue, `ion-alert` can also be placed directly in the template through use of the `isOpen` property. Note that `isOpen` must be set to `false` manually when the alert is dismissed; it will not be updated automatically.
+
+
+
+
+```tsx
+import React, { useState } from 'react';
+import { IonAlert, IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+ const [showAlert, setShowAlert] = useState(false);
+
+ return (
+
+ setShowAlert(true)}>Click Me
+ setShowAlert(false)}
+ header="Alert"
+ subHeader="Important message"
+ message="This is an alert!"
+ buttons={['OK']}
+ />
+
+ );
+}
+```
+
+
+
+
+```html
+
+
+ Show Alert
+
+
+
+
+
+```
+
+
+
+
+## Buttons
+
+In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button.
+
+Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
+
+import Buttons from '@site/static/usage/v6/alert/buttons/index.mdx';
+
+
+
+## Inputs
+
+Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
+
+### Text Inputs Example
+
+import TextInputs from '@site/static/usage/v6/alert/inputs/text-inputs/index.mdx';
+
+
+
+### Radio Example
+
+import Radios from '@site/static/usage/v6/alert/inputs/radios/index.mdx';
+
+
+
+## Customization
+
+Alert uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector.
+
+We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces.
+
+```css
+/* DOES NOT WORK - not specific enough */
+.alert-wrapper {
+ background: #e5e5e5;
+}
+
+/* Works - pass "my-custom-class" in cssClass to increase specificity */
+.my-custom-class .alert-wrapper {
+ background: #e5e5e5;
+}
+```
+
+Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Alert without needing to target individual elements:
+
+```css
+.my-custom-class {
+ --background: #e5e5e5;
+}
+```
+
+import Customization from '@site/static/usage/v6/alert/customization/index.mdx';
+
+
+
+:::note
+If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
+:::
+
+## Accessibility
+
+Ionic automatically sets the Alert's `role` to either [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) if there are any inputs or buttons included, or [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) if there are none.
+
+If the `header` property is defined for the Alert, the `aria-labelledby` attribute will be automatically set to the header's ID. The `subHeader` element will be used as a fallback if `header` is not defined. Similarly, the `aria-describedby` attribute will be automatically set to the ID of the `message` element if that property is defined.
+
+It is strongly recommended that your Alert have a `message`, as well as either a `header` or `subHeader`, in order to align with the ARIA spec. If you choose not to include a `header` or `subHeader`, an alternative is to provide a descriptive `aria-label` using the `htmlAttributes` property.
+
+All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert.
+
+## Interfaces
+
+### AlertButton
+
+```typescript
+interface AlertButton {
+ text: string;
+ role?: 'cancel' | 'destructive' | string;
+ cssClass?: string | string[];
+ handler?: (value: any) => boolean | void | { [key: string]: any };
+}
+```
+
+### AlertInput
+
+```typescript
+interface AlertInput {
+ type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
+ name?: string;
+ placeholder?: string;
+ value?: any;
+ /**
+ * The label text to display next to the input, if the input type is `radio` or `checkbox`.
+ */
+ label?: string;
+ checked?: boolean;
+ disabled?: boolean;
+ id?: string;
+ handler?: (input: AlertInput) => void;
+ min?: string | number;
+ max?: string | number;
+ cssClass?: string | string[];
+ attributes?: { [key: string]: any };
+ tabindex?: number;
+}
+```
+
+### AlertOptions
+
+```typescript
+interface AlertOptions {
+ header?: string;
+ subHeader?: string;
+ message?: string | IonicSafeString;
+ cssClass?: string | string[];
+ inputs?: AlertInput[];
+ buttons?: (AlertButton | string)[];
+ backdropDismiss?: boolean;
+ translucent?: boolean;
+ animated?: boolean;
+ htmlAttributes?: { [key: string]: any };
+
+ mode?: Mode;
+ keyboardClose?: boolean;
+ id?: string;
+
+ enterAnimation?: AnimationBuilder;
+ leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/app.md b/versioned_docs/version-v6/api/app.md
deleted file mode 100644
index 564ee8fcb4c..00000000000
--- a/versioned_docs/version-v6/api/app.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 'ion-app'
----
-
-import Props from '@ionic-internal/component-api/v6/app/props.md';
-import Events from '@ionic-internal/component-api/v6/app/events.md';
-import Methods from '@ionic-internal/component-api/v6/app/methods.md';
-import Parts from '@ionic-internal/component-api/v6/app/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/app/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/app/slots.md';
-
-
- ion-app: Container Element for an Ionic Application
-
-
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-App is a container element for an Ionic application. There should only be one `` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `` when they are presented.
-
-Using `ion-app` enables the following behaviors:
-
-- [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins
-- [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices
-- Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar
-- Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard
-- [Ripple effect](./ripple-effect) when activating buttons on Material Design mode
-- Other tap and focus utilities which make the experience of using an Ionic app feel more native
-
-## Properties
-
-
-
-## Events
-
-
-
-## Methods
-
-
-
-## CSS Shadow Parts
-
-
-
-## CSS Custom Properties
-
-
-
-## Slots
-
-
diff --git a/versioned_docs/version-v6/api/app.mdx b/versioned_docs/version-v6/api/app.mdx
new file mode 100644
index 00000000000..8cba9c4ee48
--- /dev/null
+++ b/versioned_docs/version-v6/api/app.mdx
@@ -0,0 +1,55 @@
+---
+title: 'ion-app'
+---
+
+import Props from '@ionic-internal/component-api/v6/app/props.mdx';
+import Events from '@ionic-internal/component-api/v6/app/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/app/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/app/parts.mdx';
+import CustomProps from '@ionic-internal/component-api/v6/app/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v6/app/slots.mdx';
+
+
+ ion-app: Container Element for an Ionic Application
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+App is a container element for an Ionic application. There should only be one `` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `` when they are presented.
+
+Using `ion-app` enables the following behaviors:
+
+- [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins
+- [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices
+- Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar
+- Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard
+- [Ripple effect](./ripple-effect) when activating buttons on Material Design mode
+- Other tap and focus utilities which make the experience of using an Ionic app feel more native
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/avatar.md b/versioned_docs/version-v6/api/avatar.md
deleted file mode 100644
index ca1258e7e20..00000000000
--- a/versioned_docs/version-v6/api/avatar.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: 'ion-avatar'
----
-
-import Props from '@ionic-internal/component-api/v6/avatar/props.md';
-import Events from '@ionic-internal/component-api/v6/avatar/events.md';
-import Methods from '@ionic-internal/component-api/v6/avatar/methods.md';
-import Parts from '@ionic-internal/component-api/v6/avatar/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/avatar/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/avatar/slots.md';
-
-
- ion-avatar: Circular Application Avatar Icon Component
-
-
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-
-
-Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
-
-Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively.
-
-## Basic Usage
-
-import Basic from '@site/static/usage/v6/avatar/basic/index.md';
-
-
-
-## Chip Avatar
-
-import Chip from '@site/static/usage/v6/avatar/chip/index.md';
-
-
-
-## Item Avatar
-
-import Item from '@site/static/usage/v6/avatar/item/index.md';
-
-
-
-## Theming
-
-### Colors
-
-import Colors from '@site/static/usage/v6/card/theming/colors/index.md';
-
-
-
-### CSS Custom Properties
-
-import CSSProps from '@site/static/usage/v6/card/theming/css-properties/index.md';
-
-
-
-## Properties
-
-
-
-## Events
-
-
-
-## Methods
-
-
-
-## CSS Shadow Parts
-
-
-
-## CSS Custom Properties
-
-
-
-## Slots
-
-
diff --git a/versioned_docs/version-v6/api/card.mdx b/versioned_docs/version-v6/api/card.mdx
new file mode 100644
index 00000000000..41936d076d1
--- /dev/null
+++ b/versioned_docs/version-v6/api/card.mdx
@@ -0,0 +1,90 @@
+---
+title: 'ion-card'
+---
+
+import Props from '@ionic-internal/component-api/v6/card/props.mdx';
+import Events from '@ionic-internal/component-api/v6/card/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/card/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/card/parts.mdx';
+import CustomProps from '@ionic-internal/component-api/v6/card/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v6/card/slots.mdx';
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+ ion-card: Card UI Components for Ionic Framework API
+
+
+
+
+
+Cards are containers that display content such as text, images, buttons, and lists.
+A card can be a single component, but is often made up of a header, title, subtitle,
+and content. Cards are broken up into several components to accommodate this structure:
+[card header](./card-header), [card title](./card-title), [card subtitle](./card-subtitle),
+and [card content](./card-content).
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/card/basic/index.mdx';
+
+
+
+## Media Cards
+
+import Media from '@site/static/usage/v6/card/media/index.mdx';
+
+
+
+## Card Buttons
+
+import Buttons from '@site/static/usage/v6/card/buttons/index.mdx';
+
+
+
+## List Card
+
+import List from '@site/static/usage/v6/card/list/index.mdx';
+
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v6/card/theming/colors/index.mdx';
+
+
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/card/theming/css-properties/index.mdx';
+
+
+
+## Properties
+
+
+
+## Events
+
+
+
+## Methods
+
+
+
+## CSS Shadow Parts
+
+
+
+## CSS Custom Properties
+
+
+
+## Slots
+
+
diff --git a/versioned_docs/version-v6/api/checkbox.md b/versioned_docs/version-v6/api/checkbox.md
deleted file mode 100644
index 36b90512411..00000000000
--- a/versioned_docs/version-v6/api/checkbox.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: 'ion-checkbox'
----
-
-import Props from '@ionic-internal/component-api/v6/checkbox/props.md';
-import Events from '@ionic-internal/component-api/v6/checkbox/events.md';
-import Methods from '@ionic-internal/component-api/v6/checkbox/methods.md';
-import Parts from '@ionic-internal/component-api/v6/checkbox/parts.md';
-import CustomProps from '@ionic-internal/component-api/v6/checkbox/custom-props.mdx';
-import Slots from '@ionic-internal/component-api/v6/checkbox/slots.md';
-
-
- ion-checkboxes: Ionic App Component to Select Multiple Options
-
-
-
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-
-
-
-Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
-
-## Basic Usage
-
-import Basic from '@site/static/usage/v6/checkbox/basic/index.md';
-
-
-
-## Indeterminate Checkboxes
-
-import Indeterminate from '@site/static/usage/v6/checkbox/indeterminate/index.md';
-
-
-
-## Theming
-
-### CSS Custom Properties
-
-import CSSProps from '@site/static/usage/v6/checkbox/theming/css-properties/index.md';
-
-
-
-## Interfaces
-
-### CheckboxChangeEventDetail
-
-```typescript
-interface CheckboxChangeEventDetail {
- value: T;
- checked: boolean;
-}
-```
-
-### CheckboxCustomEvent
-
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
-
-```typescript
-interface CheckboxCustomEvent extends CustomEvent {
- detail: CheckboxChangeEventDetail;
- target: HTMLIonCheckboxElement;
-}
-```
-
-## Properties
-
-
-
-## Events
-
-
-
-## Methods
-
-
-
-## CSS Shadow Parts
-
-
-
-## CSS Custom Properties
-
-
-
-## Slots
-
-
diff --git a/versioned_docs/version-v6/api/checkbox.mdx b/versioned_docs/version-v6/api/checkbox.mdx
new file mode 100644
index 00000000000..0ce62a68304
--- /dev/null
+++ b/versioned_docs/version-v6/api/checkbox.mdx
@@ -0,0 +1,90 @@
+---
+title: 'ion-checkbox'
+---
+
+import Props from '@ionic-internal/component-api/v6/checkbox/props.mdx';
+import Events from '@ionic-internal/component-api/v6/checkbox/events.mdx';
+import Methods from '@ionic-internal/component-api/v6/checkbox/methods.mdx';
+import Parts from '@ionic-internal/component-api/v6/checkbox/parts.mdx';
+import CustomProps from '@ionic-internal/component-api/v6/checkbox/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v6/checkbox/slots.mdx';
+
+
+ ion-checkboxes: Ionic App Component to Select Multiple Options
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v6/checkbox/basic/index.mdx';
+
+
+
+## Indeterminate Checkboxes
+
+import Indeterminate from '@site/static/usage/v6/checkbox/indeterminate/index.mdx';
+
+
+
+## Theming
+
+### CSS Custom Properties
+
+import CSSProps from '@site/static/usage/v6/checkbox/theming/css-properties/index.mdx';
+
+
+
+## Interfaces
+
+### CheckboxChangeEventDetail
+
+```typescript
+interface CheckboxChangeEventDetail {
+ value: T;
+ checked: boolean;
+}
+```
+
+### CheckboxCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface CheckboxCustomEvent extends CustomEvent {
+ detail: CheckboxChangeEventDetail;
+ target: HTMLIonCheckboxElement;
+}
+```
+
+## Properties
+
+})
}