React Native — кроссплатформенный фреймворк с открытым исходным кодом для разработки нативных мобильных и настольных приложений на JavaScript и TypeScript, созданный Facebook, Inc. (Ныне Meta)^[3].

React Native поддерживает такие платформы как Android^[4], Android TV^[5], iOS, macOS^[6], tvOS^[7], Web^[8], Windows и UWP^[9], позволяя разработчикам использовать возможности библиотеки React вне браузера для создания нативных приложений, имеющих полный доступ к системным API платформ^[10].

Основные принципы работы React Native практически идентичны принципам работы React, за исключением того, что React Native управляет не браузерной DOM, а платформенными интерфейсными компонентами. JavaScript-код, написанный разработчиком, выполняется в фоновом потоке, и взаимодействует с платформенными API через асинхронную систему обмена данными, называемую Bridge^[11][12][13]. В 2021 году ожидается замена Bridge на более производительную синхронную модель обмена данными, поддерживающую парадигму zero-copy.

Хотя система стилей (способ конфигурации визуальных свойств элементов интерфейса) React Native имеет синтаксис, похожий на CSS, фреймворк не использует технологии HTML или CSS как таковые^[14]. Вместо этого для каждой из поддерживаемых фреймворком операционных систем реализованы программные адаптеры, применяющие заданный разработчиком стиль к платформенному интерфейсному элементу.

React Native также позволяет разработчикам использовать уже существующий код, написанный на других языках программирования — например, Java или Kotlin для Android и Objective-C или Swift для iOS.

React Native поддерживает интеграцию и в уже существующие приложения — например, часть интерфейса мобильного приложения может быть реализована на React Native, а часть — при помощи чисто платформенных средств.

Пример «Hello, World» в React Native:

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

• Flutter
• NativeScript
• Xamarin
• Apache Cordova