ionic-team / ionic-portals-react-native

Ionic Portals for React Native

⚡️ A supercharged native Web View for React Native ⚡️

---

Ionic Portals is a supercharged native Web View component for React Native 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

See our docs to get started with Portals.

Registration

The Ionic Portals library for React Native requires a free license 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 and refer to the React Native getting started guides to see where to add your key.

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.

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 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 while continuing to use your existing native workflow.

Ionic Framework 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.

ionic-portals-react-native's Issues

AndroidPortalView not found in the UIManager

Steps to reproduce:

• Add "@ionic/portals-react-native": "0.3.0" dependency to any React Native project.
• Import anything from "@ionic/portals-react-native" lib
• Execute in Android emulator or device

I am having the following error:

Invariant Violation: requireNativeComponent: "AndroidPortalView" was not found in the UIManager.

This error is located at:
    in AndroidPortalView (created by PortalView)
    in PortalView (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

I also tried in https://snack.expo.dev, just to check if there were something wrong with my new project (I was just bootstraping a new project, so I doubted it could be the reason).
Once I imported anything from the library, I got the following error:

(0 , r(...).requireNativeComponent) is not a function
  Evaluating @ionic/portals-react-native.js
  Evaluating App.js
  Loading App.js
TypeError: (0 , r(...).requireNativeComponent) is not a function
    at Array.eval (@ionic/portals-react-native.js:3:7644)
    at r (@ionic/portals-react-native.js:3:7868)
    at eval (@ionic/portals-react-native.js:3:8233)
    at eval (@ionic/portals-react-native.js:3:10464)
    at eval (@ionic/portals-react-native.js:3:10509)
    at Object.eval (@ionic/portals-react-native.js:3:10515)
    at eval (@ionic/portals-react-native.js:8:4)
    at eval (@ionic/portals-react-native.js:9:3)
    at eval (<anonymous>)
    at https://snack-web-player.s3.us-west-1.amazonaws.com/v2/46/static/js/app.e3f1aedc.chunk.js:1:8273

Readme usage on example is out of date for version 0.1.0

Can we update the readme with the latest usage on PortalView?
https://github.com/ionic-team/react-native-ionic-portals/blob/main/README.md

PortalView now uses portal object instead of the name string property
See example in codebase: example/App.tsx

fyi @Steven0351

Getting error "Project with path ':capacitor-android' could not be found in project"

Hi,

I'm trying to configure a capacitor plugin ( not a core or community ) in React-Native for android but getting an error.

Project with path ':capacitor-android' could not be found in project ':capacitor-biometric-auth'

I have followed the docs to add another plugin Docs

Here are my settings.gradle

rootProject.name = 'yauCoachPortal'

include ':capacitor-biometric-auth'
project(':capacitor-biometric-auth').projectDir = new File('../webapp/node_modules/@aparajita/capacitor-biometric-auth/android')

apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
includeBuild('../node_modules/react-native-gradle-plugin')

if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
    include(":ReactAndroid")
    project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
}

And app/build.gradle

dependencies {

    implementation project(':capacitor-biometric-auth')
    implementation 'io.ionic:portals:0.5.0'

    implementation fileTree(dir: "libs", include: ["*.jar"])

    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"  // From node_modules
    //other stuff
}

I have tried to configure both npm i capacitor-native-biometric and npm i capacitor-biometric-auth

"@ionic/portals-react-native": "^0.0.4"

I'm I missing something while configuring for android? If so please suggest to me the missing step(s).

Note: iOS get configured by following the docs.

ReferenceError: AndroidInitialContext is not defined

When using ver. 0.4.0 of react-native-ionic-portals, in combination with latest web based library @ionic/portals ver. 0.8.1, it crashes when trying to get initialContext on the web side, throwing this exception:

I suspect this error occurs because this library is not using the latest version of io.ionic:portals on the android native project.

It is currently using ver. "io.ionic:portals:0.7.+"

Maybe it is fixable by upgrading to 0.8.+ in order to set/get initial context correctly.