|
| 1 | +# Complete Example: Setting up Windows support for react-native-webview |
| 2 | + |
| 3 | +This example demonstrates how to use the `module-windows-setup` command to add Windows support to the popular `react-native-webview` community module. |
| 4 | + |
| 5 | +## Starting Point |
| 6 | + |
| 7 | +You have cloned or created a React Native module project with this structure: |
| 8 | +``` |
| 9 | +react-native-webview/ |
| 10 | +├── package.json |
| 11 | +├── index.js |
| 12 | +├── src/ |
| 13 | +│ └── WebViewNativeComponent.ts |
| 14 | +└── README.md |
| 15 | +``` |
| 16 | + |
| 17 | +## Step 1: Run the Setup Command |
| 18 | + |
| 19 | +```bash |
| 20 | +cd react-native-webview |
| 21 | +yarn react-native module-windows-setup --logging |
| 22 | +``` |
| 23 | + |
| 24 | +## Step 2: Command Output |
| 25 | + |
| 26 | +``` |
| 27 | +✔ Setting up Windows support for React Native module... |
| 28 | +[ModuleWindowsSetup] Validating environment... |
| 29 | +[ModuleWindowsSetup] Project name: react-native-webview |
| 30 | +[ModuleWindowsSetup] Yarn found |
| 31 | +[ModuleWindowsSetup] Checking for TurboModule spec file... |
| 32 | +[ModuleWindowsSetup] No spec file found, creating default TurboModule spec... |
| 33 | +[ModuleWindowsSetup] Created spec file: /path/to/NativeReactNativeWebview.ts |
| 34 | +[ModuleWindowsSetup] Checking and updating package.json codegen configuration... |
| 35 | +[ModuleWindowsSetup] Added codegenConfig to package.json |
| 36 | +[ModuleWindowsSetup] Cleaning node_modules and reinstalling dependencies... |
| 37 | +[ModuleWindowsSetup] Removed node_modules |
| 38 | +[ModuleWindowsSetup] Dependencies installed |
| 39 | +[ModuleWindowsSetup] Upgrading React Native and React Native Windows to latest versions... |
| 40 | +[ModuleWindowsSetup] Latest RN version: 0.73.0 |
| 41 | +[ModuleWindowsSetup] Latest RNW version: 0.73.0 |
| 42 | +[ModuleWindowsSetup] Updated dependency versions in package.json |
| 43 | +[ModuleWindowsSetup] Running init-windows with cpp-lib template... |
| 44 | +[ModuleWindowsSetup] init-windows completed successfully |
| 45 | +[ModuleWindowsSetup] Running codegen-windows... |
| 46 | +[ModuleWindowsSetup] codegen-windows completed successfully |
| 47 | +[ModuleWindowsSetup] Generating C++ stub files... |
| 48 | +[ModuleWindowsSetup] Generated header stub: /path/to/windows/ReactNativeWebview.h |
| 49 | +[ModuleWindowsSetup] Generated cpp stub: /path/to/windows/ReactNativeWebview.cpp |
| 50 | +[ModuleWindowsSetup] Verifying build setup... |
| 51 | +[ModuleWindowsSetup] MSBuild found, project should be buildable |
| 52 | +
|
| 53 | +🎉 Your React Native module now supports Windows! |
| 54 | +
|
| 55 | +Files created/updated: |
| 56 | +📄 package.json - Added codegen configuration |
| 57 | +🏗️ NativeReactNativeWebview.ts - TurboModule spec file (edit with your API) |
| 58 | +💻 windows/ReactNativeWebview.h - C++ header file (implement your methods here) |
| 59 | +⚙️ windows/ReactNativeWebview.cpp - C++ implementation file (add your logic here) |
| 60 | +
|
| 61 | +Next steps: |
| 62 | +1. 📝 Update the generated spec file with your module's interface |
| 63 | +2. 🔧 Implement the methods in the generated C++ stub files |
| 64 | +3. 🏗️ Build your project to verify everything works |
| 65 | +4. 📚 See the documentation for more details on TurboModule development |
| 66 | +
|
| 67 | +For help, visit: https://microsoft.github.io/react-native-windows/ |
| 68 | +``` |
| 69 | + |
| 70 | +## Step 3: Final Project Structure |
| 71 | + |
| 72 | +After running the command, your project will have this structure: |
| 73 | + |
| 74 | +``` |
| 75 | +react-native-webview/ |
| 76 | +├── package.json (updated with codegenConfig) |
| 77 | +├── index.js |
| 78 | +├── src/ |
| 79 | +│ └── WebViewNativeComponent.ts |
| 80 | +├── NativeReactNativeWebview.ts (generated) |
| 81 | +├── windows/ |
| 82 | +│ ├── ReactNativeWebview.h (generated) |
| 83 | +│ ├── ReactNativeWebview.cpp (generated) |
| 84 | +│ └── ReactNativeWebview.sln (from init-windows) |
| 85 | +├── codegen/ |
| 86 | +│ └── ReactNativeWebviewSpec.g.h (from codegen-windows) |
| 87 | +└── README.md |
| 88 | +``` |
| 89 | + |
| 90 | +## Step 4: Customize the Generated Files |
| 91 | + |
| 92 | +### Update the Spec File (NativeReactNativeWebview.ts) |
| 93 | + |
| 94 | +```typescript |
| 95 | +/** |
| 96 | + * Copyright (c) Microsoft Corporation. |
| 97 | + * Licensed under the MIT License. |
| 98 | + * @format |
| 99 | + */ |
| 100 | + |
| 101 | +import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport'; |
| 102 | +import {TurboModuleRegistry} from 'react-native'; |
| 103 | + |
| 104 | +export interface Spec extends TurboModule { |
| 105 | + goBack(): void; |
| 106 | + goForward(): void; |
| 107 | + reload(): void; |
| 108 | + stopLoading(): void; |
| 109 | + loadUrl(url: string): void; |
| 110 | + evaluateJavaScript(script: string): Promise<string>; |
| 111 | +} |
| 112 | + |
| 113 | +export default TurboModuleRegistry.getEnforcing<Spec>('ReactNativeWebview'); |
| 114 | +``` |
| 115 | + |
| 116 | +### Update the Header File (windows/ReactNativeWebview.h) |
| 117 | + |
| 118 | +```cpp |
| 119 | +#pragma once |
| 120 | + |
| 121 | +#include <ReactNativeWebviewSpec.g.h> |
| 122 | +#include <NativeModules.h> |
| 123 | + |
| 124 | +namespace ReactNativeWebviewSpecs { |
| 125 | + |
| 126 | +REACT_MODULE(ReactNativeWebview) |
| 127 | +struct ReactNativeWebview { |
| 128 | + using ModuleSpec = ReactNativeWebviewSpec; |
| 129 | + |
| 130 | + REACT_INIT(Initialize) |
| 131 | + void Initialize(React::ReactContext const &reactContext) noexcept; |
| 132 | + |
| 133 | + REACT_METHOD(goBack) |
| 134 | + void goBack() noexcept; |
| 135 | + |
| 136 | + REACT_METHOD(goForward) |
| 137 | + void goForward() noexcept; |
| 138 | + |
| 139 | + REACT_METHOD(reload) |
| 140 | + void reload() noexcept; |
| 141 | + |
| 142 | + REACT_METHOD(stopLoading) |
| 143 | + void stopLoading() noexcept; |
| 144 | + |
| 145 | + REACT_METHOD(loadUrl) |
| 146 | + void loadUrl(std::string url) noexcept; |
| 147 | + |
| 148 | + REACT_METHOD(evaluateJavaScript) |
| 149 | + void evaluateJavaScript(std::string script, React::ReactPromise<std::string> promise) noexcept; |
| 150 | + |
| 151 | +private: |
| 152 | + React::ReactContext m_reactContext{nullptr}; |
| 153 | +}; |
| 154 | + |
| 155 | +} // namespace ReactNativeWebviewSpecs |
| 156 | +``` |
| 157 | +
|
| 158 | +### Update the Implementation File (windows/ReactNativeWebview.cpp) |
| 159 | +
|
| 160 | +```cpp |
| 161 | +#include "ReactNativeWebview.h" |
| 162 | +
|
| 163 | +namespace ReactNativeWebviewSpecs { |
| 164 | +
|
| 165 | +void ReactNativeWebview::Initialize(React::ReactContext const &reactContext) noexcept { |
| 166 | + m_reactContext = reactContext; |
| 167 | +} |
| 168 | +
|
| 169 | +void ReactNativeWebview::goBack() noexcept { |
| 170 | + // TODO: Implement WebView go back functionality |
| 171 | +} |
| 172 | +
|
| 173 | +void ReactNativeWebview::goForward() noexcept { |
| 174 | + // TODO: Implement WebView go forward functionality |
| 175 | +} |
| 176 | +
|
| 177 | +void ReactNativeWebview::reload() noexcept { |
| 178 | + // TODO: Implement WebView reload functionality |
| 179 | +} |
| 180 | +
|
| 181 | +void ReactNativeWebview::stopLoading() noexcept { |
| 182 | + // TODO: Implement WebView stop loading functionality |
| 183 | +} |
| 184 | +
|
| 185 | +void ReactNativeWebview::loadUrl(std::string url) noexcept { |
| 186 | + // TODO: Implement WebView load URL functionality |
| 187 | +} |
| 188 | +
|
| 189 | +void ReactNativeWebview::evaluateJavaScript(std::string script, React::ReactPromise<std::string> promise) noexcept { |
| 190 | + try { |
| 191 | + // TODO: Implement JavaScript evaluation |
| 192 | + promise.Resolve("JavaScript evaluation result"); |
| 193 | + } catch (const std::exception& e) { |
| 194 | + promise.Reject(React::ReactError{e.what()}); |
| 195 | + } |
| 196 | +} |
| 197 | +
|
| 198 | +} // namespace ReactNativeWebviewSpecs |
| 199 | +``` |
| 200 | + |
| 201 | +## Step 5: Build and Test |
| 202 | + |
| 203 | +```bash |
| 204 | +# Build the Windows project |
| 205 | +cd windows |
| 206 | +msbuild ReactNativeWebview.sln |
| 207 | + |
| 208 | +# Or use Visual Studio to open and build the solution |
| 209 | +``` |
| 210 | + |
| 211 | +## Benefits of Using module-windows-setup |
| 212 | + |
| 213 | +1. **Automation**: All setup steps are automated - no manual file creation or configuration |
| 214 | +2. **Best Practices**: Generated files follow RNW coding standards and patterns |
| 215 | +3. **Completeness**: Creates the entire Windows integration structure in one command |
| 216 | +4. **Consistency**: Ensures consistent naming and structure across all Windows modules |
| 217 | +5. **Error Prevention**: Validates environment and handles common setup issues |
| 218 | +6. **Documentation**: Provides clear next steps and examples for implementation |
| 219 | + |
| 220 | +## Alternative Usage Patterns |
| 221 | + |
| 222 | +### Skip Dependency Upgrades |
| 223 | +```bash |
| 224 | +yarn react-native module-windows-setup --skip-deps |
| 225 | +``` |
| 226 | + |
| 227 | +### Skip Build Verification |
| 228 | +```bash |
| 229 | +yarn react-native module-windows-setup --skip-build |
| 230 | +``` |
| 231 | + |
| 232 | +### Verbose Logging |
| 233 | +```bash |
| 234 | +yarn react-native module-windows-setup --logging |
| 235 | +``` |
| 236 | + |
| 237 | +### Minimal Setup (Skip upgrades and build) |
| 238 | +```bash |
| 239 | +yarn react-native module-windows-setup --skip-deps --skip-build |
| 240 | +``` |
| 241 | + |
| 242 | +This command transforms any React Native community module into a fully Windows-compatible module with minimal effort and maximum reliability. |
0 commit comments