React Native for Vega Overview

Open Beta Documentation Amazon offers this technical documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback and iterates on the features. For the most current feature information, see the Release Notes.

About React Native

React Native (RN) is an open-source mobile application development framework that leverages a web development framework - React - to build native apps. With React Native, React primitives are rendered to native platform UI, meaning your app uses the same native platform APIs as other apps built with supported platform language. While initially designed for mobile platforms, various out-of-tree community supported initiatives have allowed React Native to expand support for other platforms, like TV, web, and desktop.

React Native provides fast development cycles and engineering efficiency through features such as:

Cross-platform development - Create apps for multiple platforms using a single codebase.
Native performance - Compiles to native code, providing near-native performance.
Fast development and iteration - Hot reloading feature allows real-time viewing of changes.
Interaction patterns - Supports multiple interaction patterns (remote control, touch, voice)
Focus management - Built-in focus management for navigating TV apps with remote controls.
Integration with native modules - Easy access to OS-specific features when needed.

React Native for Vega

Vega is a new SDK from Amazon that enables developers to write a single app that works across all supported devices. React Native for Vega (RNV) is an out-of-tree platform implementation that brings React Native development support in the Vega SDK. RNV leverages familiar developer experience while utilizing Amazon's portable Skia-based UI framework and other native platform APIs.

React Native for Vega embraces the cross-platform principles of the React Native ecosystem, and aims to provide parity with RN APIs and popular libraries. RNV supports many RN core components and APIs, and has ported RN libraries to enable reuse of your app code across Vega OS and other OS platforms. Additionally, the Vega SDK includes support for common RN tooling as well as additional development and testing utilities to accelerate app development while supporting a performant runtime.

React Native for Vega extensions

RNV extends React Native beyond its "stock" version to support unique features for Vega OS on TV devices now, and other device categories in future. These extensions adapt features from RN core and RN TvOS and provide additional features with Vega's specific APIs to meet Amazon device requirements.

Key aspects of this integration include:

Built on RN new architecture to support Fabric and Turbo Modules from get go, along with stable API support for developing turbo modules leveraging Node-API over JSI.
OS delivered RN runtime, and other core components for smaller app footprint and faster app start times.
Core features from RN TvOS - TVFocusGuideView, TVEventHandler.
Media framework conforming to W3C MSE/EME spec, for playback and media controls enabling re-use of web JS players.
Vega-specific API extensions, such as VegaAppState, FocusManager, SplashScreenManager, and I18N.
Support for headless RN processes to run short lived tasks and services.
Optimization for latency metrics (such as Time Till Fully Drawn or TTFD) and storage metrics.
Adaptation and porting of open-source React Native libraries where possible.

Developing for React Native for Vega

React Native for Vega follows familiar React Native app development workflows. You can start with one of the project templates from the Vega SDK, or add RNV support to your existing React Native project codebase. RNV includes a React Native plugin to provide a react-native cli integration for building your Vega apps. The Vega SDK further provides support for auto-linking native modules, and building, running, and testing Vega apps.

Developer tools

The Vega SDK supports a set of development tools, including those built specifically for Vega and commonly used tools from the React Native community.

Vega-specific tools

Vega Studio - A VS Code extension that serves as the primary IDE for building Vega apps. Vega Studio allows you to create, build, run, and test apps with performance tools.
Vega CLI - This tool enables you to build apps and run them on the simulator.
Vega Virtual Device - Use this to run your apps locally during development.
VDA utility - A command line tool that lets you install and run apps on Vega-supported devices.

Community tools

Appium - For automated integration and end-to-end testing.
Charles proxy - To inspect network traffic.
Flashlight - To automate performance metrics for RN apps.
React DevTools - For debugging and inspecting your React components.

You'll continue to see integration of other community tools such as Shopify Performance, and others to enhance your development experience.

Version and upgrade

React Native for Vega takes a unique approach by supporting React Native runtime natively in the OS, to optimize for app size on disk and faster app start times. RNV currently supports RN 0.72 with the new architecture, and will support RN 0.76 in a future release. Vega OS is designed to ensure your apps remain compatible with future React Native versions and libraries.