DEV Community

Cover image for React Native vs Flutter — What to Choose in 2021?
OM
OM

Posted on

React Native vs Flutter — What to Choose in 2021?

In a post-COVID world, If you’re wondering to pick any one of React Native & Flutter to learn mobile application development which can help you land a job immediately, then, you came to the right place because here I’m going to finally answer that question for you.

I’ve worked on both of them and have quite a good experience to draw a line between these two very popular and most used technologies to build cross-platform mobile applications.

Cross-platform mobile apps have been a player in the last few years and are used by some very successful and prominent applications in the market. Also, it is the best choice for the employers right now when the market itself is so frugal after the COVID pandemic.

Yet before you start working on any of them you must know which one is beneficial for you at the moment since technologies are changing every day and so the market does.

I’ll compare them based on the following points:

1. Backed by whom?
2. Job Prospects
3. More Loved & Popular
4. Learning Curve
5. Performance
6. Adoption & Community
7. UI Components and Customisability
8. Who is using them?
9. Decisive Summary

So let’s start one by one.

Backed by whom?

Well, both of these frameworks are made and backed by the biggest tech giants Google and Facebook respectively.
Google made flutter. Facebook made React.

Both Winners.

Job Prospects

React Native was launched in 2015 and the React Library on which it works was launched in 2013, while Flutter launched lately in 2017. Which made React Native handy for developers and created a good market dominance already.

However, Flutter seems to be grown exceptionally in the last couple of years. Being the best competitor indeed, we can see its good future in the job market in the next couple of years.
The demand for React native over Flutter is quite visible in this survey report by Stackoverflow as well. Check here.

So, if you’re looking for a job in mobile app development then React Native would be a better choice. Post-COVID, the job market of React Native has increased and there’re more employers looking for React Native developers to develop and launch their products in the market in no time.

React Native is the undisputed Winner.

More Loved and Popular

It’s so obvious for a platform to gain popularity over time if it has been long in the industry and serves a good purpose. But gaining such popularity & love being new is rare. So, from the same survey by StackOverflow in 2019 Flutter wins being more loved than React Native.

Also if we check their GitHub repositories, Flutter got 98.9K Stars while RN is on 89.6K Stars even after staying longer than Flutter. So it’s a quite visible Flutter is something on people's minds.

Here the winner would be Flutter.

Learning Curve

JavaScript is one of the most popular languages in the developer community and is used for React Native mobile app development. So anyone who knows JavScript already can learn “React” and hence can transition to React Native in no time.

While if we compare with Flutter, it uses the programming language Dart. If you’re familiar with Java or C++ then learning Dart won’t be tough for you. However, it’s a new language and has a learning curve. So if you want to make apps in Flutter, you need to learn a whole new language that might seem not winning in this category.

So the winner is React Native.

Performance

When it comes to performance, Flutter has the upper hand as it’s compiled to ARM or x86 native libraries, which makes it considerably fast. React Native isn’t compiled to native code, and it still has the JavaScript layer, making it less performant than Flutter.

In the future when we start to create much more intense software for mobile apps, performance will be extremely big criteria when it comes to deciding between which framework you’re going to use so actually the winner of this category is most certainly Flutter.

Adoption and Community

When it comes to building big applications, the community is a must to check. Because you might require help from people working on the same platform when getting stuck with something. So the criteria are how active and vast community you get and how much available the support is.

React Native has a massive developer community and countless 3rd party libraries & UI components to help you make your work simple. Even you get high-quality tutorials for React Native in almost every tech channel that makes it very convenient to work with.

In terms of programming languages, at least till now, Dart isn’t as widely used as JavaScript and so Flutter has a less experienced and smaller community at the moment.

While it is quite predictable that Flutter is catching up with RN very fast, yet React Native is the Winner here.

UI Components and Customisability

Flutter has its own set of custom widgets, rendered and managed by the framework’s graphics engine. It is designed to support Material Design out of the box. It saves time. A developer using Flutter can create most of the views with pre-made widgets which are easily customizable and cross-platform consistent.

React Native provides only basic out of the box components which are adaptive to a platform, like a button, slider, or a loading indicator.

As said earlier, there are lots of 3rd party components available for React Native. A developer can use them in a project but that requires additional effort and time.

Flutter has to be the Winner here.

Who is using them?

React Native is being used by Facebook Ads Manager, Myntra, Instagram, Bloomberg, Airbnb, Discord, etc. while Google Ads & Alibaba uses Flutter for their mobile apps.

