Cross-platform mobile frameworks have become immensely popular in recent years, offering a way to speed up mobile development by eliminating the need for separate iOS and Android code bases.
Two cross-platform frameworks currently dominating the industry are React Native and Flutter. React Native, a JavaScript framework, was developed by Facebook (now Meta) and open-sourced in 2015. In contrast, Flutter is a more recent Dart framework released by Google in 2017.
So, which framework is better for your next mobile project? I’ll be comparing both Flutter and React Native in the following areas: the learning curve required, their performance, and the development experience.
The Learning Curve
Overall, Dart is considered a simpler language than JavaScript and has a similar syntactic structure to Kotlin and Swift, which are used for native iOS/Android development. However, React Native can also be used with TypeScript, which provides a similar syntactic structure as well.
The official documentation for Flutter is very extensive, containing detailed descriptions of each built-in widget, as well as a range of tutorials for developers that are already familiar with certain tools.
Screenshot of Flutter documentation
In contrast, React Native is easier to grasp for those who have worked with JavaScript before, particularly with the immensely popular React web framework. As someone who used React prior to learning React Native, I estimate that about 70% of what I knew was directly transferable to React Native, including JSX syntax and core concepts such as state management and props.
Performance
The Dart language is known to have a faster compile and run time than JavaScript, and in the past, some features such as lists or animations have been slower in React Native apps. However, numerous libraries such as react-native-reanimated, react-native-skia, and react-native-flashlist have significantly reduced this disparity.
The primary difference between the rendering of React Native and Flutter apps is that Flutter uses the Impeller graphics engine, while React Native wraps native iOS and Android functionality in JavaScript functions. Flutter previously used the Skia graphics engine, but this resulted in janky animations due to excessive compilation of shaders - programs that calculate appropriate levels of light, darkness, and colour when rendering graphics. To resolve this issue, Flutter has recently switched to the Impeller graphics engine, which is still in its experimental phase. In contrast, as React Native makes use of the existing Native foundation used by iOS and Android devices, it has better stability.
Flutter tends to compile to larger file sizes than React Native does, which may result in larger or more complex Flutter apps taking up more storage space and having longer download times. Additionally, Flutter has limited support for older device versions, only providing support for iOS 11 or later and Android 4.1 or later. This makes it a less ideal choice for developers who need to target a wider range of devices.
The Development Experience
Developing with cross-platform frameworks is a fast-paced process, and both Flutter and React Native offer fast-reload features that allow developers to see their changes within an instant.
Flutter offers built-in debugging and integration testing services, greatly enhancing its developer experience. As well, Flutter features a variety of built-in widgets that are highly customizable, resulting in pixel-perfect UI layouts. In contrast, React Native relies more heavily on third-party libraries in order to achieve the same level of customization. While many popular libraries are well-maintained by companies like Shopify, Software Mansion, and Expo, some smaller libraries may not receive the same level of maintenance.
Overall, I find React Native to have better community support. Since React Native has been around for a long time, many more packages are available, and any issue you may run into has probably already been addressed somewhere on GitHub or StackOverflow. This is not always the case with Flutter, and I experienced this on a previous project while trying to implement a more complex screen transition.
Finally, React Native services include CodePush, allowing developers to deploy app updates directly to its users rather than having to constantly require approval from app stores.
Final Thoughts
Overall, I believe that the best framework to use is the one that best fits your development background and your needs.
In short, Flutter may be a better choice if you:
•
Have experience in native iOS and Android development.
•
Require more extensive styling.
•
Work best by heavily consulting documentation.
Likewise, React Native may be a better choice if you:
•
Have experience using JavaScript, particularly React.js.
•
Want to create a larger, more functionally complex app.
•
Plan to update your app frequently.
•
Need to target a wide range of device OS versions, including old versions.
I’m excited to see how both frameworks will evolve in coming years, and whether one will eventually become the clear winner. Special thanks to Dan Friyia, Senior Software Engineer at Shopify for providing many valuable insights.
