Cross Platform Mobile Development | React Native vs V-Play

React Native is a popular framework developed by Facebook. Recently, several popular app development companies like Udacity or AirBnB stepped back from using React Native in their mobile apps. This article will explain some of the reasons for these companies to stop using React Native, and analyze the technical differences and different use cases between React Native and V-Play for app developers. For a quick summary and a comparison table, scroll to the bottom of this page.

Just like React Native, V-Play is a cross-platform framework for building native apps to achieve cross-platform code savings and reduce development time, powering native performance.

Custom UI, App Branding & Custom Animations

A common trend in mobile apps is to share the same app layout and design across iOS and Android. The brand identity is becoming more important than strictly sticking to platform aesthetics. To cover a brand identity, app designs usually require custom colors, fonts, animation and more. It is a frequent use case to re-use this layout, animation, brand identity and UI code across iOS and Android. Even more, navigation paradigms also get re-used across platforms like the bottom navigation bar pattern.

See the Spotify or AirBnB apps as examples: their design, layout and navigation is the same for both Android (the left screenshots) and iOS (the right screenshots):

branded-apps-spotify-airbnb

Such complicated UI elements and animations are not the strong sides of React Native. The reason is that you’re still styling and adapting the underlying, native UI widget from individual platforms, which then behave differently across platforms.

If your app has similar requirements for custom UI and animations as listed above, V-Play enables massive time savings, because you can use the same code across platforms.

For maximum flexibility, you can choose on a component level if your app shall use the “native” navigation paradigms, or use your custom UI and navigation code. This allows using the best of two worlds, whatever makes most sense for your apps.

Also, creating complex animations in your app has never been easier. Make use of V-Plays powerful animation system, to create stunning animated UIs with as little code as it can get. Creating and fine-tuning animations is often one of the most time-consuming tasks in mobile app development – with V-Play you are able to cut this time significantly thanks to the QML language architecture. See here for a technical introduction to Animations with V-Play.

powerful-animations

SDK vs Framework: IDE & Live Reloading

React Native is a framework for creating apps, while V-Play is a complete Software Development Kit.

VPlay-React-Framework-Comparison

With React Native, support for tooling is limited. Commands are run from a terminal and it does not ship with a dedicated IDE for development. Instead, you can choose from one of the available free text editors like Atom, Sublime Text or Visual Studio Code. You may also need additional tools for version control (Git) or debugging (Chrome Developer Tools). Designing user interfaces with React Native is done from code by default, the process is very similar to web development. As an alternative, additional paid tools are available from third-party companies.

V-Play includes a professional & full-featured IDE, extending the well known Qt Creator. It allows writing code with code-completion, side-by-side with the visual, drag-and-drop UI Designer, debugging, running tests, browsing help and version control, all in one place:

Just like React Native, V-Play also supports Live Reloading code you just saved in the IDE, both on the Desktop for quick simulation of the UI and on mobile with the mobile live reloading app. This reduces development time significantly, as you save the time of re-deploying the whole application every time.

The benefit of V-Play here is that you can simulate mobile UIs for different platforms on a Desktop build, and even can change the platform style at runtime.

platform-switch

UI Rendering

Both frameworks use JavaScript for the application logic to be able to re-use the same logic across platforms. However, React Native and V-Play use different ways how the content is rendered on screen, a task that is the most performance sensitive part.

React Native uses native OEM components for rendering content. This gives you the benefit that your app looks and feels native because the elements shown on the screen are literally native. This comes with a price tag though: You have to develop separate UIs for iOS & Android and this also means that the UI animations need to be developed individually per platform. As a result, it is more effort to add new features, fix bugs, and maintain your app, and you are limited by what the platform widgets provide in terms of styling.

V-Play is based on C++ and uses OpenGL ES (Metal & Vulkan upcoming) for custom rendering its content efficiently on iOS & Android. This guarantees your app will have the same layout on iOS & Android with a single source code. It also allows customization of widgets, adds theming/styling support and the freedom to modify each widget to specific needs.

