Skip to content

New Native Platform docs describing the cpp-lib template #1032

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .spelling
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ initializer
interop
iOS
ItemGroup
JSValue
KeyEvents
Kotlin
lifecycle
macOS
middleware
Expand Down Expand Up @@ -80,6 +82,7 @@ Quickstart
react-native
react-native-macos
react-native-windows
reactnative.dev
RefreshControl
repo
repos
Expand All @@ -96,6 +99,7 @@ struct
symlink
symlinks
tada
testlib
TextInput
theming
toolchain
Expand Down
4 changes: 3 additions & 1 deletion docs/autolink-windows-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ Here are the options that `react-native autolink-windows` takes:
| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI |
| `-h`, `--help` | boolean | Display help for command |

This sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details.
## Telemetry Notice

This command sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details.

The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.

Expand Down
46 changes: 45 additions & 1 deletion docs/codegen-windows-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,51 @@ Here are the options that `react-native codegen-windows` takes:
| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI |
| `-h`, `--help` | boolean | Display help for command |

This sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details.
## Codegen Config

The `react-native codegen-windows` command is configured by the `codegenConfig` object in the project's `package.json` file. This `codegenConfig` object is shared by all platforms, but the relevant parts for React Native for Windows is configured as follows:

| Field | Type| Description |
|:------|:---:|:------------|
| `type` | string | `"modules"` for Native Modules, `"components"` for Native Components, or `"all"` for both |
| `jsSrcDir` | string | Path to the TypeScript spec input files |
| `windows` | object | Windows-specific codegen configuration |

The `windows` object is configured as follows:

| Field | Type| Description |
|:------|:---:|:------------|
| `namespace` | string | The C++ namespace to contain the generated code |
| `cppStringType` | string | Optional, the string type to use in C++ code, either `"std::string"` or `std::wstring`. Defaults to `"std::string"` |
| `generators` | array | Optional, array of codegen generator strings, accepting `"modulesWindows"` for Native Modules, `"componentsWindows"` for Native Components. Defaults to `[ "modulesWindows" ]` |
| `outputDirectory` | string | Optional, path to place the generated code. Defaults to `./codegen/` of the working directory |
| `separateDataTypes` | boolean | Optional, specify whether to create separate files to define custom data types. Defaults to `false` |