So, React Native seems to be accepted by bigger apps and have better endorsements.

The Winner in this category is React Native.

Summary

React Native looks more promising for you if:
✔ you have some prior experience working on JavaScript
✔ Look for some endorsements from people already using it
✔ Might very often require additional support from the community
✔ Need a job immediately

Go for Flutter if:
✔ Performance is a big deal for you even if you are diverting from Native app developments(Android/iOS)
✔ Want things already made on your table
✔ Ready to learn a new and beautiful language
✔ You need to quickly build an MVP for your app

I hope you got a broader idea of what to choose when starting a career in any of them or building a mobile application that can stay competitive for a longer time.

You can add more points why you will choose one over the other in a post COVID world ..

...

Thanks for reading this blog!

Add a ❤ if you liked the comparison. Leave a comment below if you have any questions/feedback. I'm gonna write more interesting blogs here, follow me for updates.

More About Author: Om Bharatiya

Happy Coding <3

Oldest comments (15)

Collapse
 
alexlion profile image
Alex Lion

Nice article !

You need to quickly build an MVP for your app

Isn't RN more suitable for a MVP if you already have a React webapp ?

Btw, I love Flutter for its efficiency. I hope to find more job than RN.

Collapse
 
codetricity profile image
Craig Oda • Edited

If you already have a React webapp, then you've already solved a lot of problems for your mobile app and thus should probably use React Native. However, if you're prototyping a new concept, then Flutter is nice. I agree with the author OM that Flutter is more suitable for MVP because of the hot reload, hot restart, and extensive set of Cupertino and Material widgets. For the frontend design aspects, Flutter is closer to painting or sketching than React, IMO. If you build your MVP with Material Design, then you can also use the Material tools for color (Material Color Tool and palette generator), icons (Material Design Icons), fonts (Google Fonts), and paper analogies. It's nice.

In an MVP, you'll need to get people to use your app and the design of your app (the artistic as well as usability) is really going to impact usage. Also, it's likely that your boss or other stakeholders need to review the MVP and they are only spending a limited time reviewing your work and authorization resources or budget for it to continue. You need to have a good design theme, layout, fonts, color, and movement between screens, as well as screen organization all set up from the first demo to your stakeholders or you may create the wrong first impression. Well, this is my opinion.

Also, for me, I really benefit from the type system of dart in Flutter as it helps me avoid foolish errors. These simple problems of using a string instead of a number can really slow down an MVP in critical times. After a few days, you suddenly see, "oh man, I put quotes around the number..." I'm sure that this has happened to all of us. :-( it's less likely to happen with dart than with javascript.

Collapse
 
ombharatiya profile image
OM

Thanks Craig, I might not have explained this point better than you.

Well, if you compare the type system, then you can use TypeScript as the language in RN applications to avoid any last moment errors or hour long debugging of any such issues.

I think I have written a lot already about what's my opinion over it, and even if Dart is far better when it comes about it's performance and other points, yet I don't think I would be able to align all my team members to choose Flutter for any big app that we are designing. Dart isn't that mature yet to be taken on confidence. What's your opinion over this?

Thread Thread
 
codetricity profile image
Craig Oda

Thanks for the note about TypeScript. In our usage, I don't think we could align wider groups behind TypeScript instead of JavaScript, simply because everyone knows JavaScript and everyone is busy (or feels they are busy) and are resistant to moving off of standard JS. :-)

The reality of our situation is that we're showing proof-of-concept and MVP with Flutter. For production, people we interact with are using native iOS and Android. This usually means Objective C and Java, not Swift or Kotlin. The reason for the use of older technology is primarily one of skillset. There's usually something that's already built, likely several years ago that new functionality needs to plug into.

Because of that, the prototyping team I work with uses Flutter/Dart to show a specific technique or group of techniques. Then, the techniques are sometimes implemented on native iOS or Android by other groups.

At the moment, we're not trying to get other groups to use Flutter. We're just building in Flutter ourselves and sharing the algorithm or technique with other groups. At the moment, I suspect that among the groups we interact with, no one is deploying with Flutter. This is fine as we're responsible for prototyping and feature showcasing, not for the actual production apps.

For our purposes, Flutter works out fine.

We initially started off with React, but the integration of Flutter with Material Design and the tools made it easier for us to develop consistent themes and widgets. For our purposes, the look and performance of the mobile apps is important.

Collapse
 
tsusubk profile image
tsusubk

