What to use for mobile apps? – Flutter vs React Native
Konrad JaguszewskiReading Time: 6 minutes
Mobile apps are becoming more and more popular. Many companies want to have a piece of that pie. Instead of developing separate apps for Android and iOS - which is time-consuming - they are more often reaching for cross-platform frameworks - which allow building applications for both platforms from a single codebase. Google and Facebook released open-source tools to help with that - Flutter and React Native.
What are the benefits of using cross-platform frameworks?
Before cross-platform frameworks we had to build different applications for each system. Most of the times it required having developers who had knowledge of those systems or separate teams for each. Developing and maintaining multiple codebases was very expensive. By using cross-platform frameworks we can have only one codebase for Android and iOS (and sometimes even for web and desktop - more on that later in this blog post). It simplifies work and lowers the cost of the development and also helps to keep consistent UI across different platforms. But which framework is better? What should I choose for my project? I’ll try to answer those questions in this article.
Flutter - native mobile apps with Material Design
Flutter is a toolkit for building native applications for mobile, web and desktop. The first stable version was released in 2018 and has been rapidly gaining popularity since then. At the time of writing this article, only Flutter for mobile apps is production-ready. The tool for building applications for the web is in beta and desktop is in alpha. You can check our opinion about it in Technology Radar.
React Native - mobile apps with native look and feel
React Native is a framework released by Facebook in 2015. It’s used for developing native mobile apps for Android and iOS. Third-party libraries can be used to also build applications for web and desktop. It was also included in our Technology Radar.
Which framework is better for my project - Flutter or React Native?
Both frameworks are backed by huge companies and a large number of developers, they help build cross-platform applications, are open source and very similar. Deciding on using one platform or another may not be easy. Let’s jump into details - we have some important questions to answer!
What language do they use?
React Native uses the most popular programming language currently - JavaScript. It’s a big advantage, a lot of developers already know JavaScript. It works well with TypeScript, too.
On the other hand, Flutter uses language created by Google - Dart. It’s not as common as JavaScript, but the syntax is similar. From a new developer, it would require learning not only the framework but also the language it uses.
Which framework is more popular?
React Native is more adult than its younger competitor, Flutter. The repositories for both tools have a similar number of stars on GitHub (Flutter - 86.1k, React Native - 84.6k), but React Native has a significantly larger number of developers contributing to the project (more than 2k). Popularity is for sure in favor of React Native - there are a lot of resources to learn from, a lot of people eager to help and there is a high chance that someone already encountered problems you may face.
Flutter which was released in 2018 is gaining popularity pretty rapidly, though. In the last Stack Overflow’s annual Developer Survey, it was on the third place of the most loved frameworks (here). Flutter is trending right now and if it continues it can surpass React Native soon.
React Native is battle-tested and used in thousands of mobile apps - like Facebook, Instagram, Skype, Uber and many, many more. Flutter’s showcase is not as impressive - some of the most popular applications are Google Ads, Stadia, Reflectly and Alibaba.
Which is easier to install?
The installation of both frameworks is straightforward. The whole process of installation and setting up the development environment is described very well in the documentation for macOS, Windows, and Linux. If you are new to mobile development, React Native offers an easy way of starting by using Expo CLI which comes with some limitations - like bigger app size and lack of support for some APIs (you can read more about it here).
Which framework has better documentation?
Flutter’s documentation is more comprehensive than React Native’s. It contains tons of guides, samples, tutorials, hints, and solutions for common problems. Everything is divided nicely into easy to navigate categories. The API reference shows a lot of examples, instructions, and videos for some widgets, which makes it easier to understand.
Which framework provides smoother development experience?
For both tools developing applications on virtual and physical devices doesn’t cause any problems as they provide guides in their documentations. They both come with utilities helping developers with their work - like hot reload and CLI. CLI can generate, run and build a project. Hot reload saves a lot of time by showing the changes you make almost instantly on a device, without a need for recompiling the whole app. Both toolkits are supported in most of the major IDEs through plugins and additional tools.
Which has more features?
Flutter has a lot more features and components built-in and available out-of-the-box. This is great because you can be sure that everything is supported by the Flutter team and shouldn’t have any problems with them. On the other hand, the number of components in React Native is smaller and relies heavily on third-party libraries. While using popular packages is pretty safe, using others can come with some risks (like sudden abandonment by its developer, lack of support or security and compatibility issues). With React Native you will find yourself jumping a lot between the official and third-party documentations.
Which framework is faster?
Flutter’s Dart code is compiled to native machine code. React Native uses something called JavaScript bridge - the JavaScript code is compiled to native at runtime. In theory, Flutter should be faster. The problem is that there are not many performance tests made on more complex applications and a lot depends on a device itself. On some devices, Flutter is closer to the native performance, on others React Native.
What are available UI components?
React Native uses native components for UI rendering. It means that apps will look and feel more like native applications. Flutter takes a different approach - it uses the same UI on Android and iOS. This gives more control over the styling and ensures that on every device the app will look the same. Flutter also offers “Cupertino Widgets” to fit the iOS design, but it’s optional. React Native has fewer components than Flutter, so it will require using more third-party modules.
Which community is bigger - Flutter or React Native?
Community is a huge benefit of React Native. It’s very active and has 2 times more questions on Stack Overflow than Flutter. Thanks to that it’s possible that the problems you may encounter during the development were already encountered by other programmers. It also means that you will be able to find more libraries for React Native than for Flutter.
When it comes to packages Flutter has Pub and React Native has NPM (which is a registry of JavaScript packages in general).
How to test mobile apps?
Testing in Flutter works like a charm. The documentation offers good documentation about testing with recipes and examples for unit, widget, and integration testing. It’s different in React Native - for testing you will have to use external tools (Jest is included by default). Documentation for RN doesn’t say much about testing, but good thing is that you can use one of many JavaScript testing frameworks out there. There are also tools designed specifically for testing React Native apps.
Native mobile app built in which framework will be easier to deploy?
The size of an app tends to be slightly bigger for Flutter than React Native. React Native is more lightweight because it doesn’t have as many features as Flutter. They are still bigger than pure native mobile apps, but the developers from both teams are constantly working on improving it.
But what about deploying? Flutter’s documentation provides great step-by-step walkthroughs of releasing apps to the Apple App Store and Google Play Store. Besides, there is also a helpful guide for configuring automatic deployments. React Native comes up short here - the documentation only shows how to publish on the Google Play Store, but not on the App Store.
What to choose in 2020 for mobile apps development - Flutter or React Native?
React Native for sure is a mature and battle-tested framework. Great community and a big number of apps working in production prove that it’s a safe bet when it comes to developing mobile apps. Reliance on third-party libraries gives a freedom of choice, but can also increase development time and cause unexpected problems. The documentation is one of the weakest points when comparing to Flutter.
Flutter comes packed with a lot of features and components that are not available in React Native. Many times you will not even have to reach for external libraries. Its documentation is comprehensive and provides many guides and examples. The biggest problem of Flutter is its age. It doesn’t have as many companies using it as React Native and the community is not as big, but it has been gaining popularity quite rapidly since its release in 2018 (and current trends show that it’s not going to stop soon). I can see that in the future it may come close or even surpass React Native.
