Flutter vs React Native - how to choose the right one for your project
There are two big players when it comes to cross-platform app development - React Native and Flutter.
So how to compare React Native vs Flutter? What are the key differences and pros and cons of each?
At MobiLoud we're deep into mobile app tech, having developed thousands of iOS and Android apps on our own platform. We have experience with both React Native and Flutter, and have some opinions on the merits and drawbacks of each.
In this article we're going to break down all you need to know, by the end you'll have a strong foundational knowledge and be able to make an informed decision.
What is a cross-platform framework
Technology choices are all important when it comes to app development.
One of the most important choices is whether to build the apps natively, with a cross-platform framework, or with a hyper-efficient route like MobiLoud.
Native Development - powerful, but expensive
Back in the early days of apps and smartphones native development was the only game in town. This means developing apps separately, for both iOS and Android, using the native technologies of each, which today are:
- iOS - Swift (or Objective C) as a programming language, Xcode and Simulator for development and testing environments
- Android - Kotlin or Java for programming, Android Studio and SDK
Native development can (theoretically) result in the highest performance and widest range of cutting edge features - but this comes at a cost.
You have two completely separate codebases to develop, update, maintain and refactor. This means you need teams of separate specialists - developers, designers, pms - and significant technical and managerial investment into each.
That's why native apps today typically cost hundreds of thousands of dollars, take 6+ months to build, and cost tens of thousands (at least) annually to maintain.
Cross-platform to the rescue
Cross-platform frameworks were designed to make the process more efficient, by developing apps for both iOS and Android through one single codebase.
Cross-platform tech has been adopted rapidly in recent years, thanks to its ability to cut down costs and time to market by up to 50%.
React Native vs Flutter: the basics
The two leaders in the cross-platform world are Flutter and React Native.
According to Statista, the two account for 78% of the market, with Flutter at number one followed closely by React Native.
Both have origin stories in the dark laboratories of big tech.
React Native was introduced by Meta (then Facebook) in 2015. It allows developers to build iOS and Android apps using JavaScript and React, the enormously popular front-end web framework also developed and maintained by Meta.
This gave web developers new powers, since they could upskill and adapt their existing web skillset into app development far more quickly than before.
React Native apps run on a real mobile UI. The JavaScript and React code is “bridged” to native components, which can result in a smooth and native-like UX. It has a large community and ecosystem, and has been used for countless successful apps.
Flutter is a newer framework launched by Google in 2017.
Unlike React Native which relied on existing web languages, Flutter uses the Dart programming language and relies heavily on widgets.
Flutter is known for its “hot reload” feature, compiling to native code, and “drawing” onto the user’s screen to create the UI.
Though newer, Flutter has been adopted impressively, and now has a rapidly growing ecosystem and community.
We will explain this all in more detail next. Firstly let's cover React Native in more detail.
How React Native Works
React Native was designed to bridge the gap between the performance of native apps and the speed and efficiency of web app development.
When it launched in 2015, it caused shockwaves. For the first time you could use JavaScript to write mobile apps that run on both iOS and Android platforms - from a single codebase.
It quickly gained traction, leading to widespread adoption.
Over the years it has evolved significantly.
Notable updates have included the introduction of "Fast Refresh," improving the developer experience with faster feedback loops, and the gradual transition towards a more modular architecture.
Core Principles
To understand React Native, let's examine its core principles.
JavaScript and React Ecosystem
At the heart of React Native lies the powerful synergy between JavaScript and the React framework.
JavaScript is one of the most popular programming languages and the language of the web. It has a vast ecosystem of libraries and features.
React is one of the most popular front-end frameworks for creating interactive UIs, loved by tech companies and startups the world over.
React Native uses the same foundational design as React, but extends it, allowing developers to compose a rich mobile UI from declarative components using JavaScript. Instead of targeting web browsers, React Native targets mobile platforms.
So React Native allows teams to apply their React and JavaScript knowledge to mobile app development, bridging the gap between web and mobile ecosystems and allowing for a more unified development experience.
Native Rendering
To explain this let’s summarize the essence of React itself.
React’s core architecture is based on components - a reusable piece of UI in the form of a JavaScript class or function. These components are often pre-made, available in various libraries and frameworks for you to use. These components can range from simple UI elements like buttons and forms to complex functionalities like data grids and charts
Components are rendered when your code “interfaces” with the browser through an intermediary layer called the virtual DOM.
React Native extends and adapts this with native rendering.
With React Native, you can make use of both (some) React components along with React Native specific ones - core and community.
When you write a React Native component, it uses a bridge to translate the JavaScript into an equivalent native component.
Bridging is an essential part of React Native’s mechanism. It is essentially a communication layer which allows JavaScript code, running in the React Native environment, to communicate with the native APIs of iOS and Android. It essentially sends over a call to the native side, which is interpreted and performs the necessary actions.
Think of it like a kind of “code translator” from JavaScript into native app language.
React Native components in this way are rendered through Objective-C (for iOS) or Java (for Android) APIs.
This is well illustrated in this graphic from Discover SDK:
Because it really uses the same components as native apps, it results in a user experience and performance that some say is just as good as apps built directly with native SDKs.
How Widely Used is React Native?
Hundreds of thousands of mobile apps are built with React Native
It has been adopted by thousands of businesses around the world - from side projects to startups and Fortune 500 companies.
Giants like Instagram, Tesla, and Bloomberg have leveraged React Native to create fantastic and functional apps.
Through all this action, React Native continues to evolve, with Meta and the open-source community regularly rolling out updates.
Overall, we’ve looked at React Native in detail, and seen how it's a mature and powerful technology. Now let’s move on to its main rival - Flutter - and see how the two stack up.
How Flutter Works
Developed and released by Google in 2017, Flutter is even more popular than React Native, and is quite radically different in design.
Let’s look at its core principles.
Dart Programming Language
Flutter uses Dart, a programming language also developed by Google and originally intended as a replacement for JavaScript.
That didn’t quite happen, but Dart did find its place as the language of the Flutter ecosystem.
Dart is object oriented, class defined, and has a C style syntax. It supports two kinds of compilation - just in time (JIT) and ahead of time (AOT).
JIT allows the code to be compiled in real time, piece by piece. This allows developers to test and preview changes instantly, and enables Flutter’s hot reload feature - loved by many developers.
AOT is the “real” compilation, when Dart compiles the entire codebase into native machine code for iOS and Android, so the apps can run directly on the device's CPU.
Dart has a rich standard library and set of modules that can be used to build practically any app. It’s a modern and powerful programming language that you can use to build awesome apps for both iOS and Android.
Everything is a Widget
A foundational part of Flutter apps are “widgets”, the fundamental UI components which Flutter combines in the UI to create complex layouts and features.
Widgets to Flutter are what components are to React Native. In Flutter apps, everything is a widget, from simple text labels to buttons and sliders and even the entire screen layout itself.
There are 15 categories of widget in total. By combining these widgets in a widget tree - you can create apps of virtually any functionality or complexity.
Rendering
Whereas React Native renders native components, Flutter renders the widgets by “painting” them onto the canvas of the device at 60 fps or more.
For this, Flutter entirely relies on Skia, an open source 2d graphics engine used in many Google projects.
This performance is critical for creating seamless, responsive applications.
How widely used is Flutter?
Flutter is used in over one million apps, running on many hundreds of millions of devices.
It has been adopted by countless companies of all sizes, from startups to global megacorps. Some notable examples are Google Ads, Alibaba, and the Hamilton Musical apps.
Flutter continues to evolve, with Google regularly releasing updates and improving its capabilities. Flutter now can even be used to develop web and desktop applications, again from the one single codebase!
We wrote a more detailed breakdown of Flutter Here, for now let’s start comparing the two frameworks more directly.
Flutter vs React Native: Technical Comparison
Now we’ve introduced both frameworks, let’s directly compare them on several technical points including performance, dev tools, UI components and community support.
Programming Languages
Flutter uses Dart, an object-oriented programming language from Google. Dart's focus on front-end development makes it suitable for UI creation, offering great performance and flexibility. The Dart ecosystem is growing, supported by many libraries and packages from Google.
React Native uses JavaScript, a widely-used language with a massive ecosystem. This gives React Native a strategic advantage, allowing developers to leverage an extensive range of libraries and frameworks. JavaScript’s huge popularity also means a larger pool of potential developers is available, which could make hiring and collaboration a little easier.
Performance and Architecture
Flutter's performance edges ahead slightly due to its direct compilation into native code, which reduces the need for a bridge, allowing for smoother animations and transitions. Its layered architecture allows for more customizable designs.
React Native, as we mentioned, relies on the JavaScript bridge to communicate with native elements. This can introduce performance bottlenecks, especially in complex animations. This has been improved significantly though with the Hermes engine and architecture upgrades like the new Fabric renderer.
Development Tools and Experience
Flutter’s "hot reload" feature allows changes in code to be immediately visible without restarting the app. This is great for developer productivity. It is also very well-integrated with Visual Studio Code, Android Studio, and IntelliJ IDEA.
React Native also supports hot reloading and offers a live reloading feature, though some developers say it isn’t as good as Flutter’s. It is compatible with popular IDEs and has a vast array of third-party tools that augment its development environment, catering to a wide range of developer preferences.
UI Components and Design Philosophy
Flutter's "everything is a widget" philosophy gives developers a lot of flexibility. It comes packed with a wide set of customizable widgets that closely mimic native components. This prioritizes consistency across platforms but allows for platform-specific adjustments.
In React Native, the UI is built using React and JavaScript, offering a component-based structure. This setup supports the development of reactive UIs that automatically update in response to data changes. React Native provides a core set of components; however, for more complex UIs, reliance on third-party libraries is common.
Community Support and Resources
Flutter’s community, while younger, has grown rapidly. It has extensive documentation, forums, and a large range of learning resources suitable for developers of all skill levels.
React Native benefits from the support of Facebook and a vast, vibrant developer community. Comprehensive documentation, vast resources, and a large selection of third-party libraries are available. This makes it easier for new developers to start and experienced ones to solve complex issues.
As we’ve seen here, on a technical level, both frameworks are powerful and capable of creating great apps. Your choice will come down to which one makes the most sense for your specific situation.
You can read more about Flutter in this article, otherwise let's move on to the comparison.
Flutter vs other platforms
We compared Flutter with several other app development options as part of this series.
- Flutter vs Kotlin
- Flutter vs Swift
- Flutter vs Ionic
- Flutter vs PWAs
- Flutter vs Xamarin
- Flutter vs native development
- Flutter vs Expo
You can take a read of them to learn about how Flutter stacks up against other options too. For now though, let’s wrap up the comparison with React Native.
React Native vs Flutter - the pros and cons
Now we’ve given a good overview of both frameworks, and compared how they work on a technical level.
Both allow you to build great iOS and Android apps from a single codebase, but there are crucial differences as well as relative drawbacks and advantages of each.
Why React Native > Flutter
Here are some reasons why you might go for React Native over Flutter.
- Familiarity: because React Native leverages JavaScript and one of its most popular frameworks, most web teams will already know the core concepts inside out
- Code reuse: if your existing tech stack is based on JavaScript (and especially React), it could be easier to reuse code in the apps
React Native also has a great community and a mature ecosystem. So does Flutter of course, but React Native might have the edge here.
Why Flutter > React Native
Why has Flutter become the most popular cross-platform framework? Here are two important reasons:
- Performance: because React Native “bridges” JavaScript code with native components, which can be inefficient. Flutter directly compiles to native code, reducing performance bugs and making animations and transitions smoother.
- Speed: this is subjective, but many believe that Flutter apps are faster to develop due to a superior developer experience and hot reload, along with some of the inherent drawbacks of React Native
Expo
It's important to note that these days, over 50% of React Native apps are build with Expo, a framework that enhances and streamlines the development process.
It can somewhat change the comparison - and we wrote about it in Flutter vs Expo.
For now though, let's wrap up.
How to decide between React Native and Flutter
There is a lot to take in, and a lot of different factors to consider. We can’t give a blank recommendation because every app project is different.
For example, React Native could be a great choice for you if you already have skilled web developers on hand or a React-centric codebase. In this case both can be adapted and leveraged in your app project.
JavaScript skills are also much more common than Dart and Flutter, so it can be easier to both hire and upskill your existing team members to contribute to the project.
On the other hand, if you value performance over all and need a rich, unique UI - Flutter is likely your best bet. A great Flutter developer will be able to build you excellent apps - for a price.
But, if you already have a website or web app - MobiLoud is much better than either.
The better solution: convert your existing site to apps with MobiLoud
An alternative to both is MobiLoud.
Though React Native and Flutter are more efficient and cost-effective than native development, developing cross-platform apps is still a lot of work.
Building high-end apps with React Native or Flutter will likely cost $100k+ and take months. Even though you’ve only got the one codebase, it will still take a lot of time, skill and investment to manage it.
Together, this is costly and risky.
With MobiLoud, there’s no risk.
You can get cross-platform apps, just as good as you’d get with React Native or Flutter - in just weeks and for <10% of the cost.
This is possible because we use our custom platform - used for 2000+ apps - to convert your existing website into iOS and Android apps.
Both Flutter and React Native have the same flaw as native development - they require you to essentially start from scratch. MobiLoud lets you use what you already built for the web.
With MobiLoud you can reuse everything from your site, all your features, functionality and design will be recreated in the apps - with all the native elements added for a great UX.
For ecommerce brands, web apps, online communities, and content sites - it is much more efficient and a better choice than any cross-platform frameworks.
That’s because everything is done for you. You already did the hard part.
We build the apps, launch them, and maintain them, forever. The technical side is completely handled for you, so you can focus on using them strategically in your business.
Read more about MobiLoud’s features here, and get a preview of what your MobiLoud apps could look like.
Let’s Build
We’ve covered three technologies for building mobile apps in this article.
Overall, we think that Flutter has the edge.
React Native is a great tool in the right hands though as well. It could be a superior choice to Flutter if you already have a React web app and talented Javascript developers on your payroll.
Then again even if you do already have a React web app, why spend hundreds of thousands and months of work when you can just convert it into iOS and Android apps in weeks with MobiLoud?
Using MobiLoud cuts down the risk to practically zero in comparison.
You could even use MobiLoud to build a quick MVP, then decide later whether you want to build the apps from scratch in React Native or Flutter. Although it's unlikely you will need or want to, MobiLoud apps give you all the same advantages in the majority of cases.
Our app experts know the process inside out and can advise you in much more depth than any article.
Get in touch today, and get all your questions answered.
