DEV Community

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

React Native vs Flutter — What to Choose in 2021?

OM on August 22, 2020

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...
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
 
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
 
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
 
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
 
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...

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
 
abdulghani200 profile image
Abdul Ghani

Nice comparison

Collapse
 
ombharatiya profile image
OM

Thanks Abdul

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
 
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.