Platform Detection

TV Platform Detection

When to Use

• Detecting whether the app is running on a TV device
• Writing platform-specific code for TV vs. mobile
• Configuring Metro for TV-specific file extensions
• Branching logic based on Apple TV vs. Android TV

Platform API

import { Platform } from 'react-native';

// Detect any TV device (Apple TV or Android TV)
const isTV = Platform.isTV;

// Detect specifically Apple TV (tvOS), excluding Android TV
const isAppleTV = Platform.isTVOS;

TV-Specific File Extensions

The template-tv Metro configuration allows Metro to resolve TV-specific source files using special file extensions:

Resolution Order

When enabled, Metro resolves files in this order (example for .tsx):

1. file.ios.tv.tsx or file.android.tv.tsx
2. file.tv.tsx
3. file.ios.tsx or file.android.tsx
4. file.tsx

This works the same way for all standard extensions (.js, .ts, .jsx, etc.) as documented in Metro docs.

Setup

This config is not enabled by default since it impacts bundling performance. It is available for developers who need platform-specific TV code at the file level.

To enable it, see the Metro config example in the template-tv repository.

Common Patterns

Conditional Rendering

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

const MyComponent = () => (
  
    {Platform.isTV ? (
      TV-optimized layout
    ) : (
      Mobile layout
    )}
  
);

Platform-Specific Styles

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    padding: Platform.isTV ? 40 : 16,
    fontSize: Platform.isTV ? 24 : 14,
  },
});

Typescript

Typescript types for TV-specific components and APIs are available in types/public.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: react-native-tvos
• Source: react-native-tvos/skills
• License: MIT

Install and usage instructions live in the source repository linked above.