📺🚀 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.

🌟 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!

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