Edit

Autolinking Native Modules

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.

Add a library using your favorite package manager and run the build:

yarn add react-native-webview
npx react-native run-windows

That's it. No more editing native files to use native code.

How does it work

From the React Native CLI Autolinking doc:

Each platform defines its own platforms configuration. It instructs the CLI on how to find information about native dependencies. This information is exposed through the config command in a JSON format. It's then used by the scripts run by the platform's build tools. Each script applies the logic to link native dependencies specific to its platform.

The information provided by config is described in React Native Config Schema.

Autolinking process

Autolinking is performed automatically as a part of the run-windows command:

1. At build time, autolinking is performed first, before msbuild.exe is invoked and the build actually started. It uses the information provided by config to both generate and modify certain native files consumed by your app project.

   1. The AutolinkedNativeModules.g.targets file contains the necessary references to the dependency projects that must be built.

      Your app's solution file may also be modified to ensure the dependency projects will be built.

   2. The AutolinkedNativeModules.g.(cpp|cs) files contain a RegisterAutolinkedNativeModulePackages method which registers all of the specified IReactPackageProviders from the dependencies.

2. At build time, while msbuild.exe is running, but before compiling your app project, a check will verify that the autolinked files are up-to-date, and warn you if they aren't.

   If you're using run-windows this check should always pass. However, if you've manually edited the generated files, or changed your npm dependencies and are building manually with Visual Studio, then the check might fail. See manually run autolinking.

3. At runtime, when your app is starting up it will call RegisterAutolinkedNativeModulePackages, registering the native dependencies with React Native, making them available to JS code.

Alternatives

Manually run autolinking

If you would like to run the autolinking process outside of the build, you can run the autolink-windows command manually at any time.

Skipping autolinking

If you would like to skip the autolinking process during run-windows command you can pass --no-autolink option:

npx react-native run-windows --no-autolink