React Native Vs Flutter: Which One is Dominating in 2021?

Cross-platform apps have been the talk of the tech world ever since Ionic came in but it became more popular with the inclusion of React Native in its arsenal in 2015. It takes you back to the time of React Native when cross-platform frameworks were not dedicated to native app development. They were rather focused on just providing a WebView that had access to native API’s and your app runs on that WebView to give you the illusion that you are running a mobile app. The major problem with this approach is the loss of performance as you can’t utilize the full processing power of your device. In this blog, we will talk about React Native Vs Flutter – which one to choose? Their similarities, differences, code comparison and lot more.

React Native took a different approach with its existing React.js library that provided a solution to create UI using the Native UI blocks offered by its host operating system. The highly performant React.js library renders a compelling view on the device. All of your Javascript codes are injected in a Javascript Engine during the run time. It uses a layout engine YOGA to position the UI.

After going through the above overview, it seems pretty relevant to know why there is a need for a new framework like Flutter?

The performance of React Native is good, but it could have been a lot better as it has been realized by the Facebook team here. Flutter was released by Google in 2017and it is used as an open-source SDK for creating superior-quality apps for Android and iOS using a single codebase.

Like React Native, Flutter uses reactive-style views. However, while RN transpires to native widgets, Flutter compiles all the way to native code. Flutter controls each pixel on the screen, that avoids performance problems caused by the need for a JavaScript bridge.

Stackoverflow Trends

Github Stars

• React Native (79,963)
• Flutter (72,530)

Flutter shares a lot of similarities with React Native but there are some contrasting differences also. Let us go through the similarities first.

Similarities (React Native Vs Flutter)

1.  Native UI Experience

React Native uses basic UI blocks of each OS to create the Android / iOS UI, whereas Flutter has predefined Material and Cupertino ( iOS style ) widgets to create beautiful UI on both platforms.

2.  Declarative UI

React Native & Flutter both use declarative UI instead of using imperative UI. They both build the user interface to reflect the current state of your app. Here we define how our UI will look like for a different state meanwhile the framework continues to redraw the UI on any state changes. This will make UI code more readable and maintainable.

3.  Compositional Pattern

React Native & Flutter both allow reuse of components ( or Widgets, as they are called in Flutter ) that use composition i.e. the combination of different UI blocks to create the UI. Also, both share similarities in the type of components ( or Widgets ), i.e. stateful and stateless.

4.  Stateful Hot Reload

React Native & Flutter both allow faster application development using a Stateful Hot Reload, which enables users to quickly see changes in a matter of seconds while updating the codes.

This feature alone makes React Native & Flutter way ahead of native app development in terms of development time.

• React Native Hot Reload
• Flutter Hot Reload

Differences 

1.  Language

React Native uses JavaScript, which is an easy to learn language that allows existing web developers to use their JavaScript knowledge to develop mobile apps and that’s the primary reason behind the popularity of React Native.

Flutter uses Dart, a language similar to many modern object-oriented languages. Dart is a beautiful and powerful language which is the reason behind flutter’s high performance.

2.  Community Support

React Native has very large community support and is increasing day by day. Also with the usage of npm packages, it has a large number of packages that can be used while development.

Flutter, on the other hand, is trying to play catchup but its popularity is increasing rapidly.

3.  UI Development

React Native uses JSX that allows us to write HTML like UI syntax inside our Javascript code, what JSX does is allow users to create easy to maintain UI, and it also provides a separation between UI and Business Logic.

Flutter on the other hand by default uses no JSX ( or DSX which is being discussed in their Github issues ), it uses nesting of multiple widgets calls to create UI due to which large UI will look cluttered and for Javascript developers, it might look like an infamous ‘callback hell’.

Even if the proper widget composition is followed, we can create UI’s using fewer lines of code and avoiding cluttered code.

Though I feel if Flutter provides a two-way UI development paradigm using something similar to JSX, it will cause a lot of React Native devs using their existing knowledge to quickly start developing apps in Flutter.

4.  Code Comparison

A comparison without actually looking at the basic hello world in both the technologies will be incomplete. So, let’s take a look at the code of React Native and Flutter respectively:

// React Native

import React, { Component } from 'react';

import { StyleSheet, Text, View } from 'react-native';

export default class App extends Component {

  render() {

    return (

      <View style={styles.container}>

        <Text>Hello world!</Text>

      </View>

    );

  }

}


const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center'

  }

});


// Flutter

import 'package:flutter/material.dart';

void main() {

  runApp(

    Center(

      child: Text(

        'Hello, world!',

        textDirection: TextDirection.ltr,

      ),

    ),

  );

}

Conclusion

It is a no brainer that cross-platform app development will have an uphill ride in the upcoming years with both tech giants Facebook and Google as both of them are continuously improving their cross-platform tools. However, right now it is hard to pick a winner at this point, with an upcoming React Native Rewrite of its internal architecture to fix the performance issue in React Native.

Flutter has been exceptional so far, and this ongoing competition will be helpful in the app development field.

React Native is a more mature framework with a bigger community. This being said, while Flutter is still young, there is a lot of positive feedback coming from developers. Google seems set on pushing its framework, and it’s gaining popularity as a result. I would, however, suggest keeping an eye on both frameworks as they will be the future of mobile app development, reducing the use of Native Platform Specific code only for very special cases that result in reducing the time to market a mobile app.