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 framework that lets developers build native apps using React, a web development tool. Instead of creating separate apps for different devices, React Native translates web-style code into native device components. First created for mobile phones, the community has expanded it to work on TVs, web browsers, and desktop computers.

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 allows you to write a single app that works across all supported devices. React Native for Vega (RNV) adds React Native support to Vega, letting you use familiar React tools while taking advantage of Amazon's graphics system and device features.

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. This means you can reuse your existing React Native code on Vega devices with minimal changes. The Vega SDK includes familiar React Native development tools, plus extra utilities to help build and test apps quickly while maintaining good performance.

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 KeplerAppState, 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 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 tools 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 the Vega simulator 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.

Version and upgrade

React Native for Vega supports the React Native runtime natively in the OS to optimize for app size and faster start times. RNV currently supports RN 0.72 with the new architecture, and will support newer versions in future releases. Vega OS is designed to ensure your apps remain compatible with future React Native versions and libraries.