2025-08-02 13:51:15 +05:30

3.8 KiB

Raw Blame History

Nuvio TV Setup Guide

This project has been configured to support both mobile (Android/iOS) and TV (Android TV/Apple TV) platforms using React Native TV.

Prerequisites

For Apple TV Development

Xcode with tvOS SDK 17 or later
Install tvOS SDK: xcodebuild -downloadAllPlatforms
Apple TV simulator or physical Apple TV device

For Android TV Development

Android Studio with Android TV emulator
Android TV device or emulator with API level 24+

Key Changes Made

React Native TV Package: Replaced react-native with react-native-tvos package
TV Config Plugin: Added @react-native-tvos/config-tv plugin for automatic TV configuration
Removed expo-dev-client: Not supported on TV platforms
EAS Build Configuration: Added TV-specific build profiles
Package.json Scripts: Added TV-specific development commands

Development Commands

Mobile Development (Original)

npm run start          # Start Expo development server
npm run ios            # Run on iOS simulator
npm run android        # Run on Android emulator

TV Development

npm run start:tv       # Start Expo development server for TV
npm run ios:tv         # Run on Apple TV simulator
npm run android:tv     # Run on Android TV emulator
npm run prebuild:tv    # Clean prebuild for TV platforms

Building for TV

Local Development

Set the environment variable: export EXPO_TV=1
Run prebuild: npm run prebuild:tv
Start development: npm run start:tv
Run on TV simulator: npm run ios:tv or npm run android:tv

EAS Build

Use the TV-specific build profiles:

# Development builds for TV
eas build --profile development_tv --platform ios
eas build --profile development_tv --platform android

# Production builds for TV
eas build --profile production_tv --platform ios
eas build --profile production_tv --platform android

TV-Specific Considerations

The app uses React Navigation which works well with TV focus management
TV remote navigation is handled automatically
Consider adding hasTVPreferredFocus prop to important UI elements

UI/UX Adaptations

Bottom tab navigation works on TV but consider if it's optimal for TV UX
Video player controls should work well with TV remotes
Consider larger touch targets for TV interaction

Unsupported Features on TV

expo-dev-client - Development client not supported
expo-router - File-based routing not supported on TV
Some Expo modules may not work on TV platforms

Focus Management

For better TV experience, you may want to add focus management:

import { Platform } from 'react-native';

// Add TV-specific focus handling
const isTV = Platform.isTV;

<TouchableOpacity
  hasTVPreferredFocus={isTV}
  tvParallaxProperties={{
    enabled: true,
    shiftDistanceX: 2.0,
    shiftDistanceY: 2.0,
  }}
>
  {/* Your content */}
</TouchableOpacity>

Testing

Apple TV

Use Apple TV simulator in Xcode
For physical device: Long press play/pause button for dev menu
Don't shake the Apple TV device (it won't work!)

Android TV

Use Android TV emulator in Android Studio
Dev menu behavior same as Android phone
Expo dev menu is not supported on TV

Troubleshooting

Common Issues

Build errors: Make sure you've run npm run prebuild:tv with EXPO_TV=1
Navigation issues: TV navigation uses focus-based system, not touch
Missing dependencies: Some mobile-specific packages may not work on TV

Environment Variables

Always set EXPO_TV=1 when developing for TV:

export EXPO_TV=1
# Then run your commands
npm run start

3.8 KiB Raw Blame History