{"id":11814,"library":"react-native-windows","title":"React Native for Windows","description":"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.","status":"active","version":"0.82.3","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/microsoft/react-native-windows","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-native-windows","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-windows","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-windows","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the React component model.","package":"react","optional":false},{"reason":"Peer dependency for TypeScript type definitions for React.","package":"@types/react","optional":true},{"reason":"Core React Native framework peer dependency.","package":"react-native","optional":false}],"imports":[{"note":"Common entry point for a React Native application, typically defined in an `App.tsx` or `App.js` file.","symbol":"App","correct":"import App from './App';"},{"note":"Most core components are imported directly from the `react-native` package, as `react-native-windows` provides the native implementation layer.","wrong":"import { View, Text, Button } from 'react-native-windows';","symbol":"View, Text, Button","correct":"import { View, Text, Button } from 'react-native';"},{"note":"Used to conditionally render Windows-specific UI or logic using `Platform.OS === 'windows'`.","symbol":"Platform","correct":"import { Platform } from 'react-native';"},{"note":"Some Windows-specific components and APIs are directly exported by `react-native-windows` for deep platform integration.","symbol":"WindowsDatePicker, Flyout","correct":"import { WindowsDatePicker, Flyout } from 'react-native-windows';"}],"quickstart":{"code":"import React from 'react';\nimport { AppRegistry, StyleSheet, Text, View, Button, Platform } from 'react-native';\nimport { WindowsDatePicker } from 'react-native-windows';\n\nconst App = () => {\n  const [count, setCount] = React.useState(0);\n  const [selectedDate, setSelectedDate] = React.useState(new Date());\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.header}>React Native Windows App</Text>\n      <Text style={styles.welcome}>Welcome to your first Windows app!</Text>\n      <Text>Count: {count}</Text>\n      <Button title=\"Increment\" onPress={() => setCount(count + 1)} />\n      {Platform.OS === 'windows' && (\n        <View style={styles.windowsSpecific}>\n          <Text style={styles.platformText}>Windows-specific UI:</Text>\n          <WindowsDatePicker\n            date={selectedDate}\n            onDateChange={setSelectedDate}\n            style={styles.datePicker}\n          />\n          <Text>Selected Date: {selectedDate.toDateString()}</Text>\n        </View>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  header: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 10,\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: 'center',\n    margin: 10,\n  },\n  windowsSpecific: {\n    marginTop: 20,\n    padding: 15,\n    borderColor: '#ccc',\n    borderWidth: 1,\n    borderRadius: 5,\n    alignItems: 'center',\n  },\n  platformText: {\n    fontSize: 16,\n    marginBottom: 10,\n    fontStyle: 'italic',\n  },\n  datePicker: {\n    width: 200,\n    height: 50,\n    marginBottom: 10\n  }\n});\n\nAppRegistry.registerComponent('MyWindowsApp', () => App);","lang":"typescript","description":"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."},"warnings":[{"fix":"Refer to the official upgrade helper tool and documentation provided by Microsoft for `react-native-windows`. Typically, running `npx react-native upgrade` and then following specific `react-native-windows` upgrade steps for C++/C# projects is required. Pay close attention to changes in project files (`.csproj`, `.vcxproj`) and native module registration.","message":"Upgrading to `react-native-windows` 0.82.x from previous major versions (e.g., 0.81.x) requires careful migration, especially if your project contains native module code or uses deprecated APIs. The project structure and build systems often evolve with major React Native releases.","severity":"breaking","affected_versions":">=0.82.0"},{"fix":"Ensure your development environment uses Node.js version 22 or higher. Use a Node.js version manager like `nvm` (Node Version Manager) to easily switch between versions if needed.","message":"The minimum Node.js version required for `react-native-windows` 0.82.x has been updated to `Node.js >= 22`.","severity":"breaking","affected_versions":">=0.82.0"},{"fix":"Consult the official React Native Windows environment setup guide. Verify that all required Visual Studio components, Windows SDKs, and build tools are installed. Running `react-native-windows-init` (if available for your version) or checking diagnostics can help identify missing prerequisites.","message":"Developing for React Native Windows often requires specific Windows SDKs, Visual Studio workloads (e.g., 'Desktop development with C++', 'Universal Windows Platform development'), and other native development tools to be correctly installed and configured. Missing components can lead to build failures.","severity":"gotcha","affected_versions":">=0.60"},{"fix":"Review the React Native Fabric documentation for Windows and update any custom native modules or highly optimized UI components to align with Fabric's new architecture. Test existing layouts thoroughly, as rendering changes might affect visual fidelity.","message":"The Fabric architecture, a re-architecture of React Native's rendering system, is being progressively adopted. This can introduce changes to how native modules are written and how UI components interact with the native layer, potentially breaking existing native module implementations or causing layout discrepancies.","severity":"breaking","affected_versions":">=0.82.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Open Visual Studio Installer, modify your Visual Studio installation, and ensure the necessary Windows SDK version (e.g., 10.0.19041.0, 10.0.22000.0) is selected and installed under the 'Individual components' tab or via the 'Universal Windows Platform development' workload.","cause":"The specific Windows SDK version required by the project (or defaulted to) is not installed on the development machine.","error":"error MSB8036: The Windows SDK version 10.0.X.0 was not found. Install the required version of Windows SDK or change the SDK version in the project property pages or by right-clicking the solution and selecting 'Retarget solution'."},{"fix":"Examine the detailed output from `msbuild.exe` for specific C++ or C# compiler errors. Ensure Visual Studio workloads are correctly installed, and check for any custom native code or third-party native modules that might be causing issues. Try cleaning and rebuilding the solution from Visual Studio directly to get more immediate feedback.","cause":"A generic build failure often due to incorrect Visual Studio configuration, missing dependencies, or C++/C# compilation errors within the native project.","error":"Error: Command failed: msbuild.exe build\\MyApp.sln /p:Configuration=Debug /p:Platform=x64 ..."},{"fix":"Verify that your `AppRegistry.registerComponent('YourAppName', () => App)` call is present and correct in your entry file. Ensure that 'YourAppName' matches the name specified when your React Native Windows project was initialized, typically found in `app.json` and the native project configuration.","cause":"The `AppRegistry.registerComponent` call in your `index.js` (or similar entry file) either isn't being executed, or the module name provided doesn't match the name expected by the native host.","error":"Invariant Violation: 'main' has not been registered. This can happen if:"}],"ecosystem":"npm"}