React Native for Windows

0.82.3 · active · verified Sun Apr 19

React Native for Windows (RNW) is a project maintained by Microsoft that extends the React Native framework to enable development for Universal Windows Platform (UWP) and Win32 applications. It provides a platform-specific rendering layer and native modules, allowing developers to build true native Windows user interfaces using JavaScript and TypeScript. The current stable version, 0.82.3, targets React Native 0.82.0, ensuring close feature parity with the core framework. Releases often track major React Native versions, with frequent preview and patch updates. Key differentiators include deep integration with Windows APIs and XAML UI components, support for both modern UWP and traditional Win32 desktop apps, and robust tooling for the Windows development environment, providing a pathway for cross-platform apps with a strong native Windows experience.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates a basic React Native Windows application, showcasing standard React Native components alongside a Windows-specific `WindowsDatePicker` to illustrate platform-specific UI integration and conditional rendering.

import React from 'react';
import { AppRegistry, StyleSheet, Text, View, Button, Platform } from 'react-native';
import { WindowsDatePicker } from 'react-native-windows';

const App = () => {
  const [count, setCount] = React.useState(0);
  const [selectedDate, setSelectedDate] = React.useState(new Date());

  return (
    <View style={styles.container}>
      <Text style={styles.header}>React Native Windows App</Text>
      <Text style={styles.welcome}>Welcome to your first Windows app!</Text>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
      {Platform.OS === 'windows' && (
        <View style={styles.windowsSpecific}>
          <Text style={styles.platformText}>Windows-specific UI:</Text>
          <WindowsDatePicker
            date={selectedDate}
            onDateChange={setSelectedDate}
            style={styles.datePicker}
          />
          <Text>Selected Date: {selectedDate.toDateString()}</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  windowsSpecific: {
    marginTop: 20,
    padding: 15,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    alignItems: 'center',
  },
  platformText: {
    fontSize: 16,
    marginBottom: 10,
    fontStyle: 'italic',
  },
  datePicker: {
    width: 200,
    height: 50,
    marginBottom: 10
  }
});

AppRegistry.registerComponent('MyWindowsApp', () => App);

view raw JSON →