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

1. Clone the repository:

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

2. Navigate to the project directory:

   cd react-native-multi-tv-app-sample
   

3. Install dependencies:

   npm install --legacy-peer-deps
   

4. 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

Sign up to stay updated with the developer newsletter.

Authors

• @efahsl
• @giolaq

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