React Native vs. Flutter: A Developer’s Perspective

React Native uses ReactJS, a JavaScript library used for building interfaces to build cross-platform apps. JavaScript is a dynamically typed language that has a lot of freedom, which at times can be either a good thing or a bad one, depending on the use case. Given JavaScript’s popularity, it also helped endear the framework to developers. According to Stack Overflow’s 2020 developers survey, JavaScript has been the most commonly used programming language for 8 years in a row.

With this in mind, web development companies quickly adopted React Native building on their JavaScript experience, to create mobile apps as well. However, creating fully customised UIs in React Native is not out of the box. For more complex projects, native components need to be created and bridged in, to achieve the desired result, so having experience with Swift and Kotlin is a huge plus.

React Native also offers TypeScript support, so this is a good choice for developers coming from more structured languages.

With Flutter you have to use Dart, an object-oriented, class-based, garbage-collected programming language with a C-style syntax. Fortunately Dart resembles other OOP languages such as Java and C++ to a large degree. Thus if you are familiar with one of those, picking up Dart should not be a problem. More so, according to Stack Overflow, Dart is more loved by developers than JavaScript.

React Native compiles your JavaScript code into native code during runtime by using Facebook’s Flux architecture. Connecting the native modules with JavaScript code at runtime can make the app slower in certain cases. Altho this may be a detraction, the frameworks displays generally sufficient performance, despite the architecture.

React Native also uses states, whose management is one of the more problematic aspects of React Native and React in general, Redux is used to ensure a directed data flow in the app thus allowing proper state management. The framework also allows for users to write platform specific code that is then bridged to the React Native application. Given that fact, a native Android or iOS developer can just form their own customised components and just make a bridge for them in React Native, giving the developer a very large degree of freedom. Anything can be done natively in Swift / Kotlin and bridged into the app, removing any limitations the platform might have.

Flutter by comparison doesn’t require a bridge to connect the framework to the platforms native modules. The toolkit uses UI frameworks like Cupertino and Material Design together with the Skia C++ engine along with all the needed protocols and channels. This has the advantage that the developer doesn’t have to use multiple technologies for app development. For app development, the most popular architecture used by the Flutter community is BLoC (Business Logic Component), which was first unveiled at Google’s I/O Conference in 2019. BLoC architecture takes the business logic outside of the presentation layer of the application and instead splits it into components designed to handle it. Redux/Flux can also be used with Flutter, with the necessary packages installed.

React Native has an okay documentation, but it is more focused on experienced JavaScript and web developers. Some important features are poorly documented, for example navigation and building native libraries. React Native has a highly active and engaged community that contributes a lot. Being also an older framework than Flutter it has a far bigger community, so React Native is the clear winner in this category. Its large number of packages that are available make it a more mature and stable platform than Flutter, a simple search turning up dozens of online communities with repositories that contain a myriad of literature and compatible packages.

In comparison to React Native, Flutter has an incredibly thorough and rich documentation, especially for such a young framework. It contains very detailed guides and video tutorials, making it easier for people with a moderate or low experience in programming to pick up speed quickly. Flutter also offers several useful tools to assist in app development, including debugger and Flutter inspector.

React Native’s configuration process is simple. All one needs to done is to install the React Native CLI (or Expo CLI) globally trough the command line, but also remember that you also need NodeJS and Yarn as a package manager. Read about setting up React Native. There are multiple IDE’s that can be used with it, like Atom, Visual Studio Code, Vim Editor, Sublime Text and more.

For Flutter, you have to download the binary for a specific mobile platform first, then you need to add it to your PATH variable. Because of this, Flutter loses points to React Native since its installation process isn’t as straight forward. Read here about getting started with Flutter. IDEs that officially support Flutter are Visual Studio Code, Android Studio and IntelliJ Idea.

Applications made with React Native inherit the native styling and appearance, providing the user with a seamless experience in accordance with the OS. In case of operating system updates, the app elements will be updated respectively, thus maintain a feel of nativeness and similarity to other native applications.

This also means the application will look slightly different on Android and iOS devices, as well as on different firmware versions. This can be seen as a pro or a con depending on wether the app needs to have that native OS flavour to its design or it needs 100% the same look and feel across platforms. React Native allows for fully customisable native components to be made on the native side of the application and merely bridged to the React Native project, but extra effort is needed to achieve a fully custom UI.

