If you wish to build a cross-platform native app today, there are a ton of frameworks and technologies to choose from. Two of the most popular ones include React Native and Flutter. Both have grown massively over the last few years. Backed by a strong open-source community and popular tech giants Facebook and Google, both have a promising future ahead.
In this roundup, we’ll compare React Native with Flutter on various factors. By the end of this post, you’ll be able to decide the right framework for you.
Programming Language
React Native uses JavaScript for development. JavaScript has been around for a long time and has a narrow learning curve. It’s also quite versatile. It’s used extensively across different domains like web applications and machine learning. Therefore, if you have any prior knowledge of JavaScript, it comes in handy when you’re coding your React Native application. Even if you don’t know it, you won’t have to spend a lot of time learning it. It also has a vast community and online resources to help you out if you’re stuck. You can also share code and libraries across different projects easily.
On the other hand, Flutter introduces a new language called Dart that has a steep learning curve. Its rising popularity is remarkable. However, it still has a young community and fewer learning resources than JavaScript.
Therefore, JavaScript’s popularity, simplicity, and versatility give React Native an edge over Flutter in this segment.
Development Philosophy
The next criterion is based on how developers build apps using both these tools. React Native, similar to React for the web, is quite minimal. This means that it provides some base components out of the box but leaves the rest to the community. Consequently, this also means that you’ll end up using a lot of external dependencies for your project. In case one or more of your dependencies is deprecated, you’ll have to find newer and well-supported alternatives.
Flutter, on the other hand, comes with loads of built-in plugins and widgets you can use out of the box. They’re more reliable in terms of future scope since the Flutter team itself maintains these packages. Additionally, you can also use community-built open-source packages in Flutter. Or even better, use a combination of both.
Since Flutter gives the best of both worlds, it wins over React Native in this aspect.
Architecture and Performance
How both frameworks work gives deep insights into their native performance. Under the hood, React Native uses two threads to operate. The first thread is the JavaScript thread. This is where your app’s underlying logic lives. The other thread is the main thread. This thread runs on the native platform, where you need to render native UI components or modules.
Both these threads operate in isolation. However, your JavaScript code needs to compile to native code at runtime. That’s where these threads require interaction with each other using a serial bridge or JavaScript bridge.
This bridge is also needed if you wish to access native modules of the device through your app. In this case, React Native will give you an abstracted way to do that using JavaScript. However, behind the scenes, the information exchange takes place through the serial bridge.
Flutter, on the other hand, doesn’t use native UI components. It has its own rendering engine built with C++ and Skia. Your Dart code on Flutter is compiled via this engine to create custom pixels on the screen. This allows it to render pixel-perfect code pertaining to both Android and iOS platforms. You can also use this architecture to create your own custom pixels that translate into UI elements on the screen.
Only in situations where it needs to interact with the device’s native modules does Flutter use a platform channels module that acts as a bridge. It normally doesn’t require a serial bridge for compiling Dart to native code. Hence, it renders better performance than React Native.
Developer Experience
Frameworks exist to make a developer’s life easier by doing the heavy lifting of all the complicated stuff. This ease of using a framework is measured by developer experience, or DX. A framework that offers a great DX allows developers to focus solely on the end-user experience of the app.
Initial Setup
To get started with React Native, you can simply generate a blank project by running the following:
You’ll need Node.js and npm (Node Package Manager) installed and set up on your system. The npx command downloads all the required packages and dependencies to generate a fresh React Native project on the fly.
Additionally, you can also begin your project with a template using the –template flag. Also, you can directly use Expo instead of React Native CLI for your React Native project. Expo offers an even more convenient and beginner-friendly way to start coding apps in React Native and deploying them to the relevant app stores.
With Flutter, you have to install the Flutter SDK first. Then, you can run the following command to generate a new Flutter project:
The above command runs faster than its React Native equivalent. This is because, with React Native, you download and install all the packages on the fly. On the other hand, you already have some initial dependencies configured when you installed the Flutter SDK.
Generating a new Flutter project is marginally faster. However, the initial setup for a React Native project is quite flexible, and the fact that it has Expo simplifies app development to another level. This puts React Native ahead of Flutter in this aspect.
Development Time Tools
With native app development, the most important tools at development time include emulators and physical devices. You need to see your code live at developing time and see how it appears and behaves on a real device before shipping it to your users.
Once you have an emulator running, you’ll have to run the adb command to connect to it.
Then, you’ll have to kickstart metro, the JavaScript bundler for your React Native application:
Metro watches for changes in the background and supports hot reloading for you to see your changes live as you code them.
Finally, you’ll need to run the following:
This will create your Android app bundle and install it on the emulator.
The same process is much easier with Flutter. Once you’ve configured the Android emulator, you can simply click the device button available in the VS code. All you then need to do is run the following command:
Now your project creates an Android bundle and also supports hot reloading in the same terminal.
When I first learned React Native, there were days when I couldn’t get beyond the point of running the project on a physical device. Brownie points to Flutter since it’s a lot easier in this respect.
Runtime Errors
We’ve seen earlier that JavaScript is friendlier to beginners. However, one thing it cannot do is prevent runtime errors in your code due to its weakly typed nature. This means that it sets no constraints on the variables you are using based on their data type.
For instance, if you assign a string to an integer in JavaScript, your code will run flawlessly. However, this logical error might lead to unwanted behavior in your application.
On the other hand, Dart makes it really hard to compile code that contains type errors and will not let this happen in the first place. It tells you beforehand that you’ve written some bad code with respect to the types you’ve used for your variables. This helps you prevent type errors early in your program.
You can achieve a similar result with React Native if you use TypeScript instead. However, Dart also offers features like null safety to make your code more robust. Clearly, Flutter stands tall in this segment.
Coding Pattern
React Native uses the underlying principles and coding patterns used by React Web. You break your app into components. These components can be either classes or simple functions that return your component’s UI.
To use dynamic data, you add a state to your components and share it across other components using props or data stores like Redux or Context API. You can also abstract away your codebase into utility functions, custom hooks, or higher-order components.
Flutter also follows a component-based architecture. However, it restricts you to only use classes for components. Each class has a build method that returns a tree of widgets. Each widget in itself is a class instance and could have a ton of other properties that take other widgets as arguments. This manifests your codebase into deeply nested widgets that are hard to follow. You can abstract these into custom widgets, but the process isn’t as intuitive as it is in React.
Building declarative UI and refactoring code is easier in React than Flutter. Hence, more points to React Native!
Overall, React Native offers a far better developer experience than Flutter.
Testing and Deployment
What good is your app if it doesn’t reach your users bug-free in time? Testing and deployment are a crucial part of native app development.
React Native doesn’t provide support for testing and CI/CD out of the box. You’ll have to hook up a third-party library for this. While there are some really great testing libraries out there, it could lead to chaos and decision fatigue for your team.
Flutter, on the other hand, comes with default support for widget testing. This is really helpful if you wish to quickly perform some unit tests to make your UI foolproof. Flutter also has dedicated documentation on how you can set up CI/CD for your app.
Thus, Flutter has an edge over React Native here. However, modern testing tools like Waldo allow you to create reliable automated tests without writing a single line of code. You can even run them directly in the browser, detect issues in your code, and compare them to other versions of your app.
Therefore, if you’re using something like Waldo for testing your apps, React Native’s disadvantages are nullified.
The Verdict
Let’s summarize the scores for each based on the criteria we discussed:
Flutter outperforms React Native due to better architecture. However, in most of the use cases, the performance difference is almost indistinguishable. All in all, React Native provides a better developer experience than Flutter, which eventually gives you a better time to market.
For me, React Native is the winner of this battle! What do you think?
Automated E2E tests for your mobile app
Get true E2E testing in minutes, not months.
