You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>Examples can be found in the <ahref="https://github.com/microsoft/react-native-gallery/blob/main/src/examples/FlyoutExamplePage.tsx">React Native Gallery App</a> available in the <ahref="http://aka.ms/reactnativegalleryapp">Microsoft Store</a></p>
169
+
<p>Examples can be found in the <ahref="https://github.com/microsoft/react-native-gallery/blob/main/src/examples/FlyoutExamplePage.tsx">React Native Gallery App</a> available in the <ahref="https://apps.microsoft.com/detail/9NPG0B292H4R">Microsoft Store</a></p>
170
170
</span></div></article></div><divclass="docLastUpdate"><em>Last updated on 11/5/2025</em></div><divclass="docs-prevnext"><aclass="docs-next button" href="/react-native-windows/docs/glyph-component"><span>Glyph</span><spanclass="arrow-next"> →</span></a></div></div></div><navclass="onPageNav"><ulclass="toc-headings"><li><ahref="#props">Props</a><ulclass="toc-headings"><li><ahref="#horizontaloffset"><code>horizontalOffset</code></a></li><li><ahref="#verticaloffset"><code>verticalOffset</code></a></li><li><ahref="#islightdismissenabled"><code>isLightDismissEnabled</code></a></li><li><ahref="#isoverlayenabled"><code>isOverlayEnabled</code></a></li><li><ahref="#isopen"><code>isOpen</code></a></li><li><ahref="#ondismiss"><code>onDismiss</code></a></li><li><ahref="#target"><code>target</code></a></li><li><ahref="#placement"><code>placement</code></a></li></ul></li><li><ahref="#examples">Examples</a></li></ul></nav></div><footerclass="nav-footer" id="footer"><sectionclass="sitemap"><div><h5>React Native Docs</h5><ahref="https://reactnative.dev/docs/getting-started">Getting Started</a><ahref="https://reactnative.dev/docs/tutorial">Tutorial</a><ahref="https://reactnative.dev/docs/components-and-apis">Components and APIs</a><ahref="https://reactnative.dev/docs/more-resources">More Resources</a></div><div><h5>React Native for Windows Docs</h5><divstyle="color:white;font-weight:500;font-size:16px"><ahref="/react-native-windows/docs/getting-started">Get Started with Windows</a></div><ahref="/react-native-windows/docs/parity-status">React Native Windows Components and APIs</a><ahref="/react-native-windows/docs/native-modules">Native Modules</a><ahref="/react-native-windows/docs/view-managers">Native UI Components</a></div><div><h5>Connect With Us On</h5><ahref="https://devblogs.microsoft.com/react-native/">Blog</a><ahref="https://twitter.com/ReactNativeMSFT" target="_blank">Twitter</a><ahref="https://github.com/microsoft/react-native-windows" target="_blank">GitHub</a><ahref="https://github.com/microsoft/react-native-windows-samples/tree/main/samples" target="_blank">Samples</a></div></section></footer></div></body></html>
<p>Examples can be found in the <ahref="https://github.com/microsoft/react-native-gallery/blob/main/src/examples/FlyoutExamplePage.tsx">React Native Gallery App</a> available in the <ahref="http://aka.ms/reactnativegalleryapp">Microsoft Store</a></p>
169
+
<p>Examples can be found in the <ahref="https://github.com/microsoft/react-native-gallery/blob/main/src/examples/FlyoutExamplePage.tsx">React Native Gallery App</a> available in the <ahref="https://apps.microsoft.com/detail/9NPG0B292H4R">Microsoft Store</a></p>
170
170
</span></div></article></div><divclass="docLastUpdate"><em>Last updated on 11/5/2025</em></div><divclass="docs-prevnext"><aclass="docs-next button" href="/react-native-windows/docs/glyph-component"><span>Glyph</span><spanclass="arrow-next"> →</span></a></div></div></div><navclass="onPageNav"><ulclass="toc-headings"><li><ahref="#props">Props</a><ulclass="toc-headings"><li><ahref="#horizontaloffset"><code>horizontalOffset</code></a></li><li><ahref="#verticaloffset"><code>verticalOffset</code></a></li><li><ahref="#islightdismissenabled"><code>isLightDismissEnabled</code></a></li><li><ahref="#isoverlayenabled"><code>isOverlayEnabled</code></a></li><li><ahref="#isopen"><code>isOpen</code></a></li><li><ahref="#ondismiss"><code>onDismiss</code></a></li><li><ahref="#target"><code>target</code></a></li><li><ahref="#placement"><code>placement</code></a></li></ul></li><li><ahref="#examples">Examples</a></li></ul></nav></div><footerclass="nav-footer" id="footer"><sectionclass="sitemap"><div><h5>React Native Docs</h5><ahref="https://reactnative.dev/docs/getting-started">Getting Started</a><ahref="https://reactnative.dev/docs/tutorial">Tutorial</a><ahref="https://reactnative.dev/docs/components-and-apis">Components and APIs</a><ahref="https://reactnative.dev/docs/more-resources">More Resources</a></div><div><h5>React Native for Windows Docs</h5><divstyle="color:white;font-weight:500;font-size:16px"><ahref="/react-native-windows/docs/getting-started">Get Started with Windows</a></div><ahref="/react-native-windows/docs/parity-status">React Native Windows Components and APIs</a><ahref="/react-native-windows/docs/native-modules">Native Modules</a><ahref="/react-native-windows/docs/view-managers">Native UI Components</a></div><div><h5>Connect With Us On</h5><ahref="https://devblogs.microsoft.com/react-native/">Blog</a><ahref="https://twitter.com/ReactNativeMSFT" target="_blank">Twitter</a><ahref="https://github.com/microsoft/react-native-windows" target="_blank">GitHub</a><ahref="https://github.com/microsoft/react-native-windows-samples/tree/main/samples" target="_blank">Samples</a></div></section></footer></div></body></html>
Copy file name to clipboardExpand all lines: docs/getting-started.html
+17-22Lines changed: 17 additions & 22 deletions
Original file line number
Diff line number
Diff line change
@@ -64,17 +64,11 @@
64
64
<p>This guide will help you get started on setting up your very first React Native for Windows app.</p>
65
65
<p>Make sure you have installed all of the <ahref="/react-native-windows/docs/rnw-dependencies">development dependencies</a>.</p>
66
66
<p>For information around how to set up React Native, see the <ahref="https://reactnative.dev/docs/getting-started">React Native Getting Started Guide</a>.</p>
67
-
<blockquote>
68
-
<p><strong>Interested in migrating to <ahref="https://reactnative.dev/architecture/landing-page">React Native's New Architecture</a>?</strong> New Architecture support in React Native for Windows is now available to preview in 0.76. Note there are several key changes, so if you’d like to be an early adopter, check out the information in the <ahref="/react-native-windows/docs/new-architecture">New Architecture Guide</a>.</p>
<p><strong>Prerequisites:</strong> Before creating your React Native for Windows project, ensure you have completed all the <ahref="/react-native-windows/docs/rnw-dependencies">development dependencies setup</a>. This includes installing Visual Studio with the required workloads, Windows SDK, Node.js, and other essential tools.</p>
73
-
</blockquote>
74
68
<p>Call the following from the place where you want your project directory to live:</p>
75
-
<!-- Note, make sure both `@react-native-community/cli@ABC` and `--version "XYZ"` are pointing to the correct NPM tags in the command below. -->
76
-
<!-- 1. For the next version (i.e. in docs/getting-started.md) use "next" for the CLI and "nightly" for the RN version -->
77
-
<!-- 2. For stable versions in versioned_docs use "latest" for the CLI and the semantic version, i.e. "^0.73.0" for the RN version -->
69
+
<!-- Note, make sure both `@react-native-community/cli@ABC` and `--version XYZ` are pointing to the correct NPM tags in the command below. -->
70
+
<!-- 1. For the next version (i.e. in docs/getting-started.md) use `next` for the CLI and `nightly` for the RN version -->
71
+
<!-- 2. For stable versions in versioned_docs use `latest` for the CLI and the semantic version, i.e. `^0.73.0` for the RN version -->
78
72
<!-- See https://www.npmjs.com/package/@react-native-community/cli?activeTab=versions for the CLI version tags. -->
79
73
<!-- See https://www.npmjs.com/package/react-native?activeTab=versions for the RN version tags. -->
<!-- Note, make sure "version" is pointing to the correct react-native-windows NPM tag in the command below. -->
88
-
<!-- 1. For the next version (i.e. in docs/getting-started.md) use "canary" -->
89
-
<!-- 2. For other versions in versioned_docs use the version in the format "^0.XY.0" -->
90
-
<p>Next you'll want to add <code>react-native-windows</code> as a dependency. This step adds the React Native for Windows platform-specific implementation to your project, which provides the Windows-specific native components, modules, and build tools needed to run your React Native app on Windows.</p>
91
-
<divclass="tabs"><divclass="nav-tabs"><divid="tab-group-50-tab-51" class="nav-link active" data-group="group_50" data-tab="tab-group-50-content-51">Using Yarn (Recommended)</div><divid="tab-group-50-tab-52" class="nav-link" data-group="group_50" data-tab="tab-group-50-content-52">Using NPM</div></div><divclass="tab-content"><divid="tab-group-50-content-51" class="tab-pane active" data-group="group_50" tabindex="-1"><div><span><p>This command uses Yarn to add the React Native for Windows package to your project's dependencies. Yarn provides faster and more reliable dependency management:</p>
</span></div></div><divid="tab-group-50-content-52" class="tab-pane" data-group="group_50" tabindex="-1"><div><span><p>This command uses NPM to install and save the React Native for Windows package to your project's dependencies. The <code>--save</code> flag ensures the package is added to your <code>package.json</code> file:</p>
<p>Lastly, initialize the React Native for Windows application with the <ahref="/react-native-windows/docs/init-windows-cli">init-windows command</a>. This command generates the Windows-specific native project files, including Visual Studio solution files, C++ or C# project templates, and platform-specific configuration needed to build and run your app on Windows:</p>
89
+
<p>Lastly, initialize the React Native for Windows application with the <ahref="/react-native-windows/docs/init-windows-cli">init-windows command</a>:</p>
<p><strong>Note:</strong> RNW templates contain a customized <code>metro.config.js</code> file, which is meant to merge cleanly into the default config provided by the standard React Native project template. If you are starting a new app, overwriting <code>metro.config.js</code> should have no impact. However, if you are adding Windows to an existing app with an already modified <code>metro.config.js</code> file, please make sure to back up and re-apply your modifications after adding RNW.</p>
93
+
<p><strong>Architecture Note:</strong> The default React Native for Windows template for <em>new</em> projects targets <ahref="https://reactnative.dev/architecture/landing-page">React Native's New Architecture</a>. For more information, including options for continuing to use the Old Architecture, see <ahref="/react-native-windows/docs/new-architecture">New vs. Old Architecture</a>.</p>
94
+
</blockquote>
95
+
<blockquote>
96
+
<p><strong>Metro Note:</strong> React Native Windows overwrites the app project's <code>metro.config.js</code> file to enable Windows support. If you are starting a new project, overwriting React Native's default <code>metro.config.js</code> should have no impact. However, if you have previously modified your <code>metro.config.js</code> file, please make sure to back up and re-apply your modifications after adding React Native Windows.</p>
<li>Run <code>yarn start</code> (or <code>npm start</code>) from your project directory, and wait for the React Native packager to report success.</li>
122
117
<li>Click the <code>Run</code> button to the right of the platform combo box control in VS, or select the <code>Debug</code>-><code>Start without Debugging</code> menu item. You now see your new app and Chrome should have loaded <code>http://localhost:8081/debugger-ui/</code> in a new tab. Press <code>F12</code> or <code>Ctrl+Shift+I</code> in Chrome to open its Developer Tools. :tada:</li>
123
118
</ul></li>
124
-
<li><p>With Visual Studio Code</p>
119
+
<li><p>With VS Code</p>
125
120
<ul>
126
-
<li>Open your applications folder in Visual Studio Code.</li>
127
-
<li>Install the <ahref="https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native">React Native Tools</a> plugin for Visual Studio Code.</li>
121
+
<li>Open your applications folder in VS Code.</li>
122
+
<li>Install the <ahref="https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native">React Native Tools</a> plugin for VS Code.</li>
128
123
<li>Create a new file in the applications root directory, <code>.vscode/launch.json</code> and paste the following configuration:</li>
0 commit comments