React native vs flutter

React Native was developed by Facebook and has been available open source since 2015. It is now an adult and stable tool. The beta version of Flutter was released in February 2018 by Google. Since then, the community has been growing, but still limited. That as an introduction, but what is really important when comparing React Native vs. flutter?

React Native and Flutter differ from each other in terms of programming language, the way in which native components are accessible, the documentation, the testing possibilities and the way in which the export to IOS & Android takes place. Let's take a closer look at those elements.

Are you still in doubt between hybrid or cross platform app development? Read our blog about native. vs. hybrid vs. cross platform app development.

programming language

React Native uses JavaScript, a widely used programming language. Furthermore, React Native, as the name suggests, uses the React framework. Because this is by far the most used web development framework, the step to React Native will be small for many developers. Furthermore, there are plenty of tutorials to be found and it is easy to reuse code.

Flutter, on the other hand, works with the Dart language introduced by Google in 2011. This relatively new programming language is hardly used. Object oriented concepts make the language easy to learn for developers who are familiar with Java, PHP or C#. However, as the complexity of the apps increases, it is necessary to learn more about Dart. In addition, Dart is supported by relatively few IDEs & text editors.

Community

React Native has a large community. Many developers have worked with it and many major players in the market use React Native, such as Instagram, Facebook and Skype. The community shares a lot of information with each other via GitHub and meetings. This large community has the advantage that you as an app owner can easily find a developer, and that you as a developer can easily find information. The framework is therefore fully battle-tested and you can find a solution for almost every bug on the internet.

Flutter's community has been growing for several years, but not yet very large to solve common problems. This means that it is more difficult to find developers with a lot of experience with this framework and it is also more difficult to find support in the community. There are, however, (online) meetups and other events. Another disadvantage of a small community is that there are relatively few extensions and plugins available. After all, developers of extensions and plug-ins are more likely to work with commonly used frameworks.

How do you get native components?

The core of React Native includes UI rendering and APIs. Those APIs allow React Native to reach native modules. Many of these modules are from third parties. This opens up many possibilities, but can also lead to instability. Fortunately, React Native has been available for quite some time, making most APIs stable. In addition, working with the native components means that the apps created with React Native conform to the standards of the different operating systems (iOS/Android).

Flutter is widget based. Instead of using native components, Flutter works with a canvas-based rendering engine. Each widget is equipped with a canvas on which the widget can draw itself. This is assembled into a scene which is then presented as a pixel matrix. In fact, the engine is a full Software Development Kit (SDK) with components of UI rendering, APIs, navigation, testing capabilities and many libraries. There are also widgets for Material Design. For example, Flutter already has everything it takes to get started with hybrid app development.

Documentation

For questions about React Native, you can often contact the community, for example via GitHub. Flutter has this less, but on the other hand, Google does offer extensive documentation, in the form of a getting-started-guide. There is also good documentation of go-live and CI/CD support.

Also useful is the CLI tool Flutter Doctor that guides you through the setup and the CI/CD system Code Magic† However, since 2019, React Native also has a Doctor Command which can help with trouble shooting and the automatic resolution of errors, among other things. Furthermore, extensive documentation is available for this framework.

Free Trial

React Native uses third-party tools and APIs for testing to enable this, while Flutter has built-in testing tools. JavaScript has few testing frameworks for units, so with React Native you will need third-party tools such as Appium or Detox.

Flutter, on the other hand, has built-in capabilities for testing units as well as widgets and integrations. Documentation is also available about the test options.

And how does it work?

After you have developed your app, it should of course be pushed to IOS and Android. React Native uses the JavaScript Bridge API for this. This 'maps' the JavaScript code to native code. The Bridge is called with a certain function and causes it to be forwarded to the corresponding functions on Android and iOS without a compilation step. This includes a short delay. As a hybrid app, Flutter does not need a Bridge. The app will therefore function a little faster.

React Native vs. flutter?

React Native quick start generally gets you up and running quickly and there is a large community to fall back on. This is useful both when you are looking for a new developer, and when you have questions as a developer. The framework is stable, for example in terms of APIs. It is mature and reliable and is used by many major players.

Flutter has advantages in documentation and the canvas rendering engine and testing capabilities, but that doesn't outweigh the disadvantages of using Dart and the small community. For now, there are still too many obstacles to make Flutter a good alternative to React Native.

Want to know more?

Social Brothers has a lot of expertise in the field of application development† Do you want to know more about app development or do you want to have an app built for your organization? Then take contact on. We are happy to help you.