chore(docs): Update react native documentation (#284)

* chore(docs): Update upgrade guides
* chore(docs): Update react native docs

lerna.json

@@ -2,9 +2,9 @@
   "capacitorVersion": "6.0.0",
   "iosMinVersion": "13.0",
   "androidMinSdk": "22",
-  "rnMinVersion": "0.63.4",
+  "rnMinVersion": "0.74.2",
   "androidLiveUpdatesVersion": "0.5.3",
-  "rnVersion": "0.5.2",
+  "rnVersion": "0.7.0",
   "iosVersion": "0.11.0",
   "androidVersion": "0.10.0",
   "cliVersion": "0.3.1",

website/docs/for-react-native/getting-started.md

@@ -18,10 +18,11 @@ await register('YOUR_PORTAL_KEY_HERE');
 
 ## Creating a Portal and Rendering It
 
-Create a Portal and add it to the portal registry:
+Create a PortalView in your view hierarchy:
 
 ```javascript
-import { addPortal } from '@ionic/portals-react-native';
+import { PortalView } from '@ionic/portals-react-native';
+
 const helloPortal = {
   // A unique name to reference later
   name: 'hello',
@@ -34,24 +35,8 @@ const helloPortal = {
   },
 };
 
-await addPortal(helloPortal);
-```
-
-Create a PortalView in your view hierarchy:
-
-```javascript
-import { PortalView } from '@ionic/portals-react-native';
-
 <PortalView
-  portal={{
-    // The name of the portal to be used in the view
-    name: 'hello',
-    // Set any initial context you may want to override.
-    initialContext: {
-      greeting: 'Goodbye!',
-    },
-  }}
-  name="hello"
+  portal={helloPortal}
   // Setting a size is required
   style={{ flex: 1, height: 300 }}
 />;

website/docs/for-react-native/guide.md

@@ -54,7 +54,7 @@ To add Portals to your React Native project, install it via NPM:
 
 ## Configure
 
-After installing the dependency you need to register your copy of Ionic Portals at runtime. This works both offline and in production. You'll need to call [register(myApiKey)](https://react-native-ionic-portals.vercel.app/functions/register.html) before creating any Portals in your app. Below is a simple example of how to bootstrap Ionic Portals before loading any Portal instances in your app. To get an API Key, refer to the [Sign Up](#signup) section.
+After installing the dependency you need to register your copy of Ionic Portals at runtime. This works both offline and in production. You'll need to call [register(myApiKey)](https://react-native-ionic-portals.vercel.app/functions/register.html) before rendering any Portals in your app. Below is a simple example of how to bootstrap Ionic Portals before loading any Portal instances in your app. To get an API Key, refer to the [Sign Up](#signup) section.
 
 ```javascript title=App.tsx
 import { register } from "@ionic/portals-react-native";

website/docs/for-react-native/how-to/define-api-in-typescript.md

@@ -118,8 +118,6 @@ After creating the Capacitor Plugin, add the Plugin to the Portal to use it.
 You will need to add the classpath to your custom plugin for Android and the Objective-C class name for iOS (the name provided in the @objc annotation in the example above):
 
 ```javascript
-import { addPortal } from "@ionic/portals-react-native";
-
 const echoPortal = {
   name: "echoPortal",
   plugins: [
@@ -129,8 +127,6 @@ const echoPortal = {
      }
   ]
 };
-
-addPortal(echoPortal);
 ```
 
 ## Calling Your Plugin Code via the Web

website/docs/for-react-native/how-to/pull-in-web-bundle.md

@@ -13,8 +13,6 @@ In order to use web applications in your native applications, you'll need to pro
 Follow the [Android instructions](../../for-android/how-to/pull-in-web-bundle.md) and [iOS instructions](../../for-ios/how-to/pull-in-web-bundle.md) in your native applications. You should make the start directories the same between both platforms to avoid issues rendering a Portal.
 
 ```javascript
-import { addPortal } from "@ionic/portals-react-native";
-
 const help = {
   name: "myPortalWebApp",
 };

website/docs/for-react-native/how-to/statically-define-portals.md

@@ -1,6 +1,6 @@
 ---
 title: Static Portals Configuration File
-sidebar_label: Statically Configure Portals
+sidebar_label: Statically Register Portals
 ---
 
 An additional configuration method is now included to support a JSON configuration file to configure Portals on application start. The JSON file must be named `portals.config.json` and be placed in the application root on iOS and `assets` root on Android.
@@ -19,99 +19,14 @@ type PortalConfig = {
   // This can be omitted if the `register` function is called before
   // attempting to render any portals in code.
   registrationKey?: string; 
-  portals: []Portal;
 }
-
-// The Portal and LiveUpdate types are the same as their corresponding types
-// in the library.
-type Portal = {
-  // The name of the Portal to be referenced. Must be unique.
-  name: string;
-  // Any CapcitorPlugins to register with the Portal.
-  plugins?: []CapacitorPlugin;
-  // The root directory of the web application relative to Bundle.main
-  // on iOS and src/main/assets on Android. If omitted, `name` is used.
-  startDir?: string;
-  // Any data needed at initial render when a portal is loaded. If this
-  // data is not statically known, it can be added dynamically on render
-  // through `initialContext` props on `PortalView` and omitted from the
-  // configuration.
-  initialContext?: {
-    [key: string]: any;
-  };
-  // The name of the initial file to load. If omitted, `index.html` is used.
-  // This field is useful for scenarios when using an SSG like Next.js and
-  // the entrypoint for the Portal is not the entrypoint for the overall
-  // application.
-  index?: string;
-  // The live update configuration if the portal is configured for remote
-  // updates.
-  liveUpdate?: LiveUpdateConfig
-};
-
-type LiveUpdateConfig = {
-  // The AppFlow application ID
-  appId: string;
-  // The AppFlow distribution channel
-  channel: string;
-  // Whether to perform a sync when the LiveUpdateConfig is registered.
-  // If you want to manually control when a LiveUpdate sync is performed,
-  // set this to false and use the `syncOne`, `syncSome`, or `syncAll` functions
-  // provided by `@ionic/portals-react-native`.
-  syncOnAdd: boolean;
-};
-
-type CapacitorPlugin = {
-  androidClassPath: string;
-  iosClassName: string;
-};
 ```
 
-At a minimum, when including a `portals.config.json` it must at least have the `portals` key defined with at least one valid `Portal` definition in the array. If you are using Live Updates, you must include a `LiveUpdate` configuration. If you are using Secure Live Updates, you must include the `liveUpdatesKey` in the configuration.
-
 ### Example Configuration
 
 ```json title=portals.config.json
 {
-  "registrationKey": "YOU_PORTALS_KEY",
-  "portals": [
-    {
-      "name": "user",
-      "startDir": "portals/shopwebapp",
-      "initialContext": {
-        "startingRoute": "/user"
-      },
-      "plugins": [
-        {
-          "androidClassPath": "com.capacitorjs.plugins.camera.CameraPlugin",
-          "iosClassName": "CAPCameraPlugin"
-        }
-      ]
-    },
-    {
-      "name": "help",
-      "startDir": "portals/shopwebapp",
-      "initialContext": {
-        "startingRoute": "/help"
-      }
-    },
-    {
-      "name": "checkout",
-      "startDir": "portals/shopwebapp",
-      "initialContext": {
-        "startingRoute": "/checkout"
-      }
-    },
-    {
-      "name": "featuredproducts",
-      "startDir": "portals/featuredproducts",
-      "liveUpdate": {
-        "appId": "abcd1234",
-        "channel": "production",
-        "syncOnAdd": true
-      }
-    }
-  ]
+  "registrationKey": "YOUR_PORTALS_KEY",
 }
 ```
 

website/docs/for-react-native/how-to/using-a-capacitor-plugin.md

@@ -27,8 +27,6 @@ Capacitor [Core Plugins](https://capacitorjs.com/docs/apis) are plugins built by
 Follow the [Android instructions](../../for-android/how-to/using-a-capacitor-plugin.md) and the [iOS instructions](../../for-ios/how-to/using-a-capacitor-plugin.md) in your native applications. When creating your portal, you will need to specify the android classpath and iOS Objective-C class name for the plugin class you intend to use:
 
 ```javascript
-import { addPortal } from "@ionic/portals-react-native";
-
 const cameraPortal = {
   name: "camera",
   plugins: [
@@ -38,8 +36,6 @@ const cameraPortal = {
     }
   ]
 };
-
-await addPortal(cameraPortal);
 ```
 
 ### Published Plugins

website/docs/for-react-native/how-to/using-the-portals-plugin.md

@@ -31,17 +31,13 @@ The Initial Context mechanism allows you to pass data to your web application fr
 You can provide initial context when registering a Portal:
 
 ```javascript
-import { addPortal } from "@ionic/portals-react-native";
-
 const portal = {
   name: "maps",
   startDir: "web",
   initialContext: {
     ic_example: "hello world",
   },
 };
-
-await addPortal(portal);
 ```
 
 You can also override any initial context when rendering a Portal:
@@ -51,7 +47,7 @@ import { PortalView } from "@ionic/portals-react-native";
 
 <PortalView
   portal={{
-    name: "maps",
+    ...portal,
     initialContext: {
       ic_example: "goodbye",
     },

website/docs/for-react-native/live-updates.md

@@ -43,8 +43,6 @@ Live Updates is already added to your React Native project if you have the depen
 After installing the dependency you need to configure Live Updates as part of the Portal creation process. Add a LiveUpdate config where your Portal is created. Provide the **appId** that corresponds with the app in Appflow, and the **channel** name to subscribe to for updates.
 
 ```javascript title=App.tsx
-import { addPortal } from "@ionic/portals-react-native";
-
 const portal = {
   name: "checkout",
   liveUpdate: {
@@ -53,8 +51,6 @@ const portal = {
     syncOnAdd: true, // pass false if you do not want a sync to immediately occur
   },
 };
-
-addPortal(portal);
 ```
 
 By default, when the app loads for the first time and the portal is created, a sync will occur. A sync operation checks the Appflow servers for a new version of the app. If a new version is available, the app files are downloaded to the device and setup with the Portal. The next time the Portal is loaded, the new version will load automatically.

website/docs/for-react-native/tutorials/auth-token-example.md

@@ -21,8 +21,6 @@ When showing a Portal after a user has logged in, there are a few different ways
 The easiest way to set the Portal's auth tokens is to set the initial context of the portal. The initial context will allow you to pass data that can be read almost immediately in the Portal.
 
 ```javascript
-import { addPortal } from '@ionic/portals-react-native';
-
 const userPage = {
   name: 'user_page',
   startDir: 'web',
@@ -31,8 +29,6 @@ const userPage = {
     auth: /* Auth Data */
   }
 };
-
-addPortal(userPage);
 ```
 
 Then, in the entry point to your web application, you can use `getInitialContext()` to read the data passed in and act on it.
@@ -60,7 +56,7 @@ In some cases, login information changes in the web layer and you want to save t
 One of the functions of the built-in portals module is to publish/subscribe to events. In this example, you could create a `login` topic and call `publish` as shown below.
 
 ```typescript {9}
-import Portals from "@ionic/portals";
+import { publish } from "@ionic/portals";
 
 const login = () => {
   // Login code...
@@ -69,7 +65,7 @@ const login = () => {
   const newTokens =
     /* Values from Login */
 
-    Portals.publish(topic, newTokens);
+    publish(topic, newTokens);
 };
 
 login();
@@ -80,7 +76,7 @@ To subscribe to the topic, call `PortalsPlugin.subcribe()` after loading the Por
 ```javascript
 import { subscribe } from "@ionic/portals-react-native";
 
-const subscriptionRef = await subscribe("login", (message) => {
+const subscriptionRef = subscribe("login", (message) => {
   const auth = message.data;
   // Rest of the React Native app...
 });