> **Note:** For more information on how to configure the `codegenConfig` object for other platforms, see the [reactnative.dev Configuring Codegen](https://reactnative.dev/docs/the-new-architecture/using-codegen#configuring-codegen) page.
### Example Codegen Config

```json
"codegenConfig": {
"name": "NativeModuleSampleSpec",
"type": "all",
"jsSrcsDir": "src",
"includesGeneratedCode": true,
"windows": {
"namespace": "NativeModuleSampleCodegen",
"generators": [
"modulesWindows",
"componentsWindows"
],
"outputDirectory": "windows/NativeModuleSample/codegen",
"separateDataTypes": true
}
},
```

## Telemetry Notice

This command sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details.

The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.

Expand Down
7 changes: 3 additions & 4 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,12 @@ For information around how to set up React Native, see the [React Native Getting
## Create a new React Native project

Remember to call `@react-native-community/cli init` from the place you want your project directory to live.
Call the following from the place where you want your project directory to live:

<!-- Note, make sure both `@react-native-community/cli@ABC` and `--version "XYZ"` are pointing to the correct NPM tags in the command below. -->

<!-- 1. For the next version (i.e. in docs/getting-started.md) use "next" for the CLI and "nightly" for the RN version -->
<!-- 2. For the latest stable version in versioned_docs use "latest" for both the CLI and RN version -->
<!-- 3. For older stable versions you'll have to look up the CLI version, but for the RN version use the stable tag name, i.e. "0.73-stable" -->
<!-- 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 -->

<!-- See https://www.npmjs.com/package/@react-native-community/cli?activeTab=versions for the CLI version tags. -->
<!-- See https://www.npmjs.com/package/react-native?activeTab=versions for the RN version tags. -->
Expand Down Expand Up @@ -119,7 +118,7 @@ npx react-native init-windows --overwrite

## Authoring Native Modules

See [Native Modules and React Native Windows](native-modules.md).
See [Native Platform: Overview](native-platform.md).

## Building a standalone React Native Windows App

Expand Down
12 changes: 6 additions & 6 deletions docs/init-windows-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,20 +30,20 @@ Here are the options that `react-native init-windows` takes:
| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI |
| `-h`, `--help` | boolean | Display help for command |

### Templates
## Templates

The following templates are available for use with `init-windows` by replacing `--template XYZ`, where `XYZ` can be:

| Template | Name |
|:-:|:--|
| `cpp-app` | React Native Windows Application (New Arch, C++, Win32, Hermes) |
| `cpp-lib` | React Native Windows Turbo Module (New Arch, C++) |
| `cpp-app` | React Native Windows Application (New Arch, WinAppSDK, C++) |
| `cpp-lib` | React Native Windows Library (C++) |
| `old/uwp-cpp-app` | React Native Windows Application (Old Arch, UWP, C++) |
| `old/uwp-cpp-lib` | React Native Windows Library (Old Arch, UWP, C++) |
| `old/uwp-cs-app` | React Native Windows Application (Old Arch, UWP, C#) |
| `old/uwp-cs-lib` | React Native Windows Library (Old Arch, UWP, C#) |

This sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details.
## Telemetry Notice

This command sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details.

The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.

Expand Down
4 changes: 3 additions & 1 deletion docs/native-code-language-choice.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ title: Choosing C++ or C# for native code

> **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).

> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).

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.

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

## Common Considerations

Expand Down
2 changes: 2 additions & 0 deletions docs/native-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Working with native code on Windows

> **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).
> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).
## What is a React Native for Windows app?

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).
Expand Down
2 changes: 2 additions & 0 deletions docs/native-modules-advanced.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Native Modules (Advanced)

> **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).

> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).

>**This documentation and the underlying platform code is a work in progress.**
>**Examples (C# and C++/WinRT):**
> - [Native Module Sample in `microsoft/react-native-windows-samples`](https://github.com/microsoft/react-native-windows-samples/tree/main/samples-old/NativeModuleSample)
Expand Down
2 changes: 2 additions & 0 deletions docs/native-modules-async.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Using Asynchronous Windows APIs

> **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).
> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).
>**This documentation and the underlying platform code is a work in progress.**
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.
Expand Down
2 changes: 2 additions & 0 deletions docs/native-modules-autolinking.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Autolinking Native Modules

> **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).

> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).

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.

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).
Expand Down
2 changes: 2 additions & 0 deletions docs/native-modules-csharp-codegen.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Compile time code generation for C#

> **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).
> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).
>**This documentation and the underlying platform code is a work in progress.**
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.
Expand Down
2 changes: 2 additions & 0 deletions docs/native-modules-jsvalue.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Using JSValue

> **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).

> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).

>**This documentation and the underlying platform code is a work in progress.**

`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`.
Expand Down
2 changes: 2 additions & 0 deletions docs/native-modules-marshalling-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Marshaling Data

> **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).

> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).

>**This documentation and the underlying platform code is a work in progress.**

## Overview
Expand Down
2 changes: 2 additions & 0 deletions docs/native-modules-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Native Module Setup

> **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).

> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).

> **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.**

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?*
Expand Down
2 changes: 2 additions & 0 deletions docs/native-modules-troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Troubleshooting Native Modules

> **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).

> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).

So you added a new native module or a new method to a module but it isn't working, **now what?!**

## Common Issues
Expand Down
2 changes: 2 additions & 0 deletions docs/native-modules-using.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Using Community Native Modules

> **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).
> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).
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.

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.
Expand Down
2 changes: 2 additions & 0 deletions docs/native-modules-vs-turbo-modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ title: Native Modules vs Turbo Modules

> **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).

> For the latest information on native development on Windows, see [Native Platform: Overview](native-platform.md).

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.

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.
Expand Down
Loading