Using Ionic & capacitor as library for native apps

[korneeld]

I'm trying to figure out if it is possible to create some UI-components with Ionic and the use these components in my existing Android and iOS apps. This would be a great way to start using Ionic without having to rewrite the entire app.

I found this post by Max Lynch about Capacitor where he briefly mentiones "native apps embedding mini hybrid apps".
https://tinyletter.com/ionic-max/letters/how-capacitor-works
This sounds exactly like what I'm looking for, but I can't find any more guidance on how to achieve this. I have the following questions:

• I managed to use the BridgeFragment in android in a native project and this shows the entire Ionic app. Is it possible to split the app into multiple components that can all be used as Fragments separately?
• I noticed that BridgeFragment has a 'startDir' argument, can I use this to somehow instantiate different components?
• Will this also work on iOS?
• Are there any resources (tutorials, blogposts) on how this is done?

Cheers!

[jcesarmobile]

The embedded use case is for adding web apps as screens (or part of screens) on existing native apps. But they should be functional apps.

What you want to do it's also technically possible, but not really recommended, in example, for showing an Ionic button in your native app you would be creating a web app that just shows a button, and then show a native WebView with the size of the button that displays it. And same for every Ionic component you want to use.
You will end up with dozens of WebViews and dozens of web apps that just display a single html component.
As each component is its own web app, communication between them is going to be really complicated, and also the communication with the native app.

[korneeld]

I think I figured it out. At first I was trying to add the android-studio generated by Ionic to my dependencies, but problem with this is that you can only add one project since the names of the generated files are always the same.

In fact you just have to:

• depend on capacitor: node_modules/@capacitor
• copy the ionic-app from the www/-folder to your own src/main/assets/public/
• instantiate as: BridgeFragment.newInstance(null)

If you have multiple projects, you can copy www/ to a subfolder of assets/public/app1 and instantiate as BridgeFragment.newInstance("public/app1"). But you always have keep a copy of www/ in assets/public/ since that's where capacitor looks for some files like 'native-bridge.js' (and probably others?).

I still get this error: E/Capacitor: Unable to load capacitor.config.json. Run npx cap copy first. Not sure if this will give problems?
I also didn't test with any plugins or on iOS.

[sundeepdev]

Hi @korneeld ,
Were you able to get this working on iOS and with any plugin? I'm trying to embed a SPA built on React using Ionic React and was thinking if I can use the Bridge functionality for Native <-> Web interactions.

[korneeld]

Yes, I sort of got it working. I use the bridge to call javascript functions that are defined the ionic part and I wrote a plugin to communicate from ionic to native. The plugin has a static array of listeners which are notified when I make a call from ionic.