React Native is an

open-source Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use and view the source code, design documents, or content of the product. The open source model is a decentrali ...

software framework In computer programming, a software framework is a software abstraction that provides generic functionality which developers can extend with custom code to create applications. It establishes a standard foundation for building and deploying soft ...

developed by

Meta Platforms Meta Platforms, Inc. is an American multinational technology company headquartered in Menlo Park, California. Meta owns and operates several prominent social media platforms and communication services, including Facebook, Instagram, Threads ...

(formerly Facebook Inc.). It is used to develop applications for Android,

Android TV Android TV is an operating system that runs on smart TVs and related entertainment devices including soundbars, set-top boxes, and digital media players. Developed by Google, it is a closed-source Android distribution. Android TV features a u ...

iOS Ios, Io or Nio (, ; ; locally Nios, Νιός) is a Greek island in the Cyclades group in the Aegean Sea. Ios is a hilly island with cliffs down to the sea on most sides. It is situated halfway between Naxos and Santorini. It is about long an ...

macOS macOS, previously OS X and originally Mac OS X, is a Unix, Unix-based operating system developed and marketed by Apple Inc., Apple since 2001. It is the current operating system for Apple's Mac (computer), Mac computers. With ...

tvOS tvOS (formerly Apple TV Software) is an operating system developed by Apple for the Apple TV, a digital media player. In the first-generation Apple TV, Apple TV Software was based on Mac OS X. The software for the second-generation and later ...

Web Web most often refers to: * Spider web, a silken structure created by the animal * World Wide Web or the Web, an Internet-based hypertext system Web, WEB, or the Web may also refer to: Computing * WEB, a literate programming system created by ...

Windows Windows is a Product lining, product line of Proprietary software, proprietary graphical user interface, graphical operating systems developed and marketed by Microsoft. It is grouped into families and subfamilies that cater to particular sec ...

and UWP by enabling developers to use the React framework along with native platform capabilities. It is used to develop 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 Mark Elliot Zuckerberg (; born May 14, 1984) is an American businessman who co-founded the social media service Facebook and its parent company Meta Platforms, of which he is the chairman, chief executive officer, and controlling sharehold ...

commented, "The biggest mistake we made as a

company A company, abbreviated as co., is a Legal personality, legal entity representing an association of legal people, whether Natural person, natural, Juridical person, juridical or a mixture of both, with a specific objective. Company members ...

was betting too much on

HTML5 HTML5 (Hypertext Markup Language 5) is a markup language used for structuring and presenting hypertext documents on the World Wide Web. It was the fifth and final major HTML version that is now a retired World Wide Web Consortium (W3C) recommend ...

as opposed to native". Using

for

Facebook Facebook is a social media and social networking service owned by the American technology conglomerate Meta Platforms, Meta. Created in 2004 by Mark Zuckerberg with four other Harvard College students and roommates, Eduardo Saverin, Andre ...

's mobile version resulted in an unstable application that retrieved data slowly. He promised

would soon deliver a better mobile experience. Inside Facebook, Jordan Walke developed software that generated UI elements for

from a background

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

thread, which became the basis for the React web framework. They decided to organize an internal

hackathon A hackathon (also known as a hack day, hackfest, datathon or codefest; a portmanteau of '' hacking'' and ''marathon'') is an event where people engage in rapid and collaborative engineering over a relatively short period of time such as 24 or 48 h ...

to perfect this

prototype A prototype is an early sample, model, or release of a product built to test a concept or process. It is a term used in a variety of contexts, including semantics, design, electronics, and Software prototyping, software programming. A prototype ...

in order to be able to build native apps with this technology. In 2015, after months of development,

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.

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 A virtual DOM is a lightweight JavaScript representation of the Document Object Model (DOM) used in declarative web frameworks such as React, Vue.js, and Elm. Since generating a virtual DOM is relatively fast, any given framework is free to rer ...

. It runs in a

background process A background process is a computer process that runs ''behind the scenes'' (i.e., in the background) and without user intervention. Typical tasks for these processes include logging, system monitoring, scheduling, and user notification. On a Wind ...

(which interprets the

written by the developers) directly on the end-device and communicates with the native platform via serialized data over an

asynchronous Asynchrony is any dynamic far from synchronization. If and as parts of an asynchronous system become more synchronized, those parts or even the whole system can be said to be in sync. Asynchrony or asynchronous may refer to: Electronics and com ...

and batched bridge. React components wrap existing native code and interact with native APIs via React's declarative UI paradigm and

TypeScript TypeScript (abbreviated as TS) is a high-level programming language that adds static typing with optional type annotations to JavaScript. It is designed for developing large applications and transpiles to JavaScript. It is developed by Micr ...

is often used over

in modern React Native applications due to its increased

type safety In computer science, type safety and type soundness are the extent to which a programming language discourages or prevents type errors. Type safety is sometimes alternatively considered to be a property of facilities of a computer language; that ...

. While React Native styling has a similar syntax to CSS, it does not use

HTML Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets ( ...

or CSS. Instead, messages from the

thread are used to manipulate native views. Using plugins,

Tailwind A tailwind is a wind that blows in the direction of travel of an object, while a headwind blows against the direction of travel. A tailwind increases the object's speed and reduces the time required to reach its destination, while a headwind has ...

can also be used with React Native. React Native is also available for both

and

, which is currently maintained by

Microsoft Microsoft Corporation is an American multinational corporation and technology company, technology conglomerate headquartered in Redmond, Washington. Founded in 1975, the company became influential in the History of personal computers#The ear ...

Hello World example

A Hello, World program in React Native looks like this: import from 'react-native'; import React from 'react'; const HelloWorldApp = () => ; export default HelloWorldApp; AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

TypeScript example

In TypeScript, a counter component looks like this: import from "react-native"; import React from "react"; interface CounterProps const Counter: React.FC = () => ;

Citations

References