@ionic/portals-react-native 0.0.1

package/LICENSE.md

@@ -0,0 +1,67 @@
+# Ionic Portals License 1.0.0
+
+Based on the text of the licenses in the Polyform Project with new account registration conditions.
+
+## Acceptance
+
+In order to get any license under these terms, you must agree to them as both strict obligations and conditions to all your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the software to do everything you might do with the software that would otherwise infringe the licensor's copyright in it, but only so long as you comply with the  Account Registration Feature requirement below. However, you may only distribute the software according to [Distribution License](#distribution-license) and make changes or new works based on the software according to [Changes and New Works License](#changes-and-new-works-license).
+
+## Account Registration Feature
+
+You must preserve, and you must not remove or modify, the Account Registration Feature in the software.  
+
+## Distribution License
+
+The licensor grants you an additional copyright license to distribute copies of the software, but only so long as you comply with the Account Registration Feature requirement above and the Notice requirement below. Your license to distribute covers distributing the software with changes and new works permitted by [Changes and New Works License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms or the URL for them above, as well as copies of any plain-text lines beginning with `Required Notice:` that the licensor provided with the software.  For example:
+
+> Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to make changes and new works based on the software, but only so long as you comply with the Account Registration Feature requirement above.
+
+## Patent License
+
+The licensor grants you a patent license for the software that covers patent claims the licensor can license, or becomes able to license, that you would infringe by using the software.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of your licenses to anyone else, or prevent the licensor from granting licenses to anyone else.  These terms do not imply any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or contributes to infringement of any patent, your patent license for the software granted under these terms ends immediately. If your company makes such a claim, your patent license ends immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have violated any of these terms, or done anything with the software not covered by your licenses, your licenses can nonetheless continue if you come into full compliance with these terms, and take practical steps to correct past violations, within 30 days of receiving notice.  Otherwise, all your licenses end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these terms, and the **software** is the software the licensor makes available under these terms.
+
+**You** refers to the individual or entity agreeing to these terms.
+
+**Your company** is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization.  **Control** means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the software under these terms.
+
+**Use** means anything you do with the software requiring one of your licenses.
+
+**Account Registration Feature** is the portion of the software marked by the licensor as the Account Registration Feature in the software. The Account Registration Feature may be a license key, token, or any other such mechanism designated by the licensor.

package/README.md

@@ -0,0 +1,192 @@
+<br />
+<div align="center">
+  <img src="https://user-images.githubusercontent.com/5769389/134952353-7d7b4145-3a80-4946-9b08-17b3a22c03a1.png" width="560" />
+</div>
+<div align="center">
+  ⚡️ A supercharged native Web View for iOS and Android ⚡️
+</div>
+<br />
+<p align="center">
+  <a href="https://github.com/ionic-team/react-native-ionic-portals/actions?query=workflow%3ACI"><img src="https://img.shields.io/github/workflow/status/ionic-team/ionic-portals/CI?style=flat-square" /></a>
+  <a href="https://www.npmjs.com/package/@ionic/react-native-portals"><img src="https://img.shields.io/npm/l/@ionic/react-native-portals?style=flat-square" /></a>
+  <a href="https://www.npmjs.com/package/@ionic/react-native-portals"><img src="https://img.shields.io/npm/v/@ionic/react-native-portals?style=flat-square" /></a>
+</p>
+<p align="center">
+  <a href="https://ionic.io/docs/portals"><img src="https://img.shields.io/static/v1?label=docs&message=ionic.io/portals&color=blue&style=flat-square" /></a>
+  <a href="https://twitter.com/ionicframework"><img src="https://img.shields.io/twitter/follow/ionicframework" /></a>
+</p>
+
+---
+
+Ionic Portals is a supercharged native Web View component for iOS and Android that lets you add web-based experiences to native mobile apps. It enables native and web teams to better collaborate and bring new and existing web experiences to mobile in a safe, controlled way.
+
+## Getting Started
+
+### Installation
+`npm install @ionic/portals-react-native`
+or
+`yarn add @ionic/portals-react-native`
+
+### Usage
+Register Portals with your [product key](#Registration):
+```javascript
+import { register } from '@ionic/portals-react-native';
+
+register('YOUR_PORTAL_KEY_HERE');
+```
+
+Create a Portal and add it to the portal registry:
+```javascript
+import { addPortal } from '@ionic/portals-react-native';
+const helloPortal = {
+  // A unique name to reference later
+  name: 'hello',
+  // This is the location of your web bundle relative to the asset directory in Android and Bundle.main in iOS
+  // This will default to the name of the portal
+  startDir: 'portals/hello', 
+  // Any initial state to be provided to a Portal if needed
+  initialContext: {
+    greeting: 'Hello, world!'
+  }
+};
+
+addPortal(helloPortal);
+```
+
+Create a PortalView in your view hierarchy:
+```javascript
+import { PortalView } from '@ionic/portals-react-native';
+
+<PortalView 
+  // 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!' }}
+
+  // Setting a size is required
+  style={{ flex: 1, height: 300 }} 
+  />
+```
+
+#### iOS Specific Configuration
+##### AppDelegate
+Both Capacitor and React Native have classes named `AppDelegate`. To prevent a clash that can prevent your React Native application from launching,
+you will need to rename `AppDelegate` to something else:
+```objective-c
+// AppDelegate.h
+@interface RNAppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
+```
+
+```objective-c
+// AppDelegate.m
+@implementation RNAppDelegate
+@end
+```
+
+```objective-c
+// main.m
+#import <UIKit/UIKit.h>
+
+#import "AppDelegate.h"
+
+int main(int argc, char *argv[])
+{
+  @autoreleasepool {
+    return UIApplicationMain(argc, argv, nil, NSStringFromClass([RNAppDelegate class]));
+  }
+}
+```
+
+##### Podfile
+Because many of the Ionic Portals dependencies are comprised of Swift code and have custom module maps, you will need to add `use_frameworks!` to your iOS Podfile and remove `use_flipper!()`
+
+### Communicating between React Native and Web
+One of the key features of Ionic Portals for React Native is facilitating communication between the web and React Native layers of your application.
+Publishing a message to the web:
+```javascript
+import { publish } from '@ionic/portals-react-native';
+
+publish('topic', { number: 1 })
+```
+
+Subscribe to messages from the web:
+```javascript
+import { subscribe } from '@ionic/portals-react-native';
+
+let subscriptionReference = await subscribe('topic', message => {
+  // Here you have access to:
+  // message.data - Any data sent from the web
+  // message.subscriptionRef - The subscription reference used to manage the lifecycle of the subscription
+  // message.topic - The topic the message was published on
+})
+```
+
+When you no longer need to receive events, unsubscribe:
+```javascript
+import { unsubscribe } from '@ionic/portals-react-native';
+
+unsubscribe('channel:topic', subscriptionReference)
+```
+
+To see an example of Portals Pub/Sub in action that manages the lifecycle of a subscription with the lifecycle of a React Native component, refer to the [`PubSubLabel`](https://github.com/ionic-team/react-native-ionic-portals/blob/af19df0d66059d85ab8dde493504368c3bf39127/example/App.tsx#L53) implementation in the example project.
+
+### Using Capacitor Plugins
+If you need to use any Capacitor plugins, you will have to register them in your Android project. This will also require creating and registering your Portals in native code as well:
+
+**Android**
+```java
+public class MainApplication extends Application implements ReactApplication {
+  @Override    
+  public void onCreate() {
+    super.onCreate();
+
+    PortalManager.register("YOUR_PORTAL_KEY_HERE");
+    PortalManager.newPortal("hello")
+      .addPlugin(MyCapacitorPlugin.class) // Plugin registration
+      .setInitialContext(Map.of("greeting", "Hello, world!"))
+      .setStartDir("portals/hello")
+      .create();
+  }
+}
+```
+
+**iOS**
+```objective-c
+@implementation RNAppDelegate
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDicationary *)launchOptions {
+    // React Native boilerplate
+    [PortalManager register:@"YOUR_PORTAL_KEY_HERE"];
+    PortalBuilder *builder = [[PortalBuilder alloc] init:@"hello"];
+    [builder setStartDir:@"portals/hello"];
+    [builder setInitialContext: @{ @"greeting": @"Hello, world!" }] 
+    Portal *portal = [builder create];
+    [PortalManager addPortal:portal];
+}
+@end
+```
+
+### Bundling Your Web Apps
+Currently there is no tooling for bundling your web apps directly as part of @ionic/portals-react-native. Please follow the [native guides](https://ionic.io/docs/portals/how-to/pull-in-web-bundle#setup-the-web-asset-directory) to manage this as part of the native build process.
+
+
+## Registration
+
+Ionic Portals for React Native requires a key to use. Once you have integrated Portals into your project, login to your ionic account to get a key. See our doc on [how to register for free and get your Portals license key](https://ionic.io/docs/portals/how-to/get-a-product-key) and refer to the [usage](#Usage) section on how to add your key to your React Native application.
+
+## FAQ
+
+### What is the pricing for Portals use?
+
+Portals is free to use in non-production environments. Businesses with more than USD $1 million in annual revenue are required to purchase a license from Ionic before using Portals in production.
+
+### Is Portals Open Source?
+
+See our [license](https://github.com/ionic-team/ionic-portals/blob/main/LICENSE.md).
+
+### How is Portals Related to Capacitor and Ionic?
+
+Ionic Portals is a solution that lets you add web-based experiences to your native mobile apps. Portals uses [Capacitor](https://capacitorjs.com) as a bridge between the native code and the web code to allow for cross-communication between the two layers. Because Portals uses Capacitor under the hood, you are able to use any existing [Capacitor Plugins](https://capacitorjs.com/docs/plugins) and even most [Cordova Plugins](https://capacitorjs.com/docs/plugins/cordova) while continuing to use your existing native workflow. Portals for React Native brings these capabilities to React Native applications.
+
+[Ionic Framework](https://ionicframework.com/) is the open-source mobile app development framework that makes it easy to build top quality native and progressive web apps with web technologies. Your web experiences can be developed with Ionic, but it is not necessary to use Portals.
+

package/ReactNativePortals.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "ReactNativePortals"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "14.0" }
+  s.source       = { :git => "https://github.com/ionic-team/react-native-ionic-portals.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+  s.dependency "IonicPortals", "~> 0.5.1"
+end

package/android/build.gradle

@@ -0,0 +1,122 @@
+buildscript {
+    // Buildscript is evaluated before everything else so we can't use getExtOrDefault
+    def kotlin_version = rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : project.properties['ReactNativePortals_kotlinVersion']
+
+    repositories {
+        google()
+        mavenCentral()
+    }
+
+    dependencies {
+        classpath 'com.android.tools.build:gradle:7.1.2'
+        // noinspection DifferentKotlinGradleVersion
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+    }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+def getExtOrIntegerDefault(name) {
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties['ReactNativePortals_' + name]).toInteger()
+}
+
+android {
+    compileSdkVersion getExtOrIntegerDefault('compileSdkVersion')
+    defaultConfig {
+        minSdkVersion 16
+        targetSdkVersion getExtOrIntegerDefault('targetSdkVersion')
+        versionCode 1
+        versionName "1.0"
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+        }
+    }
+    lintOptions {
+        disable 'GradleCompatible'
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+}
+
+repositories {
+    mavenCentral()
+    jcenter()
+    google()
+
+    def found = false
+    def defaultDir = null
+    def androidSourcesName = 'React Native sources'
+
+    if (rootProject.ext.has('reactNativeAndroidRoot')) {
+        defaultDir = rootProject.ext.get('reactNativeAndroidRoot')
+    } else {
+        defaultDir = new File(
+            projectDir,
+            '/../../../node_modules/react-native/android'
+        )
+    }
+
+    if (defaultDir.exists()) {
+        maven {
+            url defaultDir.toString()
+            name androidSourcesName
+        }
+
+        logger.info(":${project.name}:reactNativeAndroidRoot ${defaultDir.canonicalPath}")
+        found = true
+    } else {
+        def parentDir = rootProject.projectDir
+
+        1.upto(5, {
+            if (found) return true
+            parentDir = parentDir.parentFile
+
+            def androidSourcesDir = new File(
+                parentDir,
+                'node_modules/react-native'
+            )
+
+            def androidPrebuiltBinaryDir = new File(
+                parentDir,
+                'node_modules/react-native/android'
+            )
+
+            if (androidPrebuiltBinaryDir.exists()) {
+                maven {
+                    url androidPrebuiltBinaryDir.toString()
+                    name androidSourcesName
+                }
+
+                logger.info(":${project.name}:reactNativeAndroidRoot ${androidPrebuiltBinaryDir.canonicalPath}")
+                found = true
+            } else if (androidSourcesDir.exists()) {
+                maven {
+                    url androidSourcesDir.toString()
+                    name androidSourcesName
+                }
+
+                logger.info(":${project.name}:reactNativeAndroidRoot ${androidSourcesDir.canonicalPath}")
+                found = true
+            }
+        })
+    }
+
+    if (!found) {
+        throw new GradleException(
+            "${project.name}: unable to locate React Native android sources. " +
+                "Ensure you have you installed React Native as a dependency in your project and try again."
+        )
+    }
+}
+
+dependencies {
+    // noinspection GradleDynamicVersion
+    api 'com.facebook.react:react-native:+'
+    implementation "io.ionic:portals:0.5.0"
+}

package/android/gradle.properties

@@ -0,0 +1,4 @@
+ReactNativePortals_kotlinVersion=1.5.31
+ReactNativePortals_compileSdkVersion=29
+ReactNativePortals_targetSdkVersion=29
+android.useAndroidX=true

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="io.ionic.portals.reactnative">
+
+</manifest>

package/android/src/main/java/io/ionic/portals/reactnative/ReactNativePortalsModule.kt

@@ -0,0 +1,203 @@
+package io.ionic.portals.reactnative
+
+import android.view.Choreographer
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.*
+import com.facebook.react.modules.core.DeviceEventManagerModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.getcapacitor.JSObject
+import io.ionic.portals.*
+import org.json.JSONArray
+import org.json.JSONException
+import org.json.JSONObject
+
+class PortalManagerModule(reactContext: ReactApplicationContext) :
+    ReactContextBaseJavaModule(reactContext) {
+    override fun getName(): String {
+        return "IONPortalManager"
+    }
+
+    @ReactMethod
+    fun register(key: String) {
+        PortalManager.register(key)
+    }
+
+    @ReactMethod
+    fun addPortal(map: ReadableMap) {
+        map.getString("name")?.let { name ->
+            val startDir = map.getString("startDir")
+            val initialContext = map.getMap("initialContext")?.toHashMap()
+
+            val portalBuilder = PortalBuilder(name)
+
+            if (startDir != null) {
+                portalBuilder.setStartDir(startDir)
+            }
+
+            if (initialContext != null) {
+                portalBuilder.setInitialContext(initialContext)
+            }
+
+            // TODO: We need to figure out if we can register plugins from javascript
+            val portal = portalBuilder
+                .addPlugin(PortalsPlugin::class.java)
+                .create()
+
+            PortalManager.addPortal(portal)
+        }
+    }
+}
+
+class PortalsPubSubModule(reactContext: ReactApplicationContext) :
+    ReactContextBaseJavaModule(reactContext) {
+    override fun getName(): String {
+        return "IONPortalsPubSub"
+    }
+
+    @ReactMethod
+    fun subscribe(topic: String, promise: Promise) {
+        val reference = PortalsPlugin.subscribe(topic) { result ->
+            reactApplicationContext
+                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+                .emit("PortalsSubscription", result.toJSObject().toReactMap())
+        }
+
+        promise.resolve(reference)
+    }
+
+    @ReactMethod
+    fun publish(topic: String, data: ReadableMap) {
+        PortalsPlugin.publish(topic, data.toJSObject())
+    }
+
+    @ReactMethod
+    fun unsubscribe(topic: String, reference: Int) {
+        PortalsPlugin.unsubscribe(topic, reference)
+    }
+
+    // These are required to be an EventEmitter in javascript
+
+    @ReactMethod
+    fun addListener(eventName: String) {
+    }
+
+    @ReactMethod
+    fun removeListeners(count: Int) {
+    }
+}
+
+fun JSONObject.toReactMap(): ReadableMap =
+    keys().asSequence().fold(WritableNativeMap()) { map, key ->
+        try {
+            when (val value = get(key)) {
+                is JSONObject -> map.putMap(key, value.toReactMap())
+                is JSONArray -> map.putArray(key, value.toReactArray())
+                is Boolean -> map.putBoolean(key, value)
+                is Int -> map.putInt(key, value)
+                is Double -> map.putDouble(key, value)
+                is String -> map.putString(key, value)
+                null -> map.putNull(key)
+                else -> map.putString(key, value.toString())
+            }
+        } catch (_: JSONException) {
+        }
+
+        return@fold map
+    }
+
+fun JSONArray.toReactArray(): ReadableArray =
+    (0 until length()).fold(WritableNativeArray()) { array, index ->
+        try {
+            when (val value = get(index)) {
+                is JSONObject -> array.pushMap(value.toReactMap())
+                is JSONArray -> array.pushArray(value.toReactArray())
+                is Boolean -> array.pushBoolean(value)
+                is Int -> array.pushInt(value)
+                is Double -> array.pushDouble(value)
+                is String -> array.pushString(value)
+                null -> array.pushNull()
+                else -> array.pushString(value.toString())
+            }
+        } catch (_: JSONException) {
+        }
+
+        return@fold array
+    }
+
+fun ReadableMap.toJSObject(): JSObject = JSObject.fromJSONObject(JSONObject(toHashMap()))
+
+class PortalViewManager(private val context: ReactApplicationContext) :
+    ViewGroupManager<FrameLayout>() {
+    private val createId = 1
+    private var portal: Portal? = null
+
+    @ReactProp(name = "name")
+    fun setPortal(viewGroup: ViewGroup, portalName: String) {
+        portal = PortalManager.getPortal(portalName)
+    }
+
+    @ReactProp(name = "initialContext")
+    fun setInitialContext(viewGroup: ViewGroup, initialContext: ReadableMap) {
+        portal?.setInitialContext(initialContext.toHashMap())
+    }
+
+    override fun getName(): String {
+        return "AndroidPortalView"
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): FrameLayout {
+        return FrameLayout(reactContext)
+    }
+
+    override fun getCommandsMap(): MutableMap<String, Int>? {
+        return mutableMapOf("create" to createId)
+    }
+
+    override fun receiveCommand(root: FrameLayout, commandId: String?, args: ReadableArray?) {
+        super.receiveCommand(root, commandId, args)
+        val viewId = args?.getInt(0) ?: return
+        val commandId = commandId?.toIntOrNull() ?: return
+
+        when (commandId) {
+            createId -> createFragment(root, viewId)
+        }
+    }
+
+    private fun createFragment(root: FrameLayout, viewId: Int) {
+        val portal = portal ?: return
+        val parentView = root.findViewById<ViewGroup>(viewId)
+        setupLayout(parentView)
+
+        val portalFragment = PortalFragment(portal)
+        val fragmentActivity = context.currentActivity as? FragmentActivity ?: return
+        fragmentActivity.supportFragmentManager
+            .beginTransaction()
+            .replace(viewId, portalFragment, "$viewId")
+            .commit()
+    }
+
+    private fun setupLayout(view: ViewGroup) {
+        Choreographer.getInstance().postFrameCallback {
+            layoutChildren(view)
+            view.viewTreeObserver.dispatchOnGlobalLayout()
+        }
+    }
+
+    private fun layoutChildren(view: ViewGroup) {
+        for (i in 0 until view.childCount) {
+            val child = view.getChildAt(i)
+
+            child.measure(
+                View.MeasureSpec.makeMeasureSpec(view.measuredWidth, View.MeasureSpec.EXACTLY),
+                View.MeasureSpec.makeMeasureSpec(view.measuredHeight, View.MeasureSpec.EXACTLY)
+            )
+
+            child.layout(0, 0, child.measuredWidth, child.measuredHeight)
+        }
+    }
+}

package/android/src/main/java/io/ionic/portals/reactnative/ReactNativePortalsPackage.kt

@@ -0,0 +1,20 @@
+package io.ionic.portals.reactnative
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+
+class ReactNativePortalsPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return listOf(
+            PortalManagerModule(reactContext),
+            PortalsPubSubModule(reactContext)
+        )
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return listOf(PortalViewManager(reactContext))
+    }
+}

package/ios/Podfile

@@ -0,0 +1,14 @@
+require_relative '../node_modules/react-native/scripts/react_native_pods'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+
+platform :ios, '14.0'
+
+target 'ReactNativePortals' do
+  # Comment the next line if you don't want to use dynamic frameworks
+  config = use_native_modules!
+  use_frameworks!
+  use_react_native!(:path => config["reactNativePath"])
+  # Pods for ReactNativePortals
+  pod 'IonicPortals', '~> 0.5.1'
+end
+