React Native

React Native

Developer(s)	Meta and community
Initial release	March 26, 2015 (2015-03-26)
Stable release	0.79.1  / 15 April 2025 (15 April 2025)
Repository	https://github.com/facebook/react-native
Written in	JavaScript, Java, C++, Objective-C, Python
Platform	Android, Android TV, iOS, macOS, tvOS, Web, Windows, UWP, and VR
Type	Application framework
License	MIT License
Website	reactnative.dev

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. It is used to develop the Android and iOS applications at Facebook, Microsoft, and Shopify. It is also being used to develop virtual reality applications at Oculus.

History

In 2012 Mark Zuckerberg commented, "The biggest mistake we made as a company was betting too much on HTML as opposed to native". Using HTML5 for Facebook's mobile version resulted in an unstable application that retrieved data slowly. He promised Facebook would soon deliver a better mobile experience.

Inside Facebook, Jordan Walke found a way to generate UI elements for iOS from a background JavaScript thread, which became the basis for the React web framework. They decided to organize an internal hackathon to perfect this prototype in order to be able to build native apps with this technology.

In 2015, after months of development, Facebook released the first version for the React JavaScript Configuration. During a technical talk, Christopher Chedeau explained that Facebook was already using React Native in production for its Group App and its Ads Manager App.

As of 2023 Facebook has opted to remove React Native as a platform for mobile.The main reasons cited by Facebook for pulling projects off of React Native were financial. Meta had been investing a significant amount of money, and it was not seeing a return on its investment. The company stated that it was shifting its focus to projects that it believed had more potential for growth.

Facebook also cited technical limitations as a reason for its decision to pull out of React Native. The company stated that it had encountered several challenges while working on the framework.

React Native apps are known to have slower performance compared to natively built apps, which can be a drawback for users. While the performance may be acceptable for some Apps, as of 2024 other large scale "early adopters" of the Platform have reverted to native development, including: AirB-n-B, Udemy and some divisions of Microsoft. This is likely the same limitation all hybrid platforms face. React Native has made strides in improving thread management, but as of 2024, cannot be called equally performant with native applications.

Facebook also sited difficulty with maintaining a consistent codebase. React Native uses a single codebase for multiple platforms, which can lead to inconsistencies and make it harder to maintain. So called "cross platform" competitors, like Cordova and Xamarin have a similar requirement and a true, single cross platform has yet to emerge in the IT marketplace.

Facebook also believes React Native does not offer access to all native functionality. This limits the capabilities of the App, or at least the performance of platform calls. By it's very nature, React Native adds a layer or more of abstraction between the developer's code and the underlying operating system and UI rendering. For many memory or process intensive functions, this can be detrimental to performance. However, lacking the above mentioned requirements, a React Native user experience can be comparable to a native application user experience.

It can also be said that the platform lacks intuitive means to implement native third-party libraries, and has complex integration with native modules. Integrating native modules can be a complex and time-consuming process. Often integration must be hand coded in native languages in order to become accessible in JavaScript for consumption in a React Native application. This also by it nature, require a "codebase per platform" approach, adding to the cost and difficulty of development and maintenance.

These platform limitations contributed to Facebook's decision to wind down its involvement in the project, per their own statements on the matter. React Native is not a fully compiled language, and as such can be 'decompiled.'

While it is unlikely that React Native as a platform will be uprooted in the short term; it's limitations have caused some early adopters to move off the platform. For those whose applications don't require high levels of performance, memory management, parallel computing, operating system services and easy 3rd Party library integration; it can still be solution. This is realistically a large group of Apps, and core development of the platform is ongoing.

Implementation

The working principles of React Native are virtually identical to React except that React Native does not manipulate the DOM via the Virtual DOM. It runs in a background process (which interprets the JavaScript written by the developers) directly on the end-device and communicates with the native platform via serialized data over an asynchronous and batched bridge.

React components wrap existing native code and interact with native APIs via React's declarative UI paradigm and JavaScript. TypeScript is often used over JavaScript in modern React Native applications due to its increased type safety.

While React Native styling has a similar syntax to CSS, it does not use HTML or CSS. Instead, messages from the JavaScript thread are used to manipulate native views.

React Native is also available for both Windows and macOS, which is currently maintained by Microsoft.

Hello World example

A Hello, World program in React Native looks like this:

import { AppRegistry, Text, View, Button } from 'react-native';
import React from 'react';

const HelloWorldApp = () => {
  const [count, setCount] = React.useState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <View>
      <Text>Hello world!</Text>
      <Text>{count}</Text>
      <Button onPress={incrementCount} title="Increase Count" />
    </View>
  );
};

export default HelloWorldApp;

AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

See also

• React (JavaScript library)
• Multiple phone web-based application framework
• NativeScript
• Xamarin
• Titanium SDK
• Apache Cordova
• Flutter (software)
• Qt (software)
• Codename One

References

• Eisenman, Bonnie (2016). Learning React Native. O'Reilly. ISBN 978-1-491-92900-1.