React Native vs Flutter. What to Choose for Your Next Project
Though the mobile market is more stable and standardized than it used to be, new languages, frameworks, and libraries continue to emerge. React Native started a revolution in cross-platform development when it came out. Now Flutter is the new kid on the block. What is Flutter about, how is it different from React Native, and should you choose it for your next development project? Find out in this article.
Though having some restrictions, cross-platform development is a trend. Instead of creating two separate native apps with, say, Swift and Kotlin, you need only one framework and a bit of tweaking.
There are lots of cross-platform frameworks now: Xamarin, Ionic, PhoneGap… You name it. Add other methodologies like PWA, and it becomes clear that choosing a right cross platform technology is a challenge. Many developers choose React Native, as it’s popular and powered with Facebook: a huge company that invests in its technology.
Flutter is an emerging technology that you need to look out for now, as soon it might become the next Android.
Origins of Flutter and React Native
Flutter as we know it today is two years younger than React Native. It appeared in 2015 as Sky, but was later renamed and became famous specifically as Flutter. Flutter is based on a programming language called Dart. The framework was unveiled at the Dart Developer Summit and impressed the audience with its stateful hot reload feature. This feature allows developers to make changes in code and reflect them immediately in the running application without having to restart it or change the state.
Many companies are now enjoying the advantages of React Native. Facebook’s mobile app is written entirely in React
Flutter runs on C and C++, which allows developers to use platform-specific SDKs for Android and iOS. It’s been out of beta in December 2018, so a full-fledged development experience is already available for you.
React Native is an older framework that was released by Facebook in 2015. It uses the React library which is based on JavaScript, to create cross-platform applications. React Native is close to a web framework, using HTML, CSS, and JavaScript.
The best thing about React Native is that it speeds up development, and its architecture allows you to reuse components in different parts of your apps. Flutter has the similar logic though, so both Flutter and React Native are convenient and fast to develop on in this respect. Reusing components saves lots of time and allows you to adapt an application for both iOS and Android much faster than you could create two native apps.
Many companies are now enjoying the advantages of React Native. Some of the pages in Facebook’s mobile app are written in React. Other apps like Instagram and LinkedIn also use React as their core language.
React Native and Flutter are both pretty young frameworks that open new possibilities for cross-platform development. They’re very different, and both have their pros and cons. Let’s analyze these two frameworks and find out which is the best choice for developing a mobile project now.
Comparing React Native and Flutter
There are many differences between Flutter and React Native. To make our comparison between Flutter and React Native more structured, we’ll compare them according to several parameters:
- Support and community
- Core elements
- Working with native functionality
- Performance
- Adoption in the industry
- Life cycle management
- Code structure
- Companies behind the frameworks
Support and community
React Native appeared earlier than Flutter. This, of course, has its consequences.
One of the biggest benefits of React Native is much better support and a larger community. Flutter’s community is currently pretty small.
The community is what makes React Native grow so fast and become a better option for creating an MVP
Better support and community directly influences the number of available libraries, features, and additional tools. React Native is way ahead of Flutter in this respect at the moment.
Both React Native and Flutter are open source, and community is what influences the number of suggestions, new features and tools.
To compare the size of the communities around React Native and Flutter, we can look at GitHubs stars: React Native currently has 94,000 stars, while Flutter has 117,000. Just a year ago the numbers were very different, and React Native was a leader, but now Flutter is becoming more and more popular.
The number of Flutter components is growing fast, and there’s a reason: numbers show that Flutter’s community is more active. While Flutter has over 5k issues, React Native has only around 1.2k issues.
The number of companies that create components for Flutter is growing, and this is what makes Flutter grow so fast and become a better option for creating an MVP. You can use ready code elements in your own project and thus develop even faster. This is especially useful when you start a new project and want to test it in real market conditions.
Core elements
Though Flutter uses its own widget toolkit, its components are rendered natively. React Native uses native components that it creates with JavaScript.
Native components work great on the platform they were developed for, but they need tweaking for different screens. There are lots of mobile device manufacturers that produce models with different screen sizes, UIs, and layouts. To make native components work for each screen is a real challenge. It usually takes lots of time for both developers and QA engineers to make the same app work on different devices.
Both Flutter and React Native are convenient in this respect, as they use widgets. Each user interface component is a widget you need to create just once. It will adapt for each screen without any additional effort from developers.
Working with native functionality
Both React Native and Flutter are wrappers around the app, and they need to get access to native components.
Flutter uses a special communication method Platform Channels to connect Data to native languages, and it’s not that easy to use at times.
React Native, on the other hand, uses “Native Modules” to get to core device functionality. Sometimes it can be hard to get access to APIs, let alone integrate your own data exchange protocol into a third-party library. However, because React Native has more libraries, you don’t need to use these modules that often. It’s hard to change libraries, and using a library will often mean restrictions for your project.
Performance
If we consider react native vs flutter performance, Flutter is the winner here. Its performance is amazing. The standard for Flutter is 60 frames per second (fps), which is rather high. React Native doesn’t work as smoothly because it uses JavaScript Bridge to initialize screens.
Dart Analysis and Flutter Inspector help to analyze code written on Flutter and make sure it meets the performance standard of 60 fps
Flutter works through Android Studio, and recently two tabs have appeared in this IDE: Dart Analysis and Flutter Inspector. These tools help to analyze code written on Flutter and make sure it meets the performance standard of 60 fps. Android Studio also offers familiar tools for debugging and optimizing the code.
We at Mobindustry made an experiment and compared the performance of native languages like Kotlin and Swift, with Flutter and React Native. Flutter showed results close to native languages, while React Native was seriusly lagging: in some tests, React Native was 150x slower than Flutter. You can read more about the results here.
Adoption in the industry
Because it has wide support and a large community, React Native is also more widely adopted in the mobile development industry. Flutter hasn’t seen massive adoption yet. The reason is that it has too few libraries, additions, and out-of-the-box solutions.
Many things that already exist in React Native need to be written from scratch on Flutter. This of course makes Flutter more time-consuming and pricier. For example, there’s no possibility to add ARCore in Flutter. At least, I didn’t find any solution while researching this framework.
But even though Flutter has a lower adoption rate, there are already some popular apps that are based on Flutter. Google Ads and the Alibaba apps are the biggest examples.
Life cycle management
The life cycle of an application means the cycle of changes in its state. Usually, the life cycle is managed by the operating system.
Currently, there are no lifecycle management tools in Flutter that allow developers to see what happens at each stage of an application’s life cycle.
Code structure
The code structure of Flutter and React Native is very similar to the technologies they’re close to: native Android and JavaScript.
React Native is very similar to JavaScript, where you can separate styles and the executed code into different classes. It’s very convenient because you can create one stylesheet for all elements and make it work for every part of your app.
Native Android, which Flutter was inspired by, has a similar principle, but the styles are usually stored in a different place. In Flutter, you need to create a custom view that has its own styles.
In React Native, you can create a separate file for your styles or add them to the file with your code. In Flutter you can write styles right in the same class where the element is, but it’s not compulsory.
The companies behind the frameworks
The companies that created Flutter and React Native also make a big difference to everything from their future, support, and goals to their code structure and development environment.
Flutter was made by Google, just like Android, which is why developers can enjoy working with Android Studio. Android Studio is one of the biggest benefits of Flutter because it offers all necessary tools for the best development process, from emulators to code analysis tools.
Initializing an app written in Flutter is easy with Android Studio. React Native initializes an app with Expo, which is also a great toolchain. It took me only 20 minutes to get everything set up and launch both applications written in React Native and Flutter.
However, there are downsides to it too. Expo is difficult to use if you have any packages outside of Expo ecosystem. Also, its builds sometimes malfunction and it’s hard to determine why.
Flutter is easy to learn for a native mobile developer, while React Native will feel familiar to web developers who are used to working with JavaScript. Adapting applications written either with React Native or Flutter for other platforms is very easy: it takes three days at most to adapt a Flutter Android app for iOS, for example.
Google has long-term plans for Flutter. It will be the main framework for their new operating system, called Fuchsia OS. The goal of this operating system is to create a whole new development system that will make it easier for developers to create apps and adapt them for different screens and different devices.
Google is an expert at promoting new languages: Kotlin is a great example of that, as there are already lots of apps written with Kotlin and currently all examples in Google’s documentation are based on Kotlin. I believe that the same will happen for Flutter.
What about React Native?
React Native is a very popular technology that Facebook promotes and uses for their own apps. Facebook offers great support for React Native, however the documentation for Flutter is better.
Differences between Flutter and React Native
In this table, we’ve evaluated each aspect of these two frameworks using a five-point scale where 1 is poor and 5 is excellent.
| React Native | Flutter | |
| Documentation | 3 | 5 |
| Performance | 3 | 4 |
| Stability | 5 | 3 |
| Launch time | 4 | 4 |
| Industry adoption | 5 | 2 |
| Project configuration | 3 | 5 |
| Life cycle management | 5 | 3 |
| Hardware API | 3.5 | 5 |
Conclusion
Personally, as an Android developer, I find Flutter to be a great framework that’s so easy to understand and build apps with. I believe that with the growth of the community around it, Flutter will become more versatile and universal, offering lots of libraries and additions. This will make development way faster and more efficient.
However, if I needed to choose a framework to develop a project right now, I’d choose React Native. It’s more stable and advanced, and it has lots of tools and libraries that are great out-of-the-box solutions for most functionality a project might include.
At least for the next three to five months, I’d prefer React Native. Currently, all the amazing things about Flutter are held back by the lack of libraries.
That said, I believe that Flutter will be a great framework for future projects, and if you’re planning to create your own project, you might hire experienced Flutter developers. If you’re a developer, you should definitely start learning it and maybe even create your own unique solutions that will contribute to the community. The mobile market is ever-changing, and tomorrow Flutter may be the next Kotlin or an even more popular phenomenon.
Feb 26, 2021
6322 views 
