 | Some of this article'slisted sourcesmay not bereliable. Please help improve this article by looking for better, more reliable sources. Unreliable citations may be challenged and removed.(February 2019) (Learn how and when to remove this message) |
| React Native | |
|---|---|
 | |
| Developers | Meta and community |
| Initial release | March 26, 2015; 10 years ago (2015-03-26)[1] |
| Stable release | |
| Repository | github |
| Written in | C++,Java,JavaScript,Objective-C,Kotlin |
| Platform | Android,Android TV,iOS,macOS,tvOS,Web,Windows,UWP,VR andvisionOS |
| Type | Application framework |
| License | MIT License |
| Website | reactnative |
React Native is anopen-sourceUIsoftware framework developed byMeta Platforms (formerly Facebook Inc.).[3] It is used to develop applications forAndroid,[4]: §Chapter 1 [5][6]Android TV,[7]iOS,[4]: §Chapter 1 [6]macOS,[8]tvOS,[9]Web,[10]Windows[8] andUWP[11] by enabling developers to use theReact framework along with native platform capabilities.[12] It is used to develop Android and iOS applications at Facebook, Microsoft, and Shopify.[13] It is also being used to develop virtual reality applications atOculus.[14]
In 2012Mark Zuckerberg commented, "The biggest mistake we made as acompany was betting too much onHTML5 as opposed to native".[15][16] UsingHTML5 forFacebook's mobile version resulted in an unstableapplication that retrieved data slowly.[17] He promisedFacebook would soon deliver a better mobile experience.
Inside Facebook, Jordan Walke developed software that generatedUI elements foriOS from a backgroundJavaScriptthread, which became the basis for theReact web framework. They decided to organize an internalhackathon to perfect thisprototype in order to be able to buildnative apps with this technology.[18]
In 2015, after months of development,Facebook released the first version for theReact JavaScript Configuration. During a technical talk,[19] Christopher Chedeau explained that Facebook was already using React Native in production for its Group App and its Ads Manager App.[20]
In October 2025, Meta announced that it would donate React, React Native, and JSX (JavaScript XML) to a new React Foundation, part of theLinux Foundation.[21]
The working principles of React Native are virtually identical toReact except that React Native does not manipulate theDOM via theVirtual DOM.[4]: §Chapter 2 It runs in abackground process (which interprets theJavaScript written by the developers) directly on the end-device and communicates with the native[4]: §Chapter 2 platform viaserialized data over anasynchronous andbatched bridge.[22][23]
React components wrap existing native code and interact with native APIs via React'sdeclarative UI paradigm andJavaScript.[24]TypeScript is often used overJavaScript in modern React Native applications due to its increasedtype safety.[25]
While React Native styling has a similar syntax toCSS, it does not useHTML orCSS.[4]: §Chapter 5 [26] Instead, messages from theJavaScriptthread are used to manipulate native views. Using plugins,Tailwind can also be used with React Native.
React Native is also available for bothWindows andmacOS, which is currently maintained byMicrosoft.
AHello, World program in React Native looks like this:
import{AppRegistry,Text,View,Button}from'react-native';importReactfrom'react';constHelloWorldApp=()=>{const[count,setCount]=React.useState(0);constincrementCount=()=>{setCount((prevCount)=>prevCount+1);};return(<View><Text>Helloworld!</Text><Text>{count}</Text><ButtononPress={incrementCount}title="Increase Count"/></View>);};exportdefaultHelloWorldApp;AppRegistry.registerComponent('HelloWorld',()=>HelloWorldApp);
In TypeScript, a counter component looks like this:
import{Button,Text,View}from"react-native";importReactfrom"react";interfaceCounterProps{title:string;// Required propbaseNumber?:number;// Optional prop}constCounter:React.FC<CounterProps>=({title,baseNumber})=>{const[count,setCount]=React.useState<number>(baseNumber||0);constincrementCount=():void=>setCount((prevCount)=>prevCount+1);return(<View><Text>{count}</Text><ButtononPress={incrementCount}title={title}></Button></View>);};
