React Native

React Native

Tipus	entorn de treball de JavaScript i programari
Versió inicial	2015
Versió estable	0.86.0 (11 juny 2026)
Llicència	llicència MIT
Característiques tècniques
Sistema operatiu	multiplataforma
Escrit en	JavaScript, Java, C++, Objective-C i Python
Equip
Desenvolupador(s)	Meta Platforms
Fonts de codi  Codi font Codi font
Més informació
Lloc web	reactnative.dev
Stack Exchange	Etiqueta
Id. Subreddit	reactnative

React Native és un marc de programari d'IU de codi obert desenvolupat per Meta Platforms (anteriorment Facebook Inc.). S'utilitza per desenvolupar aplicacions per a Android, Android TV, iOS,  macOS, tvOS, Web, Windows i UWP permetent als desenvolupadors utilitzar el marc de treball React juntament amb les capacitats natives de la plataforma. S'utilitza per desenvolupar aplicacions per a Android i iOS a Facebook, Microsoft i Shopify. També s'utilitza per desenvolupar aplicacions de realitat virtual a Oculus.

Història

El 2012, Mark Zuckerberg va comentar: "L'error més gran que vam cometre com a empresa va ser apostar massa per HTML5 en comptes del natiu". L'ús d'HTML5 per a la versió mòbil de Facebook va resultar en una aplicació inestable que recuperava les dades lentament. Va prometre que Facebook aviat oferiria una millor experiència mòbil.

Dins de Facebook, Jordan Walke va desenvolupar un programari que generava elements d'IU per a iOS a partir d'un fil de JavaScript en segon pla, que es va convertir en la base del framework web React. Van decidir organitzar un hackathon intern per perfeccionar aquest prototip per tal de poder crear aplicacions natives amb aquesta tecnologia.

El 2015, després de mesos de desenvolupament, Facebook va llançar la primera versió de la configuració de React JavaScript. Durant una xerrada tècnica, Christopher Chedeau va explicar que Facebook ja utilitzava React Native en producció per a la seva aplicació Group i la seva aplicació Ads Manager.

A l'octubre de 2025, Meta va anunciar que donaria React, React Native i JSX (XML de JavaScript) a una nova React Foundation, que forma part de la Linux Foundation.

Implementació

Els principis de funcionament de React Native són pràcticament idèntics als de React, excepte que React Native no manipula el DOM a través del DOM virtual.  S'executa en un procés en segon pla (que interpreta el JavaScript escrit pels desenvolupadors) directament al dispositiu final i es comunica amb el  plataforma nadiua mitjançant dades serialitzades sobre un pont asíncron i per lots.

Els components de React envolten el codi natiu existent i interactuen amb les API natives a través del paradigma d'IU declarativa de React i JavaScript. TypeScript s'utilitza sovint en lloc de JavaScript en aplicacions React Native modernes a causa de la seva major seguretat de tipus.

Tot i que l'estil de React Native té una sintaxi similar a la de CSS, no utilitza HTML ni CSS. En comptes d'això, els missatges del fil de JavaScript s'utilitzen per manipular les vistes natives. Mitjançant complements, Tailwind també es pot utilitzar amb React Native.

Exemple de "Hola, món!"

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);

Exemple de TypeScript

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

interface CounterProps {
 title: string; // Required prop
 baseNumber?: number; // Optional prop
}

const Counter: React.FC<CounterProps> = ({ title, baseNumber }) => {
 const [count, setCount] = React.useState<number>(baseNumber || 0);

 const incrementCount = (): void => setCount((prevCount) => prevCount + 1);

 return (
 <View>
 <Text>{count}</Text>
 <Button onPress={incrementCount} title={title}></Button>
 </View>
 );
};