Anime.io TV 📺

A modern TV application for discovering and browsing anime, built with cutting-edge React Native technologies.

🎯 Project Overview

This is an experimental TV app for watching anime, currently featuring anime discovery and detail screens. The project serves as a playground for exploring the latest React Native TV capabilities with modern tooling.

Current Status: 🚧 Early Development

• ✅ Anime discovery/browsing interface
• ✅ Anime detail screens
• ⏳ Video player (planned)

🛠️ Tech Stack

This project showcases modern React Native development with:

Core Technologies

• Expo SDK 54 - Latest Expo version for universal app development
• React 19 - Latest React with new features
• React Native TV fork - TV platform support (Apple TV & Android TV)
• Expo Router 6 - File-based routing for React Native

Styling

• Uniwind (Beta) - The fastest Tailwind bindings for React Native
• Tailwind CSS v4 - Latest Tailwind with native CSS support
• Global CSS - Modern styling with CSS variables and custom themes

Backend & Data

• Firebase/Firestore - Cloud database for anime data
• TanStack Query v5 - Powerful data fetching and caching

UI & Utilities

• Expo Image - Optimized image component
• React Native Reanimated - Smooth animations
• @legendapp/list - High-performance lists
• clsx + tailwind-merge - Utility for conditional classes

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm (or npm/yarn)
• Xcode (for Apple TV development)
• Android Studio (for Android TV development)

Installation

# Clone the repository
git clone <your-repo-url>
cd animeio-tv

# Install dependencies
pnpm install

Development

For TV Development:

# Start the development server (TV mode enabled by default)
pnpm start

# Run on Apple TV
pnpm ios

# Run on Android TV
pnpm android

📁 Project Structure

src/
├── app/                    # Expo Router pages
│   ├── index.tsx          # Home/Discovery screen
│   ├── anime/             # Anime detail pages
│   └── _layout.tsx        # Root layout
├── modules/
│   ├── anime/             # Anime-related components and logic
│   ├── discovery/         # Discovery/browse features
│   └── components/        # Shared UI components
├── libs/
│   ├── firebase/          # Firebase configuration
│   └── firestore/         # Firestore utilities
├── constants/             # App constants and configs
├── types/                 # TypeScript type definitions
└── utils/                 # Utility functions

🎨 Styling with Uniwind

This project uses Uniwind, a beta Tailwind CSS implementation for React Native that offers:

• Near-native performance - Faster than NativeWind
• Tailwind v4 support - Latest Tailwind features
• Global CSS - Standard CSS with custom properties
• Full TypeScript support - Complete type safety

Example usage:

import { View, Text } from 'react-native';

export default function Component() {
  return (
    <View className="flex-1 bg-slate-900 p-4">
      <Text className="text-2xl font-bold text-white">
        Hello Uniwind!
      </Text>
    </View>
  );
}

🔥 Firebase Setup

1. Create a Firebase project at firebase.google.com
2. Add your configuration files:
   • iOS: ios/animeiotv/GoogleService-Info.plist
   • Android: android/app/google-services.json
3. Configure Firestore with your anime data structure

📺 TV-Specific Features

Focus Management

The app uses React Native TV APIs for handling remote control navigation and focus management on TV interfaces.

🔮 Roadmap

• Video player integration
• Add cursor based pagination
• Episode list and tracking
• Search functionality
• Favorites/watchlist
• Multiple anime sources
• User authentication
• Viewing history

📚 Learn More

• Expo Documentation
• Uniwind Documentation
• React Native TV
• TanStack Query
• Firebase Firestore

📄 License

This project is for experimental and educational purposes.

---

Built with ❤️ using the latest React Native technologies