VPlay-React-Rendering-Comparison

Comparing the illustration, we see that React Native requires an additional JavaScript bridge to synchronize the app state with the native widgets. Although React Native has a single codebase, its view component behaves differently on iOS than it does on Android.

If you do not want to make a compromise between the two use cases and see them both important in current and future apps, then V-Play is the go-to solution because it is the only framework that supports both: custom rendered controls and native rendered controls. So if you have existing native code which you’d like to keep, you can still do this with V-Play.

App Performance

UI rendering directly impacts the performance of apps.

As mentioned above, React Native requires a JavaScript bridge to synchronize the app state with native widgets: Whenever there is a change in the data to display, React Native compares the difference with its current state in JavaScript first, and if it detects a change, it propagates that change to the native view through the JavaScript bridge. React Native tries to solve this performance bottleneck with a virtual DOM approach that reduces the amount of data transferred between the logic and the renderer, and also to limit redraws of the screen. It does a fairly good job at this, however, the approach is still a bottleneck whenever data is transferred across this “bridge” between JavaScript to the native platform.

V-Play uses a custom rendering of widgets. Rendering is therefore not slowed down due to the lack of the JavaScript bridge required by React Native. By reducing the interactions between the native layer and runtime environment, V-Play enables the app to run more smoothly and quickly than React Native apps. V-Play also implements all performance-critical parts in C++ to bring the best possible performance and smooth 60fps animations across all platforms.

extensible-with-qml-java-js-objc-cpp

And thanks to the first-level C++ support also for application code, you can choose C++ for parts of your application and mix it easily with JavaScript code.

Code Comparison, Programming Language & Easiness of Learning

React Native uses JSX, a syntax for embedding XML within JavaScript, which lets you write your markup language for user interfaces inside the code.

V-Play uses QML – a scripting language extending JavaScript with type safety and reactive programming features – which was specifically designed from scratch with the goal to be good at one thing: UI development to be more efficient with less code.

Because of that, V-Play apps are not only fewer lines of code than React Native but also way more expressive. Let’s compare that with a single “Hello World” app:

// React Native - Hello World
import React, {Component} from 'react';
import {Text, View} from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      
        Hello world!
      
    ):
  }
}
// V-Play - Hello World
import VPlayApps 1.0

App {
  AppText {
    text: "Hello worldQ"
  }
}

In addition, more and more mobile app layouts and designs evolve to be more brand-driven and unified across platforms. This implies a strong motivation to share layout and UI code across iOS and Android. In contrast to React Native, V-Play uses custom rendering of UI elements with the advantage of showing the same UI across platforms with just a single code base.

app-example-and-demo-templates

You can see the results of those code savings of V-Play compared to other development platforms in the following chart. The comparison is based on a real-world project (an app to search real estate properties) that got implemented in various frameworks and which is available on GitHub:

V-Play Code Savings

As a consequence, V-Play was also ranked #1 at research2guidance cross-platform tool benchmarking by more than 2000 developers for easiest to learn, biggest time savings and best support.

Cross-Platform

React Native supports iOS & Android. It’s also possible to re-use some parts of the code for Web with the classical React framework, the practical value is limited though. Also, React Native does not support creating native Desktop apps for Windows, macOS or Linux.

V-Play Supports iOS and Android.

V-Play supports iOS & Android as well, and additionally the Desktop platforms Windows, macOS and Linux distributions like Ubuntu. V-Play also supports embedded platforms like the Raspberry Pi or Arduino and multimedia platforms like tvOS. There is also an export function for the Web in development, which will allow sharing the same source code across all platforms.

Native Code Integration

If you have an existing native app, or plan to develop a new native app along with other V-Play or Qt/QML components for rapid development, V-Play has you covered as well.

