TV App Project Structure
🏗️
Understanding the project structure is crucial for efficient development and maintenance of your TV app. We’ll explore the organization of our react-native-multi-tv-app-sample project.
Project Structure Overview
- _layout.tsx
- index.tsx
- explore.tsx
- tv.tsx
- +html.tsx
- +not-found.tsx
- _layout.tsx
- configureRemoteControl.ts
- details.tsx
- player.tsx
- CustomDrawerContent.tsx
- MenuContext.tsx
- useScale.ts
Key Directories and Their Purposes
app/ Directory
The heart of our application containing main screens and logic.
📱
Key areas in the app directory:
- (drawer)/ - Main screens and drawer navigation setup
- remote-control/ - TV remote control input handling
- Root files - App-wide layouts and configurations
components/ Directory
Reusable React components used throughout the app.
🧩
Key components:
- CustomDrawerContent.tsx - Drawer navigation content
- MenuContext.tsx - Menu state management
hooks/ Directory
Custom React hooks for the application.
🎣
Key hook:
- useScale.ts - Handles responsive design for different TV screen sizes
assets/ Directory
Static assets like images and fonts.
With our understanding of the project structure, we’re ready to understand more the TV-specific features and customize our app’s behavior in the next section.