React Native vs Flutter

Flutter apps look as good on the up-to-date operating systems as they do on older versions. Since they only have one codebase, the apps look and behave similarly across iOS and Android – but thanks to Material Design and Cupertino widgets, they can also imitate the platform design itself. How’s that possible? Flutter contains two sets of widgets which conform to specific design languages: Material Design widgets implement Google’s design language of the same name; Cupertino widgets imitate Apple’s iOS design. This means that your Flutter app will look and behave naturally on each platform, imitating their native components.

Application components look just like native ones (e.g. a button on an iOS device looks just like a native iOS button, and the same on Android). The fact React Native uses native components under the hood should give you confidence that, after any OS UI update, your app’s components will be instantly upgraded as well. That said, this can break the app’s UI but it happens very rarely. If you want your app to look near-identical across platforms – as well as on older versions of an operating system (as Flutter achieves) – then consider using third-party libraries (like this one). They will enable you to use Material Design components, in place of native ones.

Sharing code

With Flutter 2 (announced in March 2021), we can use the same codebase to ship native apps to five operating systems: iOS, Android, Windows, macOS, and Linux; as well as web experiences targeting browsers such as Firefox, Chrome, Safari, or Edge. Flutter can even be embedded in cars, TVs, and smart home appliances. (source). Perhaps the single largest announcement in Flutter 2 is production-quality support for the web. It can be used for: • Progressive Web Apps (PWAs) that combine the web’s reach with the capabilities of a desktop app, • Single Page Apps (SPAs) that load once and transmit data to and from internet services. • Existing mobile apps – allowing Flutter apps to be run on a desktop. Find out more here.

iOS and Android – but there are select libraries that allow you to use the same code to build iOS, Android, web, and Windows10 apps. You can also extract shared code in mobile, desktop, and web apps, to a separate repository; treat it as a separate project; then inject it in the same way as another dependency. This allows a developer to focus on writing code for a specific platform without having to consider compatibility with another one.

Top apps made with this technology

Xianyu app by Alibaba, Hamilton app for Hamilton Musical, Google Ads app, Philips Hue, My BMW

Instagram, Facebook, Facebook Ads, Skype, Tesla

Time-to-market

Typically much faster than native development.

Possibly as fast as development with Flutter. However… React Native uses bridge and native elements, so it may require separate optimization for each platform – a problem that widget-based Flutter doesn’t run into. It may make the app development with React Native longer.

Competitive advantage

• Great look and feel thanks to rich widgets; • Rapidly growing community, and popularity; • Excellent documentation with strong support from the Flutter team (which makes it easy to start developing with Flutter); • Improving Flutter for Web, offering the potential for one codebase across mobile and web platforms • Difficult to beat time-to-market length

• Stability (5+ years on the market); • Many successful, prominent market players using React Native; • Mature, vast community; • Easy-to-learn technology; • Plenty of tutorials and libraries, which allow quick and easy development; • Code can be easily reused for both web app and desktop app development.

When it is not the best fit

If… • Your app needs to support 3D Touch (for now, Flutter doesn’t support 3D – but it features on the Flutter team’s long-term roadmap) • The design of your app is platform-specific • Your app requires multiple interactions with an OS; or requires rare, little-known native libraries • You need a minimalistic UI, but rely on significant use of the phone hardware (e.g. an application that plays music, or only takes pictures) • You want to create an instant app (small-sized app) If your app sounds like any of the above, it’s probably better you choose native app development. Read more about these cases here >>

If… • Your app needs to handle less common, or ultra-specific tasks (like calculations) in the background • You require custom communication via Bluetooth (which can be tricky to implement using React Native) • You want to create an app for Android only In truth, if you want to build an iOS app and you know JavaScript, consider React Native – but if you want an Android-only app, it’s likely better to build natively with another team. Why? Right now, iOS has better support than Android. If your app sounds like any of the above, it’s probably better you consider choosing native app development.