React Native for Cross-Platform App Development

Special thanks to Paweł Ciepliński for help creating this article.

React Native is one of the most popular frameworks for creating cross-platform apps. One of the most popular, since it was dethroned by about every popularity metric by… Flutter. These two seem similar in their approach, but in reality they’re quite different. We’re writing about both of them here, because we considered them for one of our apps we were developing for Enerace.

Let’s start from the beginning - let’s compare React Native with Flutter.

React Native vs Flutter

There is a bit of a rivalry between the two frameworks for the crown of the most popular one. For the last couple of years that would be Google's helper across the board: in StackOverflow’s survey, Google Trends data, and on GitHub (in terms of stars). Of course, popularity hardly ever tells the full story, so let’s examine the two closer before we tell you why we picked one over the other.

React Native

React Native has historically been the way to create cross-platform mobile apps when your company already hired React developers. Since React is a de facto industry standard, multiple companies have already taken advantage of the fact that you must learn the library once, and you can write code (almost) anywhere.

Between the two versions of Meta’s library, code looks kind of the same, and unless you need native code (which most often you don’t) writing your apps will be a familiar experience. The only real difference is styling. While it does seem familiar at first, it can feel slightly awkward. In general, even though React Native will feel similar, adaptation does take some time. Of course, much less time than learning a new language, a completely new framework, and getting used to a completely new mental model. In the end it made more sense for us to become a React Native app development company, than anything else.

Pros

• integrates with native widgets
• reuse some business logic between the web & the mobile app
• use JavaScript
• hugely popular
• Expo brings many plugins augmenting otherwise limited React Native functionality

Cons

• first-party support is lacking
• can be quite difficult to understand for the newcomers
• styling capabilities are lackluster

Flutter

Flutter is Google’s take on cross-platform app development. It takes a different approach than React Native. Unlike Meta’s framework, it replaces native widgets to appear more uniform across platforms; nothing is managed directly by the operating system, and instead Flutter manages everything.

The biggest obstacle in Flutter’s adoption is Dart (at least for us). Dart is an object-oriented language developed by the company based in Mountain View, CA. While it is better designed than JavaScript, and learning it won’t take long, it’s much less popular than JS, and you can’t really use it to, e.g., create complex server-side apps.

Pros

• up to 100% code reuse across platforms
• makes creating apps a breeze
• easier to grasp than React Native
• rich first-party support
• a ton of components out of the box
• Dart is better than JavaScript

Cons

• you must learn Dart
• the web support remains a lot to be desired
• Material Design as a de facto default

The Bottom Line

Flutter and React Native are currently the two most popular frameworks for creating mobile apps. Objectively speaking, Flutter’s mental model is much easier to understand for a newcomer. You mostly just need to know that everything is a “widget”, and that’s about 80% of all you need to learn. Unfortunately, because everything is a “widget” the code does get ugly pretty fast, but it’s not the end of the world. The issue of state management, as well as no support for reflection is arguably more problematic.

In the other corner we have React Native. Objectively, it’s more complicated than Flutter, and first-party support is lacking (to put it mildly), but that’s not why people choose the framework. Usually it’s because you can reuse your React & JavaScript knowledge.

Ultimately, your choice will mostly depend on a specific project or use case. For example, if you contact us to get a quote, we might tell you we prefer Flutter for the job.

Choosing React Native for Cross-Platform Mobile App Development. Case Study.

We were considering React Native and Flutter for creating apps when we were tasked with creating a new app for our client, Enerace. While we did consider Flutter and React Native for the job, Google’s framework didn’t click for us. It felt clunky and awkward, even though it’s a great piece of code. We are already commonly using React in our projects, which made the decision even easier for us. As for the app itself, our task was to improve the visibility and control over energy contracts, streamline the decision-making, and improve the user experience (UX).

Improved visibility and control over energy contracts

The app now consolidates energy contracts for multiple clients, enabling users to track usage and costs across different entities. It also offers real-time price monitoring, displaying both simulated and market prices for energy purchases, enabling informed decisions and preventing overpaying. We also improved filtering capabilities, allowing users to easily find specific contracts based on year, type, status, and client.

Streamlined Decision-Making

Users can now directly approve or reject recommendations for purchasing energy tranches within the app. This eliminates the need for manual back-and-forth communication and saves time.

Improved UX

The app provides mobile access to all of the features and functionality of the desktop version, allowing users to manage their energy contracts from anywhere, which was previously impossible.

Overall, the new app provides the client with a more comprehensive and user-friendly tool for managing their energy contracts.

This is just one small part of our work for Enerace. Our React Native app is just a part of the overarching project focused on transitioning from a consulting business to a SaaS. For more information, feel free to read our full case study here.

Conclusion

React Native and Flutter each have unique benefits, and one isn’t better than the other. For us, it made more sense to commit to React Native, and that’s what we have done. For this, and all other apps we will default to using Meta’s framework, which doesn’t rule out Flutter, Ionic or Cordova.

We are happy we had an opportunity to add another app to the list of apps built with React Native, and in the future we can’t wait to push the tech a bit more.