Get Started with React Native for Desktop
react-native-gpui lets developers who know React create native desktop apps for macOS, Windows and Linux. You write your app once with React Native components, and it runs as a regular executable on each desktop operating system.
An app is drawn by GPUI, a GPU-accelerated renderer written in Rust, and talks to the operating system through native modules. The React Native platform is called desktop: that is the Metro platform and file extension (*.desktop.tsx), the Codegen platform, and the key a library declares in its react-native.config.js. Platform.OS stays the operating system: macos, windows or linux.
Before you begin
Set up your environment first. You need Node.js, Rust, CMake and the compiler for your operating system.
Create a new app
- New app
- Existing app
npx @react-native-gpui/cli init MyApp
cd MyApp
npm install
The new app is a regular React Native app with React Native's own starter screen: it keeps its ios/ and android/ folders, and gets a desktop/ folder for the desktop target. The starter uses react-native-safe-area-context, so the app also gets @react-native-gpui/safe-area-context and that library pinned to the version it supports.
To add the desktop target to a React Native app you already have, run this in the app's folder:
npx react-native init-desktop
It adds the desktop/ folder and installs the packages it needs. Pass --skip-install to write the scaffold without installing packages.
Run your app
npx react-native run-desktop
This builds the desktop app, starts Metro if it is not running, and opens the app. Edit App.tsx and the app updates with Fast Refresh.
The first build downloads a prebuilt copy of React Native's C++ runtime for your platform, so only the desktop app itself is compiled. Later builds are incremental. See Prebuilt runtime to change this.
To try the optimized build, which bundles the JavaScript into the app:
npx react-native run-desktop --release
Package your app
When the app is ready to share, build an installer for the operating system you are on:
npx react-native package-desktop
See Publishing your app.
What's next
- Learn the basics of React Native components, which work the same way on desktop.
- Add windows, a menu, keyboard shortcuts and a tray icon.
- Configure the app's name, icon and window in
desktop.json. - Look up a command in the CLI reference.