Skip to main content

​
Out-of-Tree Platforms

React Native supports platforms beyond iOS and Android through out-of-tree platform implementations. These platforms are maintained separately from the core React Native repository.

​
Supported Out-of-Tree Platforms

React Native can run on multiple platforms:
  • Windows - React Native for Windows
  • macOS - React Native for macOS
  • Web - React Native Web
  • Android TV - TV-specific Android implementation
  • tvOS - Apple TV platform
  • VisionOS - Apple Vision Pro

​
Architecture Overview

Out-of-tree platforms work by:
  1. Implementing platform-specific native components
  2. Providing platform-specific modules and APIs
  3. Maintaining compatibility with React Native core
  4. Supporting the same JavaScript API surface

​
React Native for Windows

Run React Native apps on Windows 10+ and Windows 11.

​
Installation

npx react-native@latest init MyApp
cd MyApp
npx react-native-windows-init --overwrite

​
Requirements

  • Windows 10 version 1809 (build 17763) or higher
  • Visual Studio 2022 with UWP workload
  • Node.js
  • React Native CLI

​
Running on Windows

npx react-native run-windows

​
Platform-Specific Code

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      windows: {
        backgroundColor: '#0078D4',
      },
      default: {
        backgroundColor: '#fff',
      },
    }),
  },
});

​
React Native for macOS

Build native macOS applications using React Native.

​
Installation

npx react-native@latest init MyApp
cd MyApp
npx react-native-macos-init

​
Requirements

  • macOS 10.15 (Catalina) or higher
  • Xcode 13 or higher
  • CocoaPods
  • Node.js

​
Running on macOS

npx react-native run-macos

​
Podspec Configuration

macOS apps use similar Podspec configuration to iOS: 
require_relative '../node_modules/react-native-macos/scripts/react_native_pods'

platform :osx, '10.15'

target 'YourApp-macOS' do
  use_native_modules!
  
  use_react_native!(
    :path => '../node_modules/react-native-macos'
  )
end

​
React Native Web

Run React Native apps in web browsers.

​
Installation

npm install react-native-web react-dom

​
Webpack Configuration

module.exports = {
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
    extensions: ['.web.js', '.js', '.json'],
  },
};

​
Web-Specific Components

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

const App = () => (
  <View>
    <Text accessibilityRole="header" accessibilityLevel={1}>
      Welcome to React Native Web
    </Text>
  </View>
);

​
TV Platforms (tvOS and Android TV)

Build apps for television platforms.

​
Platform Detection

import { Platform } from 'react-native';

if (Platform.isTV) {
  // TV-specific code
}

if (Platform.OS === 'android' && Platform.isTV) {
  // Android TV specific
}

if (Platform.OS === 'ios' && Platform.isTV) {
  // tvOS specific
}

​
Focus Management

TV apps require focus management: 
import { View, Text, TouchableOpacity } from 'react-native';

const TVButton = () => (
  <TouchableOpacity
    hasTVPreferredFocus={true}
    tvParallaxProperties={{
      enabled: true,
      shiftDistanceX: 2,
      shiftDistanceY: 2,
      tiltAngle: 0.05,
      magnification: 1.1,
    }}
  >
    <Text>Focus on this button</Text>
  </TouchableOpacity>
);

​
Remote Control Events

import { TVEventHandler } from 'react-native';

class RemoteControlExample extends React.Component {
  componentDidMount() {
    this.tvEventHandler = new TVEventHandler();
    this.tvEventHandler.enable(this, (cmp, evt) => {
      if (evt && evt.eventType === 'select') {
        // Handle select button
      }
    });
  }
  
  componentWillUnmount() {
    if (this.tvEventHandler) {
      this.tvEventHandler.disable();
      delete this.tvEventHandler;
    }
  }
}

​
VisionOS (Apple Vision Pro)

Build spatial computing apps for Apple Vision Pro.

​
Setup

cd ios
pod install
Update Podfile for VisionOS: 
platform :visionos, '1.0'

target 'YourApp-visionOS' do
  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true
  )
end

​
Spatial Components

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

const SpatialView = () => (
  <View
    style={{
      transform: [{ translateZ: 100 }],
    }}
  >
    <Text>Content in 3D space</Text>
  </View>
);

​
Creating Custom Platforms

You can create your own out-of-tree platform implementation:
1

Fork React Native core

Start with the React Native core architecture and adapt it for your platform.
2

Implement platform natives

Create platform-specific implementations of:
  • Native components (View, Text, Image, etc.)
  • Native modules (AsyncStorage, Networking, etc.)
  • JavaScript runtime integration
3

Create build tooling

Develop build scripts and configuration for your platform:
npx react-native run-myplatform
4

Maintain compatibility

Keep your platform up-to-date with React Native core releases.

​
Platform-Specific Code Patterns

​
Using Platform Module

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

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: { paddingTop: 20 },
      android: { paddingTop: 0 },
      windows: { paddingTop: 10 },
      macos: { paddingTop: 15 },
      web: { paddingTop: 0 },
      default: { paddingTop: 0 },
    }),
  },
});

​
File Extensions

Use platform-specific file extensions: 
Component.js          // All platforms
Component.ios.js      // iOS only
Component.android.js  // Android only
Component.windows.js  // Windows only
Component.macos.js    // macOS only
Component.web.js      // Web only
Component.native.js   // All native platforms

​
Platform Version Checking

if (Platform.OS === 'android' && Platform.Version >= 31) {
  // Android 12+ specific code
}

if (Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 15) {
  // iOS 15+ specific code
}

​
Native Dependencies

Out-of-tree platforms may require platform-specific dependencies: 
{
  "dependencies": {
    "react-native": "^1000.0.0",
    "react-native-windows": "^0.75.0",
    "react-native-macos": "^0.75.0"
  }
}

​
Community Resources

​
Best Practices

  1. Abstract Platform Logic: Keep platform-specific code isolated
  2. Test on All Platforms: Ensure consistent behavior across platforms
  3. Use Feature Detection: Check for feature availability rather than platform
  4. Follow Platform Guidelines: Respect each platform’s design patterns
  5. Monitor Compatibility: Stay updated with React Native core changes

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us