Good write up. I'm mostly tired with biased articles on the Internet. But this is one of the reasonable comparison.

I've been recently building an app in both React Native and Flutter to see which one I prefer more. But there are really pros and cons on each framework and also personal preference of the developer really counts.

I feel that Flutter results in cleaner code than that written in RN and the app seems to be more reactive. But from customization point of view, I feel Flutter is harder to do, and if you don't want Material Design you will need some more work. Some Widgets are somehow limited to customize like ReorderableListView (maybe because of my limited knowledge).

I really want to use Flutter, but one critical part recently found is about the basic widgets like Flutter TextField on iOS (also TextFormField, CupertinoTextField). It behaves like an Android app that can potentially be confusing users like me the first time interacting with my Flutter app on iOS (current behavior: double-tap to display tooltips, long-press before able to drag | expect: single-tap, ready to drag). Really make me concern about integration on iOS with a question like: what else I still don't discover yet?

By the way, Flutter looks good in the long run. Love to see RN improves in a faster pace than how it is as well.

Collapse
 
ombharatiya profile image
OM

Thanks for your valuable comments mate! I very much agree to your point and me myself won't recommend Flutter to develop apps that might require more customization if don't want material ui design.

Also, as far as the gestures are concerned, React v16 have added React Fiber, a kind of reconciliation engine that helps increasing its suitability for areas like animation, layout, gestures, ability to pause, abort, or reuse work and assign priority to different types of updates; and new concurrency primitives. Highly recommended if want the native app feeling.

Collapse
 
codetricity profile image
Craig Oda

You're correct in identifying a current weakness of Flutter with iOS. Suggest you search online for other "undiscovered" problems that you're wondering about. There are likely more problems, some may be showstoppers. Flutter might be good for enterprise or business apps where you can control the hardware and the hardware is a specific Android model such as a Google Pixel. I wrote on another comment on this article that we're only using Flutter for prototyping and demonstrations, primarily on Android. Though, it does work on iOS and we do show it on iOS.

Flutter Web and Flutter Desktop are at the proof-of-concept stage at the moment. React is quite a bit ahead in those areas at the moment.

Collapse
 
abdulghani200 profile image
Abdul Ghani

Nice comparison

Collapse
 
ombharatiya profile image
OM

Thanks Abdul

Collapse
 
sohanr profile image
MD. Mizanur Rahman

great comparison article <3
btw as a web developer or Javascript background, i will always choose React Native.
I am not gonna learn onether new language.

Collapse
 
yselim profile image
yselim

I wrote a small app with flutter, then found a RN job and wrote RN and React codes for 8 months. What I miss about flutter is:
1) writing and debugging dart code is far more fun then javascript (especially debugging with breakpoints)
2) build/run for first time is easier
3) hot relaod is more accurate then RN
4) creating error is less likely because of android studio and errors are more understandable for me

What I like about RN is
1) vs code eating much less ram/processor (I didnt try develop flutter app on vs code, may be it is more fun, dont know)
2) npm has lots of js packages according to dart packages
3) you develop both RN and react web skills at the same time. (This is great untill flutter web will be mature.)

Collapse
 
un_kka profile image
Kir Kaun • Edited

VS Code can be successfully used for Flutter development and (IMO) it leaves way more joyful, lightweight-ish feeling than Android Studio or XCode in terms of mobile development.

Collapse
 
srthkv profile image
Sarthak Verma

I think I would certainly go for React Native, as I have a good grasp of JavaScript and currently learning React.

Collapse
 
103221 profile image
103221

Thank you for your comparison, it is thorough indeed! It seems difficult to choose "one best framework", so I'd like to ask, what is a go-to for you? Which one have your company finally chosen and why? Cause both according to your article and the one I've seen before (for reference surf.dev/flutter-vs-react-native-c..., if that is of any use for you), that requires a very clear understanding what you need, how you're gonna achieve it, and what is the trade-off you are ready to accept.

Collapse
 
pablonax profile image
Pablo Discobar

The main difference is performance. Applications developed on Flutter are much faster than using React Native. Unlike React Native, which works with bridges and JavaScript, Flutter allows you to solve application tasks faster, especially those related to the user interface. And in Flutter, the app is faster to launch. But the main disadvantage of Flutter is that it is a young platform and it has few ready-made solutions. Good templates are hard to find, but in my article there is a selection where I compare free and paid templates - dev.to/pablonax/free-vs-paid-flutt...