Skip to content

Commit e7f501b

Browse files
jonthyselljonthysell
authored
Add note about Old and New Architectures to relevant docs (#1029)
## Description This PR adds a notice to the top of every relevant page that is either clearly: 1. *Old Architecture Only*: doc is for Old Architecture features not planned/supported in the New Arch 2. *Architecture Review Needed*: doc may or may not apply to in the new architecture and therefore needs further review. I've also added the appropriate tag on every page: ![Architecture](https://img.shields.io/badge/architecture-new_&_old-green) ![Architecture](https://img.shields.io/badge/architecture-new_only-blue) ![Architecture](https://img.shields.io/badge/architecture-old_only-yellow) ![Architecture](https://img.shields.io/badge/architecture-needs_review-red) ### Why Lots of things change with the migration to the New Architecture, and we want to give some warning about docs that may be out of date while we sort out which to update, which to deprecate, etc. Resolves #1014 ## Screenshots N/A ###### Microsoft Reviewers: [Open in CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/microsoft/react-native-windows-samples/pull/1029)
1 parent dfb88a6 commit e7f501b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+159
-2
lines changed

‎docs/app-publishing.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: app-publishing
33
title: Publishing a React Native Windows App to the Microsoft Store
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
## Steps to Publish a React Native Windows App to the Microsoft Store
711
These are the steps to follow if you are looking to publish a React Native Windows app as a third party to the Microsoft Store. Since React Native Windows apps are Universal Windows Platform (UWP) apps, you can also see [Publish Windows apps - UWP applications | Microsoft Docs](https://docs.microsoft.com/windows/uwp/publish/) for all kinds of documentation on the UWP app publishing process.
812

‎docs/autolink-windows-cli.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: autolink-windows-cli
33
title: react-native autolink-windows
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-new_&_old-green)
7+
68
This guide will give you more information on the `autolink-windows` command of the React Native Windows CLI.
79

810
## `autolink-windows`

‎docs/codegen-windows-cli.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: codegen-windows-cli
33
title: react-native codegen-windows
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-new_&_old-green)
7+
68
This guide will give you more information on the `codegen-windows` command of the React Native Windows CLI.
79

810
## `codegen-windows`

‎docs/config.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: config
33
title: React Native Config Schema
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
The CLI command [`npx react-native config`](https://github.com/react-native-community/cli/blob/master/docs/commands.md#config) outputs project and dependencies configuration in JSON format to `stdout`.
711

812
The following describes the schema for projects and dependencies provided by React Native for Windows.

‎docs/customizing-SDK-versions.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: customizing-sdk-versions
33
title: Customizing SDK versions
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
It is easy for an app to customize which versions of the Windows SDK and WinUI 2.x to use.
711

812
### Details

‎docs/debugging-javascript.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: debugging-javascript
33
title: JavaScript Debugging
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
This page details how to debug the JavaScript code in your RNW applications, including which tools are supported in which scenarios. You have two different options: *Direct Debugging* and *Web Debugging*.
711

812
> Unless stated otherwise, each of the debugging scenarios detailed below assume you're loading your JS bundle from the Metro Packager, not loading a prebuilt bundle file.

‎docs/flyout-component-windows.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: flyout-component
33
title: Flyout
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-old_only-yellow)
7+
8+
> **Old Architecture Only:** This documentation describes a feature only supported by React Native's "Old" or "Legacy" Architecture. We are still in the progress of updating all of the documentation, but in the meantime, for information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
# Reference
711

812
## Props

‎docs/getting-started.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: getting-started
33
title: Get Started with Windows
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-new_&_old-green)
7+
68
This guide will help you get started on setting up your very first React Native for Windows app.
79

810
Make sure you have installed all of the [development dependencies](rnw-dependencies.md).

‎docs/glyph-component-windows.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: glyph-component
33
title: Glyph
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-old_only-yellow)
7+
8+
> **Old Architecture Only:** This documentation describes a feature only supported by React Native's "Old" or "Legacy" Architecture. We are still in the progress of updating all of the documentation, but in the meantime, for information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
# Reference
711

812
## Props

‎docs/hermes.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: hermes
33
title: Hermes on Windows + macOS
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-new_&_old-green)
7+
68
# Hermes
79

