React Native

The Landscape of Cross-Platform Mobile Development in 2023

Over the past decade, several cross-platform technologies have emerged in the field of mobile development, including Cordova in 2009, React Native in 2015, Flutter in 2017, and KMM (Kotlin Multiplatform for Mobile) in 2020. In this article, I will examine the market share that these cross-platform technologies hold as of 2023.

The article is organized into three main sections:

  • Sample Selection for the Study: In this section, I will detail the mobile applications chosen for assessing market share.
  • Techniques for Detecting Underlying Frameworks in Mobile Applications: This is the technical section of the article, where I will describe the methodology employed to identify the frameworks used by each application. Feel free to skip this section if you're solely interested in the findings.
  • Market Share Study Results: This section will present the outcomes of the market share analysis.

Sample Selection for the Study

For the scope of this study, I selected the top 100 featured applications on the Play Store as a sample. The list was retrieved from France on July 30, 2023, and may have since been updated. Opting for the Play Store's featured applications (rather than selecting 100 applications randomly or based on personal choices) offers the following advantages:

  • Minimized bias in the sample selection
  • Selection of top-tier applications, highlighted by the sample's average rating of 4.3 out of 5 (out of a pool of 500 million reviews) and a collective download count surpassing 32 billion.

Out of the 100 featured applications, only 93 were retained for study, the remaining seven were excluded because their underlying frameworks could not be identified using the method explained below.

It's worth noting that 23 of the 93 retained applications are games. The categorization as a 'game' was based solely on the Play Store's classification to ensure minimal bias.

Techniques for Detecting Underlying Frameworks in Mobile Applications

Again, this is the technical section of the article, feel free to skip this section if you're solely interested in the findings.

Acquiring an Application's APK File

The initial step in identifying the technology behind an application involves downloading its APK (Android Package Kit) file. There are multiple methods to acquire an application's APK, each with its own pros and cons:

  • Third-Party Stores: Websites like APK Pure or APK Mirror offer APK files for download. However, these platforms may not always have the latest versions, and they lack guarantees for both security and completeness of the Play Store's app inventory.
  • Direct Download Method: While more labor-intensive, this is, in my opinion, the most reliable approach, ensuring that you get the most current, secure APK. The steps are as follows:
  • Download the App: Use an Android phone to download the desired application from the Play Store.
  • Locate the App's Identifier: Each Android app has a unique identifier, also known as the app ID. This can either be obtained from the app's Google Play URL, formatted as ++code>https://play.google.com/store/apps/details?id=${app_id}++/code>, or by running the command ++code>adb shell pm list packages++/code>, which lists all app IDs currently installed on your phone.
  • Find the Installation Path: Execute the command ++code>adb shell pm path $app_id++/code> to locate the path where the app is installed on your phone.
  • Transfer the APK to Your Computer: Use the command ++code>adb pull $app_mobile_path $app_desktop_path++/code> to copy the APK from your phone to your computer.

Identifying the Underlying Framework

The ++code>classes.dex++/code> files

Once the APK is acquired, the focus shifts to the ++code>classes*.dex++/code> files contained within it. These files store the Java bytecode for the application (more specifically, it’s the Dalvik bytecode format) and therefore contains all the class definitions used in the application. To extract these files, simply execute the following command: ++code>yes | unzip -qq base.apk 'classes*.dex' -d unzipped_apk++/code>. The ++code>yes++/code> command is included to automatically confirm any prompts. An APK is just a compressed archive, making this extraction straightforward.

Analyzing DEX Files

In order to disassemble the bytecode stored in the ++code>classes.dex++/code> files, the ++code>dexdump++/code> tool should be used to display the information in a human-readable way. The ++code>dexdump++/code> tool is typically located in the  ++code>~/path/to/android/sdk/build-tools/sdk_version/dexdump directory++/code>. The figure below shows an extract of the result of the ++code>dexdump++/code> command on a ++code>classes.dex++/code> files (the complete output is a lot longer) :