This diagram shows the tech stack of a mobile app powered by V-Play for both of the above scenarios:

V-Play Tech Architecture Native + QML

You can use any native Objective-C / Swift or Java / Kotlin code in a V-Play app, and deploy your app from a single IDE.

If you have an existing native app and are used to working with Xcode or Android Studio, you can embed V-Play just as you would add a WebView. Just contact V-Play if you’d like to get a demo project setup for Xcode and CocoaPods, or for Android Studio and Gradle. The V-Play view is shown with a Fragment on Android and as a UIView on iOS, which allows you to keep your existing workflows and mobile app structure.

Enterprise-Level Support

During development of a mobile app, you want a stable framework which on one hand improves by fixing bugs, but on the other hand, does not contain breaking changes which would require you to change your existing app and possibly add new bugs with that process.

React Native is a popular example where the early days of maturity and high release frequency causes issues for developers who do not want to update their projects yet. Subsequent releases of React Native often break compatibility, so you’re encouraged to put in additional effort in updating your project between versions quickly, otherwise you might get stuck with a broken project.

react-native-broken-project

React Native is maintained by Facebook. There is no guarantee that Facebook isn’t going to close this project one day and stop updating it, like their already did with the Parse shutdown. React Native is not the core business of Facebook, which you should take into account since you depend on them after choosing React Native.

V-Play is based on the Qt framework, which is proven for over 25 years and has long-time-supported (LTS) releases that are guaranteed to receive bug fixes for 2 years. This allows choosing if you want to keep on older versions which still get bugs fixed and are guaranteed to stay API compatible. Or you can choose to update to the latest version to use the bleeding-edge features. In addition, V-Play includes security features like code encryption, IoT hardware stack compatibility and enterprise software integration like SAP or Oracle backends.

In comparison to React Native, V-Play offers dedicated support packages tailored to your app project’s requirements and team skills. You can choose from a wide range of on-site or remote trainings for all development team experience levels. Or order a tech support package with guaranteed response times and SLA to assist your dev team when you need help. If you are low in resources, you can even outsource parts of the development to the V-Play team, to get your app released as fast as possible.

partner-companies1

Packages & External Dependencies

React provides an open ecosystem for custom components & packages. Contrary to that, it only comes with a small set of components by default. It’s up to the developer to pick the single right module for a given use case. Also, maintenance of packages that are already shipped in a live app might not be given for the lifetime of the app and you have to pay attention to individual licensing terms. React packages are maintained with npm package manager, which often brings up incompatibilities and conflicts between different packages and versions (just google for “React Native dependency hell” or “React Native unable to resolve error”). Frequently, you end up implementing things on your own for each supported platform as a React Native developer.

react-version-mismatch

V-Play follows another approach: including all relevant features in one single package, preselected and maintained from the same source. The main benefit here is that V-Play has a large set of built-in UI components. So unlike in React Native, you don’t need to import third-party UI libraries for standard app components. This is especially true for concepts like navigation, animations or responsive design across devices.

features-v-play-qt

Native Navigation

React Native makes several things that should be easy hard. Things get immediate if looking into the most basic UI concept for mobile apps: Navigation. The navigation paradigms on iOS and Android are different. On iOS you have a swipe-back gesture to navigate back in a navigation stack. On Android you usually use a navigation drawer that slides in from the left side.

If you google for “React Native Navigation”, you’ll find 19 million resources. This is for a reason: Using a native-looking navigation across platform is tricky to do with React Native. There’s tens of choices and almost every of them does the same job, testing things out for your app might take several hours and you’re still adding on a best guess. Furthermore, most modules only add great support for a single platform, so you still need multiple components and some boilerplate code to support both of them.

