{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-windows"],"cli":null},"imports":["import App from './App';","import { View, Text, Button } from 'react-native';","import { Platform } from 'react-native';","import { WindowsDatePicker, Flyout } from 'react-native-windows';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}