810
The [Hermes](https://hermesengine.dev/) engine is an open source JavaScript engine created by Facebook to optimize building and running React Native applications.

‎docs/ikeyboardprops-api-windows.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: ikeyboardprops-api
33
title: IKeyboardProps
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
When developing for a Windows device, the likelihood of you needing to support a rich keyboarding experience in your app is very high - this API allows you to customize and control how keyboarding works on your custom or native components.
711

812
```

‎docs/init-windows-cli.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: init-windows-cli
33
title: react-native init-windows
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-new_&_old-green)
7+
68
This guide will give you more information on the `init-windows` command of the React Native Windows CLI.
79

810
## `init-windows`

‎docs/iviewwindowsprops-api-windows.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: iviewwindowsprops-api
33
title: IViewWindowsProps
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
This extends the [View Props](https://reactnative.dev/docs/view#props) and [`IKeyboardProps`](ikeyboardprops-api-windows.md) APIs.
711

812
# Reference

‎docs/managing-cpp-deps.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: managing-cpp-deps
33
title: Managing C++ dependencies
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
Details to consider when consuming community modules or other Visual C++ projects.
711

812
### Details

‎docs/metro-config-out-tree-platforms.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: metro-config-out-tree-platforms
33
title: Metro config for out of tree platforms
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-new_&_old-green)
7+
68
How to setup and diagnose issues with metro config for `react-native-macos` and `react-native-windows`. Many of the instructions within this document may refer just to `react-native-windows`, but the steps apply to `react-native-macos` in the same way.
79

810
# Version requirements

‎docs/native-code-language-choice.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-code-language-choice
33
title: Choosing C++ or C# for native code
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
React Native for Windows supports writing native code in both C++ and C#, but there are trade-offs with each language. The choice of language can impact the compatibility, developer experience, and performance of your project. So whether you're building an app or native module, you should choose the native language that best meets your requirements.
711

812
> **Note**: In this document, C++ refers specifically to C++/WinRT.

‎docs/native-code.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-code
33
title: Working with native code on Windows
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
## What is a React Native for Windows app?
711

812
When you create a React Native for Windows app targeting React Native's old architecture, you will get a [Universal Windows Platform app](https://docs.microsoft.com/windows/uwp/get-started/universal-application-platform-guide) (aka UWP app).

‎docs/native-modules-advanced.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules-advanced
33
title: Native Modules (Advanced)
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
>**This documentation and the underlying platform code is a work in progress.**
711
>**Examples (C# and C++/WinRT):**
812
> - [Native Module Sample in `microsoft/react-native-windows-samples`](https://github.com/microsoft/react-native-windows-samples/tree/main/samples/NativeModuleSample)

‎docs/native-modules-async.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules-async
33
title: Using Asynchronous Windows APIs
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
>**This documentation and the underlying platform code is a work in progress.**
711
812
A common scenario for [Native Modules](native-modules.md) is to call one or more native asynchronous methods from a JS asynchronous method. However it may not be immediately obvious how to properly bridge both asynchronous worlds, which can lead to unstable, difficult to debug code.

‎docs/native-modules-autolinking.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules-autolinking
33
title: Autolinking Native Modules
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
Autolinking is a mechanism that allows your React Native app project to discover and use native modules and view managers provided by React Native libraries.
711

812
This document covers autolinking for the Windows platform. It is an extension to the [React Native CLI Autolinking doc](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).

‎docs/native-modules-csharp-codegen.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules-csharp-codegen
33
title: Compile time code generation for C#
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
>**This documentation and the underlying platform code is a work in progress.**
711
812
In previous versions of React Native for Windows, code generation for C# modules was performed using reflection. Since 0.63 we improved this by adding a compile time code generation.

‎docs/native-modules-jsvalue.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules-jsvalue
33
title: Using JSValue
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
>**This documentation and the underlying platform code is a work in progress.**
711
812
`JSValue` is a native, immutable invariant value type, and is meant to hold any of the commonly used JS types: `bool`s, `int`s, `double`s, `string`s, arrays, and objects. It is provided for native developers (writing native modules or view managers) who want an equivalent to the `folly::dynamic` type that is compatible with the WinRT ABI surface provided by `Microsoft.ReactNative`.

‎docs/native-modules-marshalling-data.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules-marshalling-data
33
title: Marshaling Data
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
>**This documentation and the underlying platform code is a work in progress.**
711
812
## Overview

‎docs/native-modules-setup.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules-setup
33
title: Native Module Setup
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
> **This documentation is a work in progress and version-specific. Please check that the version of this document (top of page) matches the version of RN/RNW you're targeting.**
711
812
This guide will set you up with our recommendations for authoring a native module for React Native for Windows. After completing this setup, you should be able to answer the question: *Where do I need to implement the native code so it's available at runtime?*

‎docs/native-modules-troubleshooting.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules-troubleshooting
33
title: Troubleshooting Native Modules
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
So you added a new native module or a new method to a module but it isn't working, **now what?!**
711

812
## Common Issues

‎docs/native-modules-using.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules-using
33
title: Using Community Native Modules
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
Community native modules are usually distributed as npm packages. To understand more about npm packages you may find [this guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) useful.
711

812
Consuming native modules requires updating your app's native build files to depend on the module's native build files, called "linking". Many modules support "autolinking", where these updates are done automatically when running the [run-windows command](run-windows-cli.md). Others may require you to link the module manually.

‎docs/native-modules-vs-turbo-modules.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules-vs-turbo-modules
33
title: Native Modules vs Turbo Modules
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
If you've worked with React Native, you may be familiar with the concept of Native Modules, which allow JavaScript and platform-native code to communicate over the React Native "bridge", which handles cross-platform serialization via JSON.
711

812
TurboModules are the next iteration of Native Modules that provide a few extra benefits, in particular these modules use JSI, a JavaScript interface for native code, which allows for more efficient communication between native and JavaScript code than the bridge.

‎docs/native-modules.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ id: native-modules
33
title: Native Modules
44
---
55

6+
![Architecture](https://img.shields.io/badge/architecture-needs_review-red)
7+
8+
> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md).
9+
610
> **This documentation and the underlying platform code is a work in progress.**
711
> **Examples (C# and C++/WinRT):**
812
>

0 commit comments

Comments
 (0)