With V-Play, you simply put the Navigation component into your code:

 import VPlayApps 1.0

 App {
   Navigation {
     // enable both tabs and drawer for this demo
     // by default, tabs are shown on iOS and a drawer on Android
     navigationMode: navigationModeTabsAndDrawer

     NavigationItem {
       title: "Home"
       icon: IconType.home

       NavigationStack {
         Page {
          title: "Main Page"
         }
       }
     }

     NavigationItem {
       title: "Lists"
       icon: IconType.list

       NavigationStack {
         Page {
          title: "Lists"
         }
       }
     }

   }
 }

vplay-for-ios-navigation-simple

V-Play abstracts the platform navigation differences and allows you to use just a single Navigation component, that works cross-platform. After adding, you instantly get a tabbar on iOS and the Navigation Drawer on Android. For maximum flexibility, you can choose on a component level if your app shall use the “native” navigation paradigms, or use your custom UI and navigation code. This allows using the best of two worlds, whatever makes most sense for your apps.

native-navigation-ios-and-android

Navigation is just one example, the list of these goes on.

Games & 3D / AR

Where React Native’s possibilities end with mobile app development, V-Play also allows developing games with the same SDK and mixing the game and app related APIs in one app. Furthermore, V-Play allows rendering 3D or AR content in your mobile app, which gets more and more important with the rise of 3D user interfaces. And as visual effects like shader effects are gaining popularity in mobile app development to let your app stand out – all of these requirements are already supported in V-Play.

Wikitude Showcase Osmino

V-Play also comes with built-in gamification & social features like highscore lists or user chat for both apps and games to increase user retention and interaction.

More V-Play Features

V-Play offers many more benefits for modern mobile app development. You can find more infos in the shared links:

Summary: What are differences between React Native and V-Play?

  • V-Play is an entire development toolkit, React Native “just” a framework: V-Play comes with a feature-rich IDE and tools for localization, testing, profiling & more. React Native depends on external tools to unveil its entire features.
  • Rendering & App Performance: V-Play uses custom rendering, while React Native uses native rendering. By reducing the interactions between the native layer and runtime environment with custom rendering, V-Play enables the app to run more smoothly and quickly than React Native apps.
  • Branded UIs & Animations: V-Play makes it easy applying full customization to UIs for individual brandings and adding complex animations.
  • Code Comparison: V-Play allows writing apps with less but more expressive code thanks to QML & JavaScript. Comparing the same app, React Native requires about 60% more code than V-Play.
  • Cross-Platform: While React Native supports iOS & Android, V-Play additionally adds support for Desktop platforms, embedded and IoT systems, as well as multimedia devices.
  • Dependencies: V-Play already ships with all components required for modern app development, there are no hassles with npm package manager or unsupported packages like with React Native.
  • Support: While React Native is “as is” and maintained from the community, V-Play offers enterprise-grade support & training and provides Qt versions with long-term support.
  • Games: V-Play supports creating both apps & games, while React Native is capable of apps only.
  • API Access: Thanks to the native C++ and Qt core of V-Play, it allows full access to system APIs and the underlying platform.

Comparison Table React Native vs V-Play

Feature React Native V-Play
Public Release 2015 2012
Custom UI , App Branding & Custom Animations no yes
Native rendered UI yes yes*
Programming language JSX & JS QML & JS & C++
Tooling / Development IDEs no dedicated IDE (third-party tools available) Qt Creator (or Visual Studio, Web IDE*)
Integrated Visual UI Editor no (third party tool available) yes
Live Reload yes yes
Shared UI Code across platforms? no yes
Supported Platforms iOS, Android iOS, Android, Windows, Mac, Linux, Embedded / IoT, tvOS, Web*
Release Cycle Frequent updates, backwards compatibility breaks ~ 6-10 updates per year, long-time-supported versions
License MIT
Dependencies have varying licenses
V-Play: closed source Free version, source code available for commercial customers
Qt: LGPL & Commercial
Development Support community support community support & enterprise-level support & training
* coming later this year

Mobile App Framework Comparison

See here for more comparisons of mobile app development frameworks:

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support