Ionic React - First Look

Nader Dabit on October 17, 2019

Ionic now officially supports React as a first-class target & framework Ionic is an app development platform for web developers that... [Read Full]
markdown guide

Great post! One thing that is relevant to the discussion around how close to a native experience Ionic or React Native can get is that Ionic and Capacitor also uses a lot of native UI and enables direct access to native functionality. It also means you can and likely will run native code alongside your app, so the line is pretty blurry. While a lot of your app will indeed run in the WebView, it's been a key design consideration that dropping down to native code or mixing in native views is really easy in Capacitor.

That also means it is and should be easy to find any old CocoaPod, write a tiny wrapper around it, and expose it to your web app, thus creating a sort of "new Web API" your app can interact with. More on that.

We've also had a lot of people want to mix in Ionic/Capacitor with their React Native apps. Maybe they have a web team they want to enable to build out screens, or they just think it's faster to build and design a web screen, but I think we'll see them start to be used together in interesting ways. That reminds me, this calls for a page in the Capacitor docs!

Anyways, for those curious about how far the web has come for UI and animations, take a look at a preview of a drawer component we will be rolling out soon: twitter.com/maxlynch/status/113899...


There is the mvp: "Your users more than likely don't actually care."


Really nice writeup, Nader. We are most certainly spoiled with the wealth of choices available to us as developers. There are so many ways to get into mobile development developments but I will always love Ionic for allowing me to create my first mobile app three months into my journey as a developer. Cheers to a happy marriage between React and Ionic ❤️


Great writeup, Nader! You nailed it on the "framework vs. framework" idea. At the end of the day, it takes time, dedication, and hard work to build great apps - regardless of the technology you choose.


Your first phrase talking about the differences between RN and Ionic + React made it the best comparison ever ("Your users more than likely don't actually care.")! Also, I couldn't agree more as all technologies have their pros and cons, it's up to you decide which one is more suitable according to your necessities.

I've tested Ionic + React + Capacitor reproducing a small production app I have. In my opinion, it got a bit faster than using the standard stack (Ionic + Angular + Cordova) but still a bit laggy when comparing with React Native.

Btw, nice article mate!


I think capacitor is the main factor for the speed improvement.


This is a great piece, Nader. I was hoping to check it out and discover for myself most of what I got from reading this. Thank you. Definitely going to try it out and see how things go. Ionic feels like a React Component library and less native.


I'm deciding between Ionic and RN for a passion project, and one of the central features is QR code scanning. Does Ionic have good APIs for camera functionality, and hardware in general?


Both React Native and Ionic should have most of the same APIs available. As far as a QR scanner, it looks like there is one for Ionic via Cordova here


Haha, the intro article mentions that people are understandably frustrated with Cordova, so I'm hesitant to jump into it. In the end I think my app is native-first, and I'm comfortable patching react-native-web later on if it becomes necessary.


I appreciate if anyone could answer this question:
I was thinking to create a "native wrapper" with React Native myself that would point to my webapp in a webview but now I'm wondering how would it be different than just using Ionic? In other words, if all you want to use RN for is building a native wrapper why not just using Ionic or other similar hybrid platforms that allow using web technologies for targeting different platforms? Any thoughts? Is the difference in code sharing with desktop or web? Or Vendor lock in? or lack of possibility to integrate into another native app in future? Would appreciate a list of pros and cons or any info


Thank you, Nader.

Sorry for my question, How does Ionic React work with Amplify?


Ionic works great with Amplify. Using the Amplify JS library you'll be able to do everything that the library has to offer.


Nader, thank you for great post. I have one question, which option should we select when init amplify for our next Ionic React app? Ionic or React? or maybe plain JS?


Thanks for the nice intro, Nader.

How does Ionic React differ from react-native-web?

(I don't have a background on native development :))


I don’t know RNW too well but my impression is they have a lot fewer components and aren’t focused on “bringing native patterns to the web” like Ionic is.

It’s definitely awesome though and you can’t go wrong with it.


Thank you Max for the reply even for my uncalled-question (out of nowhere 😅).

I tried the tab template, and it was really easy to get started :)

I will play around more as PWA-focused approach is appealing.

code of conduct - report abuse