Identifying the Framework

As can be seen through the figure above, the ++code>dexdump++/code> returns the definitions of all classes used in an application, including their name : In the example above, we can see that the application uses the ++code>com/facebook/react/bridge/InvalidIteratorException++/code> which is a class used by the React Native framework.

Therefore, To determine the framework an application is built with, it is possible to scan through the classes to find any attached to a specific framework. Below is the table that was used in this article to associate the beginnings of class names with corresponding frameworks that:

                                 
Framework Class Name Prefix
React Nativecom/facebook/react
Flutterio/flutter
Cordova / Capacitororg/apache/cordova or com/getcapacitor      

Note: Capacitor and Cordova are grouped together as they share similarities. Using this method, most Capacitor apps also appear as Cordova apps. This also includes frameworks like Ionic that use either one of them.
Xamarinxamarin
Unity3dcom/unity3d


It's important to note that KMM is absent from this list. KMM generates purely native applications, particularly for Android, since it relies solely on native elements. As a result, it's impossible to detect KMM-based applications using the method outlined in this article.

Example Command

To sum up, this is the shell script I used to conduct this study. It accepts an APK file as an argument and returns the framework used by the application would look like this:

Out of the 100 applications, the execution of this command revealed that 7 applications had more than two frameworks. These 7 applications were consequently discarded in this study.

Results of the Conducted Study

As previously mentioned, out of the initial 100 selected applications, only 93 were included in our analysis mainly because the development technology for seven of the apps could not be identified. The graph below provides a visual representation of the technology distribution:

Noticeably, the “Other / No framework” category dominates. This represents the number of applications for which no specific framework was detected. For the purpose of this article, we'll treat these applications as native, a fair assumption since none of the popular frameworks was detected.

The graph also highlights Unity's strong foothold in mobile app development. This is due to Unity being the number one choice when it comes to building 3D games filled with rich visuals.

Let’s zoom in on non-gaming apps. The next graph illustrates the distribution of technologies among the 70 remaining apps:

As expected, excluding games dramatically reduces Unity's presence to a mere two applications. Even though React Native and Flutter are relatively newcomers in the cross-platform scene, they already account for 18.5% of the applications, outperforming some older platforms like Cordova. Yet, native development still holds its ground, representing 71% (50 out of 70) of the analyzed apps

As a React Native developer, I was interested in the footprint of React Native in this sample. In our study, React Native's presence was 10% (7 out of 70 applications). However, when juxtaposed with data from the U.S. shared by Evan Bacon on Twitter, the findings diverge:

It appears therefore that the adoption of React Native in the US is more accelerated than in France, at least based on the of application used in this article.

Conclusion

Even though native development is still undeniably dominant, there's a clear shift towards cross-platform solutions. Since entering the market, React Native and Flutter have evolved immensely, proving their worth in powering industry giants such as Instagram (React Native, with over 5 billion downloads) and Alibaba (Flutter, with more than 100 million downloads).

In fact, adopting these two technologies offers several advantages:

  • Efficiency in development: Cut development time in half, or even by two-thirds when considering web development, while offering an experience and a performance similar to that of native apps.
  • Consistent user experience: Ensure uniform business rules across platforms, eliminating inconsistencies between different OS environments.
  • Better team organization: Shift from OS-specific teams to feature-focused teams, optimizing collaboration and efficiency.
  • Advanced features: Benefit from capabilities not available in native platforms, like live updates with dedicated tools such as Codepush and Expo's EAS for React Native.

If you've reached this point in the article and are still hesitating about migrating to cross-platform, consider our dedicated offer. Transition from a native application to a cross-platform framework can be smooth, allowing you to consistently release new features throughout the migration period.

Thank you for reading. I hope you found this article interesting, and I look forward to sharing more with you in our 2024 edition!

Développeur mobile ?

Rejoins nos équipes