In comparison, Flutter has UI widgets packaged within itself, meaning that creating native-like application can be done easily without the need for large third-party libraries and frameworks, having a large library of framework widgets is enough. Given its mostly consistent behaviour on both platforms, Flutter has an advantage when it comes to creating a fully custom UI.

With all that said and done, the decision React Native vs. Flutter can be made literally from the app requirements. If the app needs a fully custom UI, then Flutter is the easier choice. If the app must have a more native feel to the UI, then React Native is the choice.

Regarding performance, React Native has a big edge in comparison to older frameworks like Ionic or Cordova, but Flutter holds the upper hand here.

Applications built with React Native aren’t compiled in C,C++ or native language, instead the UI is formed out of components that are compiled into their native equivalents while the JavaScript code runs separately and communicates with the native components via a bridge. Because of this, it is unfortunately one step behind Flutter which runs more closely to the native applications.

Flutter has a different approach by compiling its apps using ARM C and C++ libraries which gives it an improved native performance. When using Flutter to build apps, the whole application that compiled not just the UI. Individual project needs must be considered to assess the impact of performance.

React Native has a vast community of devs that have created a myriad of libraries that can be used as building blocks to speed up development. It also has a high code reusability, given its idea that everything is a component. On top of that, React Native also has a hot reload feature that allows for modifications to be viewed in the app without the need of recompiling, which saves a lot of time.

Flutter also has a hot reload feature making it so one can go trough multiple iterations quickly and receive feedback immediately. As a plus Flutter also has a fast app compilation feature, which is really impressive.

Releasing mobile apps can be a painful process and when it comes to cross-platform apps, it surely is a complex undertaking to get every detail right. There are signing certificates, provisioning profiles, key stores and may other tools, files and factors to take into consideration.

On React Native deployment can be done manually in Xcode or using third party tools like fastlane (owned by Google). Read mode about shipping React Native apps with fastlane in this article.

Flutter enables the use of command line tools for deployment and has already documented the process with fastlane here.

Both CI and CD are essential for keeping an app up-to-date with ease, and also for allowing short feedback cycles and improving quality.

There are no official docs at this time on how to set up CI/CD for React Native yet there are services like App Center (Microsoft) or Nevercode which do the job for a small monthly fee (or even free of charge, depending on your need).

Flutter’s powerful CLI allows for an easy setup of CI/CD. Nevercode launched Codemagic, its CI/CD tool built exclusively for Flutter in 2018, and since then, it added support for React Native, too. Read more about how to get started with it in Codemagic’s blogpost.

Even though Flutter has an impressively rich CLI, for continuous integration and delivery in 2021 there are quite a few options to use for either one of the two.

Both frameworks are in the top 4 most wanted frameworks for software developers to master according to a Stackoverflow survey of 65.000 developers.

They are popular, they are modern and allow developers to do their jobs quicker and easier. JavaScript is the most commonly used programming language for the 8th year in a row, but interestingly Flutter is placed 3rd among the most loved non-web frameworks, React Native is only in the 10th place.

There is no specific roadmap for React Native for 2021. They share the vision and focus areas for contributing to the platform here: React Native roadmap.

For 2021 Flutter promises to work on new features and improve performance for iOS and Android platforms and fix at least 17000 issues, as they did in 2020. Also a big step forward is their plan to deliver production-quality support for Web, macOS, Windows and Linux in 2021. Read the Flutter roadmap here.

In conclusion both frameworks are incredibly useful and can help you build cross-platform applications faster and easier than the native approach.

React Native is a good choice given its large component library that helps speed up development. Because it renders native components for each platform React Native has an advantage when using these ready-made building blocks, when the app needs a bit of OS-specific look and feel.

For fully custom UIs, React Native offers the developer the ability to create customised components on the native side and merely bridging them, allowing freedom and power. The main tradeoff for this is performance and effort.

On the other hand Flutter does not have such freedom but has better performance and better documentation, however it loses points to the familiarity of JavaScript since it uses Dart. At the same time, it offers numerous customisable widgets that can be used for both iOS and Android. This removes the need for styling separate elements for your apps UI and is optimal for highly tailored design, that need to be consistent across platforms.

If you have experience with other programming languages and have a concrete project to start, take into account the specific app requirements, analyse the complexity and style of the design, app performance needs and actual components to be built.

If you have web development experience particularly with JavaScript then the decision is probably an easy one to go with React Native. If you are just starting to learn programming and know Java & OOP from school, then probably starting with Flutter is a better option.