📺🚀 React Native Multi-TV App Sample

A versatile TV app developed in React Native, compatible with Android TV, Fire TV, tvOS, and Web. This sample project showcases best practices for TV app UI design and implementation.

Demo GIF

🌟 Features

📱 Multi-platform support: Android TV, Fire TV, tvOS, and web
🎨 Customizable left-side drawer navigation (using Expo Drawer)
🖼️ Grid layout for content selection
🦸‍♂️ Dynamic hero image header that follows the focused card
🎬 Detailed content screen
🎥 Video player with react-native-video Thank you @moskalakamil
🎯 Efficient focus management with React TV Space Navigation
🔧 Fully customizable screens and components

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or later)
npm
JDK 17

🚀 Quick Start

Clone the repository:

git clone https://github.com/amazonappdev/react-native-multi-tv-app-sample.git

Navigate to the project directory:
```
cd react-native-multi-tv-app-sample
```
Install dependencies:
```
npm install --legacy-peer-deps
```
Prebuild the native project optimized for TV:
```
export EXPO_TV=1; npx expo prebuild 
```

📱 Running on Different Platforms

Android TV / Fire TV

Ensure you have an Android TV emulator set up or a physical device connected.
Run npx expo run:android --device <Your Device or Emulator> to build and install the app.

tvOS

Make sure you have Xcode installed with tvOS Simulator.
Run npx expo run:ios to build and install the app on the tvOS Simulator.

Web

Run npx expo start --web to start the app in your default web browser.
Run npx expo export -p web if you want to build the app for web. After a successful build all the needed files for web will be in the dist directory

🛠️ Customization

Drawer Navigation: Modify ./components/CustomDrawerContent.tsx to customize the left-side menu.
Content Grid: Adjust ./app/(drawer)/index.tsx to change the layout or style of the content cards.
Detail Screen: Customize ./app/details.tsx for different content details display options.
Video Player: Enhance ./app/player.tsx to customize the Video Player Screen

Stay Tuned for more!

📚 Key Frameworks and Libraries Used

Expo
Expo Drawer
React TV Space Navigation for Focus Management, Remote control mapping and content lists.

Get support

If you found a bug or want to suggest a new [feature/use case/sample], please file an issue.

If you have questions, comments, or need help with code, we're here to help:

Join the Amazon Developer community
on Twitter at @AmazonAppDev
on Stack Overflow at the amazon-appstore tag

Authors

📄 License

This project is licensed under the MIT-0 License.

Happy coding! 🎉 We hope this sample helps you create amazing TV experiences across multiple platforms!

AmazonAppDev / react-native-multi-tv-app-sample

readme