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.
Table of contents
Hybrid vs Native
What is React Native?
What is Flutter?
Which one is more popular: React Native or Flutter?
Is React Native easy to learn?
Is Flutter easy to learn?
React Native vs Flutter: key differences
➤ User Interface Components
➤ Programming Language
➤ Documentation and Community
➤ CI/CD Support
About the project: Dwipper
Comparing with other frameworks
React Native vs Flutter: which one is better?
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).
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.
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.
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.
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:
- The main thread runs a standard native app, handling the display of elements and processing user gestures.
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.
UI Components are crucial when developing cross-platform mobile applications. Therefore, both frameworks must provide smooth and easy API access to native modules. In this regard, React Native has fewer components than Flutter.
On the one hand, React Native is very dependent on third-party libraries to obtain native modules. On the other hand, Flutter has UI widgets integrated; thus, the developer does not have to search for third-party libraries.
Flutter has a hot reload, meaning that the developer can directly inject new code into a running app, which can save tremendous amounts of time and speed the development process. Plus, to avoid losing anything during reload, hot reload also maintains the application’s state.
React Native was extremely aware of the success of this feature among developers and its 0.61 version was launched with a “fast refresh” feature that corresponds to the “hot reload”. “Fast refresh” further allows the developer to view changes made in the app without having to recompile it.
Another great advantage of using React Native is that it has a big community of developers who have contributed with many libraries. Those libraries can be utilized to build blocks and consequently speed up the development process.
Flutter has a very comprehensive and extensive documentation, providing developers with detailed guides and tutorials. Moreover, Flutter additionally includes the Flutter inspector and debugger to help developers throughout the app development.
React Native’s documentation is also very rich and provides many tutorials, libraries, UI frameworks, articles and other materials. Further, it benefits from having a large community and being part of the React family.
On the opposite , Flutter does not (yet) have such a massive community of developers, considering that it is still a fairly young framework. Nevertheless , it has achieved a very respectful size, counting on a lot of support from fellow developers, and it is increasingly becoming more popular.
On the one hand, React Native demands a third-party solution to automate delivery and deployment, which means it does not provide developers with a CI/CD solution for Google Play Delivery or App Store.
On the other hand, Flutter allows the developer to use the command-line interface (CLI) to build and deploy Android and iOS apps. Nonetheless, it may also require third-party solutions if advanced automatizations are needed.
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.
Flutter vs Ionic
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.
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.
In case you need to develop 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!