Mobile Development with React
A look at React Native and Ionic Framework.
This post was originally written for the AWH Insights Blog. You can read the original post there.
It turns out there are several ways, but I want to look at two: React Native and Ionic Framework.
How to Build a Cross Platform App
Before we dive into the details on each framework, let’s take a step back and look at the two main approaches that are used to build cross-platform mobile apps.
Flutter and others also use a similar approach where the framework renders each control to the screen using a low-level graphics library and a canvas control instead of a browser.
The other main approach is what I like to call the “native” approach. This is what React Native and Xamarin.Forms (soon to be .NET MAUI) use. The idea here is to take a single code base and write your UI in a way that the framework can convert it into platform-native controls. In Xamarin.Forms you use XAML and in React Native you use JSX. For instance, when you want to render a button, the framework will render a
UIButton on iOS and an
android.view.button on Android.
Each approach has its benefits and trade-offs. By examining React Native and Ionic (which both use the same core React library), we can see how each approach differs and where they are the same.
To aid in this comparison, I’ve created a simple app using both frameworks. The source code for both is available on GitHub. View the React Native app here and the Ionic Framework app here.
React Native is a mobile app UI framework created by Facebook in 2015. It sits on top of the core React library and does not replace it. Instead, if you are familiar with React in the browser, it replaces React DOM. Where React DOM renders HTML elements, React Native renders platform-native elements.
StyleSheet API. These styles work a lot like CSS, but are decidedly not CSS, which can make the transition from web development a little tricky.
Expo also provides some optional cloud-hosted options for testing and distribution.
Once you pair React Native with Expo, it becomes a more complete picture. Add some libraries to fill in some common functionality, then you can really piece an app together pretty quickly. For the sample app noted above, I used a library called React Native Elements to provide some basic styles and React Navigation to provide some basic navigation functionality.
Some Shadow DOM usage can make styling some components trickier than others, but their documentation does a good job explaining how to work around that and flagging components where that may be a problem.
Ionic is a very complete framework. In addition to the suite of UI components and CLI, it also includes a custom wrapper of React Router to help you easily configure navigation within your app. Like Expo, Ionic also provides some cloud-hosted solutions for testing and deploying your apps, though they are also optional and the framework can easily be used without them.
Which Should You Use?
As with everything else in software development, there is no perfect answer to that question. Both frameworks are mature and stable. Both can interface with native APIs and can deploy to both major mobile platforms.
React Native has the advantage that it is backed and developed by Facebook, who also maintain the main React project. It also has Expo, which takes a lot of the pain out of setting up and developing with React Native. It’s main disadvantage is that, while it does use the React component model, you have to use the native components provided by React Native. This translates to a steeper learning curve for a developer who already knows and uses React in the browser due to the lack of HTML and CSS.
Ionic does not have that disadvantage. Developing in Ionic is the exact same as developing for the browser because you are developing for the browser. Ionic apps can even be deployed as web apps (though you may lose some native functionality). And because Ionic is using the same React setup we use in web apps, it has greater compatibility with the React libraries we already know. Ionic’s more complete built-in UI library can also be a huge step up for some projects, but might be a bit of a roadblock to others depending on their UI needs.
If I had to choose what to use on any given project, I would probably lean towards Ionic because of it’s similarity to other React web projects and more complete UI solution. But that doesn’t mean it would automatically be my choice. React Native is a powerful framework that should be considered. Honestly, we’re kind of spoiled to have multiple great solutions for creating mobile apps with React.
Photo by Caspar Camille Rubin on Unsplash.