SettingsEnviroment setup

Setting Up Your TV App Development Environment

VSCode
💡

This guide will walk you through setting up a complete development environment for building TV apps using React Native. Make sure to follow each step carefully to ensure a smooth setup process.

Prerequisites

Before we begin, let’s ensure you have all the necessary software installed.

Node.js and npm

  • Required version: 14.x or later
  • npm comes bundled with Node.js

Installation:

ℹ️

Verify your installations by running these commands in your terminal:

node --version
npm --version
java --version

Each command should return a version number if properly installed.

Project Setup

Clone the Repository

Open your terminal and navigate to your desired project directory:

cd <your directory>
git clone https://github.com/AmazonAppDev/react-native-multi-tv-app-sample.git
cd react-native-multi-tv-app-sample

Install Dependencies

Run the following command to install project dependencies:

npm install --legacy-peer-deps
⚠️

We’re using --legacy-peer-deps to bypass dependency conflicts. While this approach works for our workshop, in a production environment, you should resolve these conflicts properly.

Verify Setup

After cloning and installing dependencies, you should see the following project structure:

      • index.js
      • App.js
    • package.json
    • README.md
    • .gitignore
ℹ️

This is the basic structure of your TV app project. Each folder serves a specific purpose:

  • app: Contains the main application code
  • components: Reusable UI components
  • assets: Static resources like images and fonts

Troubleshooting Guide

🚫

If you encounter setup issues, try these common solutions:

  • Verify all prerequisites are correctly installed
  • Confirm you’re in the correct directory
  • Delete node_modules folder and run npm install --legacy-peer-deps again
🎯

Success Checkpoint: At this point, you should have:

  • All required software installed
  • Project repository cloned
  • Dependencies installed
  • Project structure visible in your code editor matching the file tree above
Project IntroductionPrebuild