React Native / Ionic Framework - integration capabilities

Ionic Framework Ionic React
1

Hello, I’m currently evaluating Ionic framework for a new project, but I would need some help to better grasp some concepts. Let me explain to you the situation.

Client

I have a client, they built an app using Ionic only (without Capacitor). They are about to deploy this Hybrid-web App in both Apple and Android stores. They told me they did not use Ionic Native, but only Ionic.

My team

From our side, my team is supposed to:

  • build a set of components from scratch (mostly frontend components + calls to some APIs)

  • leverage a React Native SDK (let’s call it “ABC” for simplicity) in a subset of these components.

At the very end, our goal is to offer the above components to our client, to be integrated inside their Ionic app. We would also like to reuse the components we built, for other projects.

Questions

At the moment I am evaluating 2 scenarios:

1) Build a Core React Native codebase (with all the business logic I need in it) + a React Native UI layer. Why React Native? I would use React Native because I am sure I could then leverage the React Native SDK “ABC” I mentioned you above. Doubt: However, I am not sure if, after wrapping our components in a React Native SDK, the client Ionic app will be able to integrate them. Any thoughts / hints on this would be really helpful.

2) Leverage Capacitor + Ionic (or Ionic Native?) to have 1 shared codebase with whole business logic and UI, and then wrap components as a Ionic SDK / plugin (here I’m assuming SDK == plugin). Doubt: I am not sure if this is technically feasible and I’m not sure if I would still be able to integrate the React Native SDK “ABC” I mentioned you above, inside these Capacitor + Ionic components.

Thank you very much in advance for any additional help you could provide.

2

I doubt whether you can combine Ionic UI with React Native - easily.

From the limited knowledge I have on React Native I would say both have a totally different take on generating apps. The latter using native conponents powered by jvascript in react lingo.

Anything in Ionic UI is displayed in a webview and html5 assets. Basically a browser in a box - a totally different concept.

Technically, maybe you can embed a webview in a react native app and put the web assets in there. That api should tell u also how to bridge to react native and back. Not sure if that would make for a nice UI.

The latter being the function of Capacitor or Cordova in so called hybrid apps

Integrating the other way around would require some very interesting and likely hard ways of integrating react native ui elements in the web view. Again, not sure if this would make for a clean UI.

Ionic Native is just a javascript/typescript wrapper to sugarcoat cordova plugins.

Btw, it will be interesting to know how they intend to deploy the hybrid app. If it isnt capacitor then likely it is cordova - or maybe even phonegap. Or like some high end companies do- build their own native layer with security stuff in there. Or a TWA?

And interesting to know the function of the react native sdk - ui, backend linkages or some fancy calculations. If it is non-ui, likely you can take the javascript code (in react lingo) and port to Ionic React. Then in the end you have a full react ionic app, with all the powers of capacitor and or cordova to deploy

1 Like