#react_native_for_vega_get_started.md
- CRITICAL: For ANY question, request, or task related to Vega app development (including architecture questions, code generation, debugging, app performance, crash debugging, or general inquiries), you MUST read the relevant linked documents FIRST before answering
- AI agents can read any .md files referenced to get correct linked document information.
- When answering questions related to sections that have linked documents, you MUST read the linked document first before answering
- You MUST use the
read_documenttool from@amazon-devices/amazon-devices-buildertools-mcpMCP server to read markdown documents linked in this document - If unsure which document to read, start with the architecture document to understand the context
- If a document is not found, use
list_documentsfrom@amazon-devices/amazon-devices-buildertools-mcpto list all available documents. Optionally add a parameter to thelist_documentsfrom 'KB', 'PROMPT', 'STEERING', 'WORKFLOW' to narrow the search. - You MUST confirm if
vegaorkeplercommand is valid before running any App development flows that require runningvegaorkeplercommands. Runwhich vegaorwhich keplerto confirm and if either commands are not valid then readvega_sdk_installation.mdto install Vega SDK. - For ALL Vega CLI commands: See Vega CLI Commands for the mandatory 3-step workflow that MUST be followed before executing any CLI command.
CRITICAL FOR AI AGENTS: React Native for Vega Development.
CRITICAL: This guide provides exact steps to determine the React Native Version that must be used for development. NEVER skip these steps:
- Identify React Native Version - Determine the React Native version from the existing package.json dependencies (e.g., 0.72, 0.83)
- Handling no User Specification for React Native Version - Prompt user to provide React Native version if it cannot be determined
- Version-Specific Information - Always refer to
react_native_for_vega_version_specific_knowledge_base.mdfor version-specific configurations, dependencies, and templates
IMPORTANT: This guide provides exact implementation patterns. Follow these patterns precisely to avoid common failures:
- Never bundle React or React Native - These are system-provided
- Implement headless services - Recommended for media playback
- Use exact dependency versions - Vega has strict compatibility requirements
- Follow the manifest.toml structure exactly - Deviations will cause deployment failures
- Test on Vega Virtual Device - Standard React Native testing is insufficient
Using Vega CLI to generate new application projects from official templates (helloWorld) with proper validation steps. See Vega CLI Commands for the mandatory CLI command workflow.
System-bundled runtime architecture with split bundles, process pre-warming, and native service integration for optimized TV app performance
To learn more, read 'react_native_for_vega_architecture.md'
Core dependencies and essential Vega libraries for TV-optimized development with version-specific requirements
To learn more, read 'react_native_for_vega_dependencies.md' and 'react_native_for_vega_version_specific_knowledge_base.md' for version-specific information
Cartesian focus management for D-Pad navigation with TVFocusGuideView, focus indicators, and imperative focus control via FocusManager
To learn more, read 'react_native_for_vega_tv_app_focus_management.md'
W3C MSE/EME standard media playback with DRM support, adaptive streaming, and VideoPlayer component for URL and MSE modes
To learn more, read 'react_native_for_vega_media_player.md'
Integration with Amazon's content recommendation and user activity tracking via kepler-content-personalization package
To learn more, read 'react_native_for_vega_content_personalization.md'
Login with Amazon and account management using kepler-media-account-login and security-manager-lib packages
To learn more, read 'react_native_for_vega_account_authentication.md'
Stack, tab, and drawer navigation using Amazon-specific @amazon-devices/react-navigation packages with TV-optimized focus management
To learn more, read 'react_native_for_vega_navigation.md'
High performance Vega UI Components with native bindings such as 'Carousel' from "amazon-devices/kepler-ui-components" library
To learn more, read 'react_native_for_vega_ui_components.md'
Implementing a web view interface in React Native for Vega App.
To learn more, read 'react_native_for_vega_webview.md'
Component types in manifest.toml including interactive (UI), service (headless), and task components with proper runtime-module configuration
To learn more, read 'vega_application_components.md'
Required configuration file for every Vega app, including package identifiers, system capabilities, privileges, and interface declarations used by Vega OS
To learn more, read 'vega_app_manifest.md'
Complete build process, Fast Refresh setup, device management, architecture-specific installation, and deployment troubleshooting workflows
To learn more, read 'react_native_for_vega_app_build_and_install.md'
Singleton pattern implementation for background services (media playback, content personalization) with proper onStart/onStop lifecycle management
To learn more, read 'react_native_for_vega_headless_service_pattern.md'
Performance guidelines, development workflow, architecture recommendations, and critical pitfalls to avoid (bundling React, TV UX patterns, error handling)
To learn more, read 'react_native_for_vega_development_best_practices.md'
Steps to migrate from standard React Native to Vega: updating dependencies, creating manifest.toml, implementing headless services, and adding TV navigation
To learn more, read 'react_native_for_vega_migration_guide.md'
- Vega Developer Portal
- React Native for Vega Architecture Guide
- Vega API Reference
- Vega Video App (reference implementation)
- Vega Sample Apps Repository: https://github.com/AmazonAppDev/vega*
- Vega Studio (VSCode Extension)
- Vega CLI (
keplercommand) - Vega Virtual Device
🚨 CRITICAL WORKFLOW FOR AI AGENTS 🚨
When ANY task involves Vega CLI commands (vega or kepler):
STEP 1 (MANDATORY): Read vega_cli_commands_reference.md
- This is the base specification document
- Contains version info, user confirmation requirements, command structure
- NEVER skip this step
STEP 2: Read specific command document (e.g., vega_cli_commands_reference.md)
- Only after reading the base specification
- Get detailed options and examples
STEP 3: Propose values and get user confirmation
- Show proposed command with default values
- Wait for user approval before executing
Failure to follow this 3-step workflow will result in incorrect command execution.
To learn more, read vega_cli_commands_reference.md document to understand complete spec of kepler cli and vega cli commands.
Exact directory structure, critical file contents (index.js, service.js, manifest.toml), and comprehensive validation checklist before deployment
To learn more, read 'react_native_for_vega_project_structure.md'
Steps to convert UI interface mockup images to Vega App: generate vega react native components from UI mockup images
To learn more, read 'react_native_for_vega_generate_ui_components_from_mockups.md'
WHEN TO TRIGGER THIS WORKFLOW:
You MUST trigger the React Native upgrade workflow when user's message contains ANY of these patterns:
Trigger Phrases:
- "upgrade" + "React Native" or "RN"
- "migrate" + version reference
- "update React Native version"
- "help me upgrade" + app/application/project
- Version transition patterns: "[old] to [new]", "[old] → [new]"
Version Number Formats to Recognize:
- Shorthand: "RN[XX]" (e.g., RN72, RN83, RN90)
- Abbreviated: "RN [X.Y]" or "version [X]"
- Full semantic: "React Native [X.Y.Z]" or "[X.Y]"
- Numeric only: "[X.Y]", "[X.Y.Z]"
- Minimal: "[XX]", ".[XX]"
Pattern Matching Examples (version-agnostic):
- "help me upgrade my application to RN[any_number]"
- "upgrade to React Native [any_version]"
- "I need to migrate from [old_version] to [new_version]"
- "update my app to version [number]"
- "help upgrade to the latest React Native"
- "migrate React Native [any] to [any]"
When Triggered: Read and execute the workflow in 'react_native_for_vega_turn_based_rn_upgrade_workflow.md'
Description: Generic turn-based workflow for React Native version upgrades with intelligent assistance. Supports any version range by discovering available knowledge files. Provides initialization, knowledge loading, automated TODO generation, and interactive step-by-step review with checkpointing and resume support.
When users ask about these topics, read these documents FIRST:
| User Question Contains | Read This Document |
|---|---|
| "re-rendering", "component re-render", "unnecessary renders" | react_native_for_vega_detect_component_rerender.md |
| "memory", "leak" | vega_cli_commands_reference.md |
| "optimization", "improve performance", "make faster" | performance-display.md |
| "build performance", "compilation slow" | react_native_for_vega_app_build_and_install.md |
Document Version: 5.1
Last Updated: Jan 23, 2026
Purpose: AI Agent Implementation Guide for React Native for Vega App development