React Native vs Flutter for app development

Imaginary Cloud
6 min readJul 23, 2020

--

When considering what to use for your next mobile application, you’ll have to do some research about which frameworks can provide you with the tools you’ll need. React Native is a top dog of the industry, while Flutter is a rising star. If you’re not sure which one to choose, this post will help you decide which one is best for your needs.

To learn more about both technologies, I’ve developed Dwipper: a social network app (similar to Twitter) that one can use to post shower-thoughts (Dwipps).

Hybrid vs Native

Full disclosure: you should only look for a hybrid framework when you want your application to work on iOS and Android. Otherwise, you are better off sticking to native development for performance improvement, debugging, testing, and a simple way to release your application. Hybrid development makes the process faster and, therefore, cheaper while increasing the potential number of users. Native development, however, offers better performance and improved data protection.

What is React Native?

React Native is an open-source mobile application framework created by Facebook, released in March of 2015. It’s used for both mobile and web applications, by enabling developers to use React and other native platform capabilities. Being built on top of ReactJS and Javascript, it’s likely that developers that are used to such languages may find a preference for React Native over other frameworks.

What is Flutter?

Flutter is an open-source UI software development kit created by Google, released in May of 2017. It’s used for both mobile, desktop and web applications, all from the same codebase. Based on the object-oriented programming language Dart, those with a preference for those types of paradigms may prefer Flutter.

While Flutter comes with its material design guidelines, one may be inclined to use it. However, there’s no inherent problem with not using it, as Flutter was created with a custom brand design in mind. It just happens to have some material design as a bonus.

Which one is more popular: React Native or Flutter?

To give you some insights on how popular both frameworks are, here’s a graphic displaying the number of questions on StackOverflow that React Native has compared to Flutter.

As we can see, Flutter rapidly gained traction, especially since 2018, in a way that since the end of 2019, StackOverflow has had more questions asked about Flutter than React Native. Flutter became slightly more popular as Google has been investing a lot of time into it.

Is React Native easy to learn?

Since it comes from JavaScript, it’s easier to learn and debug than other languages. It means you have a more straightforward approach to development. However, that ease comes at the cost of many errors people may find in their code, in runtime, because JavaScript is not a strict language. To avoid this, Facebook, React Native’s creator, suggests Flow, a type checker. It allows the inclusion of annotations on JavaScript to infer types and identify undesirable behavior, that is used to mitigate this issue by identifying problems as the code is being written.

Is Flutter easy to learn?

In a vacuum, Flutter is not as easy to learn as React Native. Nevertheless, a background in either Dart or any other Object-Oriented Language will make your life easier. Due to its increase in popularity, finding help online is quickly done and hardly any trouble.

How does React Native work?

React Native offers components equivalent to React’s web counterpart. Span in React is Text in React Native, which would be equivalent to UIView in iOS and TextView in Android.
Two threads are intrinsic to each React Native application:

  1. The main thread runs a standard native app, handling the display of elements and processing user gestures.
  2. The other executes all the JavaScript code in a separate engine, either JavaScriptCore or V8, which deals with the business logic of the application. It also defines the functionality and structure of the user interface.

These threads never communicate directly or block each other.

How does Flutter work?

The rough equivalent of iOS’s UIView and Android’s View, in Flutter, is a Widget, which is somewhat different from the counterparts mentioned above. For starters, they have a different lifespan: they are immutable and only exist until they need to be changed. When that happens, Flutter’s framework will create a new set of widget instances. In comparison, views in iOS and Android are drawn once and only redrawn when setNeedsDisplay() and invalidate, respectively, are called.
Having such a reactive framework allows the developer to brush aside the need to get references to the widgets, facilitating the structure for all backend, with a single language.

About the project: Dwipper

As part of my learning experience, I worked with both frameworks to develop an application called Dwipper, where users post their shower-thoughts as Dwipps.

The app had the following screens:

  • Basic login, registration and forgot password
  • All Dwipps, to see everyone’s Dwipps
  • My Dwipps, where you can see all Dwipps you posted
  • New Dwipp, to write and post a Dwipp
  • Change password, where the user can change their password
  • Logout, where the user can logout

To me, this was a great learning experience. Flutter felt more intuitive, like how you work with widgets felt simpler than components in React Native. The only real issue we initially had was communicating with the app’s backend. It wasn’t something directly related to the framework itself, only a matter of figuring out what and how to send.

React Native, on the other hand, was slightly more troublesome, perhaps because I had no prior experience with JavaScript. The most frustrating part was working out how to set up the navigation between the login part and the “real” part of the app. Having to install a new component each time we needed something for a specific task wasn’t very pleasant.

Comparing with other frameworks

Flutter vs Ionic

As Ionic was initially released all the way back in 2013, it lags behind Flutter slightly. If the developer isn’t sound in JavaScript, CSS and HTML5, the ramp up time for proficiency will cost time and money in learning the framework, while Flutter has a smoother learning experience. Being able to hot reload for quick experimentation allows for faster development as well.

React Native vs Ionic

When we talk about React native vs Ionic, we can say that Ionic has great documentation and its tools are well understood by web developers. But since it’s built on top of a browser, the code can’t easily access native features.

React Native, on the other hand, has a big community backing it up, which leads to more issues or problems being solved by other developers online. React Native is translated into native code, being able to reach 60 frames per second easily, as if it’s a native app. However, it is backed by a big company, meaning that any new tools will only be released according to said company’s needs.

React Native vs Flutter: which one is better?

At the end of the day, when asking yourself which one is the best, Flutter or React Native, it all comes down to personal preference.

Someone with more knowledge and experience in JavaScript or React will most likely prefer to use React Native, since the transition is rather smooth.
On the other hand, a developer who enjoys the Object-Oriented paradigm will most likely prefer to use Flutter.

In case you need to build a mobile app more complex than Dwipper, you might consider using Flutter since it’s slightly more popular than React Native right now. That popularity might be of use when bug-hunting your app. More people means a wider variety of issues, which increases the probability of finding someone with the same problem as you or having it solved by another community member who already encountered it.

Found this article useful? You might like these ones too!

Originally published at https://www.imaginarycloud.com on July 23, 2020.

--

--

Imaginary Cloud

Applying our own Product Design Process to bring great digital products to life | www.imaginarycloud.com