Let's compare React-native to Flutter in my opinion.
Disclaimer : This article is written with my own experience of these frameworks. Everyone can have another opinion.
Flutter VS React-native
In this article, I will talk about the two most famous cross-platform frameworks to make mobile applications. Their names? React-native and Flutter
What is React native?
React-native was released in January of 2015 by Facebook. It is an open-source JavaScript framework based on React. The repository of React-native has 86,5k stars on Github currently.
What is Flutter?
Flutter was released in May 2017 by Google. It is using its own language named dart created also by Google. The dart language has some similarties with Java and Javascript. The repository of Flutter has 91k stars on GitHub currently.
Configuration & Setup
Unlike React-native, to install Flutter you have to go through a compressed file and not through a package manager like APT, HomeBrew, npm, or another. Flutter’s documentation recommendation is to use Visual Studio Code. Why? Because a lot of plugins are available. You can add a module to launch/create a device, run the app, debug, and more.. everything can be done in VSC. It is straightforward to use , and has a smooth learning curve. The documentation is also exhaustive.
Here is some plugins I recommand :
- Flutter: This plugin is used to support and debugg Flutter in VSC.
- Dart : This plugin is used to support Dart language.
When I started with React-native, I found that the configuration was a bit more tricky and the documentation was not clear for new developers, especially on the Android version. Probably because I didn’t have access to the best tutorship available. During my first encounter with React-native, I ran through some compatibility issues especially on the JDK and Android Studio. After a long standing experience, going through the documentation over again made me realize that the process became way easier than before.
Let’s now talk about sizes. Once you init a new React-native project, the directory will weigh 373,4MB unlike Flutter with it’s 0.353MB taken. This is due to the bulkiness of the node_module folder that contain all the needed dependencies for React-native needs to run. Flutter doesn’t need it because it directly communicates with native functionalities.
You can add pub dependencies to your Fluttre project if you want to. Pub dependency work like a package manager.
But, from my standpoint the complexity is quite equivalent anyway. I managed to set up Flutter faster than React-native though. So my point goes to Flutter on this category.
Development
Flutter is working with widgets. You can create them in an either stateless or stateful form, depending on how you want your widgets to work. As for React-native, it works with functional and class components.
Also if you want to use some external packages, the React-native community has developed a tremendous amount of components to help you in your daily hustle. Unlike Flutter which is relatively newer and has fewer available packages.
Speaking of community, due of it’s maturity, React-native’s community is more important than Flutter’s one, there are lot of issues on StackOverflow or GitHub that are already solved. In 99,9% of the time, if you have an issue with something, you will undoubtedly find a ready solution.
React-native can be used with expo which allows you to use your phone to run your app very simply. Just install the expo application on your mobile device and you scan the QR code that the expo gives you, as plain and simple as that. Expo provides a hot reloading feature which is very useful and less time-consuming when developing. Flutter also provides a hot reload but you have to install Flutter or plugins mention earlier. I don’t recommend using expo when you start React-native but it’s good to know that this tool exists.
And last but not least, the exposure on web. When you hear Flutter or React-native, you don't think about web app. That's wrong. Both of them can expose their content as application. Flutter support directly web app directly in its CLI. Here is a quick guide on how to do it. For React-native you should use an external package.
I think React-native earns the point here. If you’re new to cross-platform development, you want to create a powerful app and you have some skills in Javascript, so React-native will give you everything you want on the development part and you will be able to understand how components work. If you have more experience in natives languages such as Java or swift maybe Flutter is a better choice.
Personal feeling and conclusion
Flutter and React-native are both very good. Even if React-native is older than Flutter, Google has created a very powerful hybrid framework that is too young to put a judgment on it.
My choice goes currently to React-native because I has more experience in this framework, the ecosystem is bigger, I’m not talented with Flutter and I usually develop in Javascript that’s why my point of view is a bit biased.
Also, I think if you want to make a beautiful stateless app, Flutter will do the job. And of course, if you’re not afraid of learning a new language. Flutter is a serious competitor to React-native.
Maybe in a few years when the community and the documentation will flourish, Flutter could become THE reference language for hybrid applications.
However, we developed our own boilerplate for React-native to help developers in the creation of the app architecture and best practices.
The boilerplate provides an easy hand architecture with minimum dependencies for maximum possibilities... All the architecture is based on a stric separation of concerns in order to improve performance, reusability and readability. You'll we able to build simple application or complexe one. The boilerplate use redux and redux saga for the store and react-navigation for the navigation. We also provide a good documentation for using fastlane for beta bulds