|
| 1 | +--- |
| 2 | +id: native-platform-getting-started |
| 3 | +title: "Native Platform: Getting Started" |
| 4 | +sidebar_label: Getting Started |
| 5 | +--- |
| 6 | + |
| 7 | + |
| 8 | + |
| 9 | +Similar to how the [Getting Started for Windows](getting-started.md) guide takes you through the process of creating a base React Native app (which supports iOS and Android), and then *adding* Windows support, this guide will take you through the steps of creating a base React Native library and then *adding* Windows support. |
| 10 | + |
| 11 | +Before you get started, make sure you have installed all of the [development dependencies](rnw-dependencies.md). |
| 12 | + |
| 13 | +> **Note:** There have always been multiple ways to create base React Native libraries, each creating a slightly different setup. This guide uses the `create-react-native-library` tool (with specific options) to start a brand new library, because that is the specific setup tested by the React Native for Windows team. Your experience may differ when attempting to add Windows support to (existing) libraries created by other tools. |
| 14 | +
|
| 15 | +## Create a new React Native library project |
| 16 | + |
| 17 | +Call the following from the place where you want your project directory to live: |
| 18 | + |
| 19 | +<!-- Note, make sure `--react-native-version "XYZ"` are pointing to the correct NPM tags in the command below. --> |
| 20 | + |
| 21 | +<!-- 1. For the next version (i.e. in docs/getting-started.md) use "nightly" for the RN version --> |
| 22 | +<!-- 2. For stable versions in versioned_docs use the semantic version, i.e. "^0.73.0" for the RN version --> |
| 23 | + |
| 24 | +<!-- See https://www.npmjs.com/package/react-native?activeTab=versions for the RN version tags. --> |
| 25 | + |
| 26 | +```bat |
| 27 | +npx --yes create-react-native-library@0.48.9 --local false --type turbo-module --react-native-version "nightly" --example vanilla <projectName> |
| 28 | +``` |
| 29 | + |
| 30 | +> **Note**: Replace `<projectName>` with the name of your library. The rest of this guide will assume you named your project `testlib`. You will also be prompted to supply several other options (slug, description, etc.) when creating your project. For more information on what these options mean, see [create-react-native-library's documentation](https://callstack.github.io/react-native-builder-bob). |
| 31 | +
|
| 32 | +### Navigate into this newly created directory |
| 33 | + |
| 34 | +React Native will have created your project in a new sub-directory, which you must enter before continuing. |
| 35 | + |
| 36 | +```bat |
| 37 | +cd testlib |
| 38 | +``` |
| 39 | + |
| 40 | +### Add React Native Windows to your project's dependencies |
| 41 | + |
| 42 | +<!-- Note, make sure "version" is pointing to the correct react-native-windows NPM tag in the command below. --> |
| 43 | + |
| 44 | +<!-- 1. For the next version (i.e. in docs/getting-started.md) use "canary" --> |
| 45 | +<!-- 2. For other versions in versioned_docs use the version in the format "^0.XY.0" --> |
| 46 | + |
| 47 | +```bat |
| 48 | +yarn add react-native-windows@canary --dev |
| 49 | +yarn add react-native-windows@* --peer |
| 50 | +yarn install |
| 51 | +``` |
| 52 | + |
| 53 | +### Initialize the React Native Windows native code and projects |
| 54 | + |
| 55 | +Lastly, initialize the React Native for Windows library with the [init-windows command](init-windows-cli.md) and the `cpp-lib` template: |
| 56 | + |
| 57 | +```bat |
| 58 | +npx react-native init-windows --template cpp-lib --overwrite |
| 59 | +``` |
| 60 | + |
| 61 | +> **Note:** The command will not only initialize the Windows code for the library project itself, but it will also add and initialize React Native for Windows for the example app created by `create-react-native-library` in the `example` folder. |
| 62 | +
|
| 63 | +## Running the React Native Windows example app |
| 64 | + |
| 65 | +If you followed this guide and added Windows support to the base project created by `create-react-native-library`, you should be able to launch the provided `example` app with the [run-windows command](run-windows-cli.md): |
| 66 | + |
| 67 | +```bat |
| 68 | +yarn example react-native run-windows |
| 69 | +``` |
| 70 | + |
| 71 | +## Next Steps |
| 72 | + |
| 73 | +After you've initialized a new project with Windows support, your next step is to implement the Windows support in native code. |
| 74 | + |
| 75 | +If you're implementing a Native Module (i.e. exposing non-UI native code), continue with [Native Platform: Native Modules](native-platform-modules.md). |
| 76 | + |
| 77 | +If you're implementing a Native Component (i.e. native Windows views), continue with [Native Platform: Native Components](native-platform-components.md). |
0 commit comments