DOCSEARCHbyAlgolia
Submit Docs

React Native for Windows and macOS Samples

repository·main·Indexed 19 days ago

https://github.com/microsoft/react-native-windows-samples

A collection of sample applications, components, and templates for developers using React Native for Windows and macOS. It provides implementation examples for native modules, WinRT integration, and CI/CD pipelines, including specialized samples such as Calculator, NativeModuleSample, ReactNativeWinRT, AppServiceDemo, and CameraDemo.

Tokens
160K
Snippets
571
Records
835
Agent score
65%

What's inside microsoft-react-native-windows-samples

  1. Overview of Native Platform support in React Native for Windows

    main

    React Native for Windows allows you to extend your application by writing native code to access platform APIs or custom native functionality not available in the standard react-native package.

    There are two primary ways to extend the platform:

    1. Native Modules: Used for accessing non-UI native code (e.g., sensors, file system, or custom logic).
    2. Native Components: Used for accessing native Windows UI elements (platform views).

    This project supports both the Old Architecture (Paper) and the New Architecture (Turbo Native Modules and Fabric Native Components). It is recommended to follow the New Architecture patterns where possible, but you can implement a single library that supports both.

  3. Overview of deprecated React Native Windows samples

    main

    The samples-old directory contains legacy React Native for Windows (RNW) samples that are deprecated and no longer maintained. These samples are useful for studying older implementation patterns or specific historical integrations, but they are not recommended for new development.

    Available legacy samples include:

    • CalculatorCoreAppNuGet: Uses deprecated CoreApp APIs (RNW 0.73).
    • CameraDemo: Demonstrates integration with the react-native-camera community module (RNW 0.67).
    • NativeModuleSample: Shows how to implement native modules using both C++ and C# (RNW 0.78).
    • RssReader: An implementation of an RSS reader for RNW and RNM (RNW 0.62).
    • TodosFeed: Showcases three integration patterns:
      1. As a standalone UWP app.
      2. As a component within an existing UWP app.
      3. As a component within an existing WPF app using XAML Islands (RNW 0.61).

  4. Available React Native for Windows Samples

    main

    This repository contains several sample projects to demonstrate different capabilities of React Native for Windows (RNW):

    • Calculator: A sample RNW application implementing a simple calculator.
    • ContinuousIntegration: Demonstrates sample CI pipeline configurations specifically for RNW projects.
    • NativeModuleSample: A sample demonstrating how to implement both a Native Module and a Native Component in RNW.

  8. What is IReactContext and how to use it

    main

    The IReactContext interface is a weak pointer to the React instance. It serves as the primary communication bridge for native modules and view managers to interact with the React application, other native modules, and view managers.

    Key Capabilities:

    • Data Sharing: Use Properties to share native module data with other components.
    • Event Exchange: Use Notifications to exchange events between components and the application.
    • JS Communication: Use CallJSFunction to invoke JavaScript functions and EmitJSEvent to raise JavaScript events.
    • Threading: Use UIDispatcher to post work to the UI thread and CallInvoker (New Architecture) or JSDispatcher (Old Architecture) to schedule work on the JavaScript engine thread.

    Important Lifecycle Note: Because IReactContext is a weak pointer, its functionality becomes unavailable once the React instance is unloaded. When a ReactNativeHost reloads a React instance, the old IReactContext is destroyed and a new one is created.

  9. What is Direct Debugging in React Native Windows

    main

    Direct Debugging is the default JavaScript debugging solution for new React Native Windows (RNW) projects. Unlike Web Debugging, which runs code on an external engine, Direct Debugging runs your app's code on its embedded engine (e.g., Hermes or Chakra) and allows you to attach a debugger directly to it.

    Requirements:

    • The Metro Packager must be running, as it provides essential features like JS source mapping.

    Engine Support Matrix:

    JavaScript EngineEdge DevToolsVisual StudioVS CodeVS Code w/ RN Tools
    Hermes (Default)✅✅✅✅
    Chakra🟥✅🟥🟥

    Note: Some Hermes versions have known issues; if you encounter problems, Web Debugging is recommended as a fallback.

  10. What is IReactDispatcher and how to use it

    main

    The IReactDispatcher interface is the core threading and task management interface in React Native for Windows. It ensures that code execution occurs in the correct order on the appropriate thread.

    There are two primary dispatchers you will likely interact with via IReactContext:

    1. IReactContext.UIDispatcher: Provides native modules access to the UI thread associated with the React instance. Use this when you need to perform UI-related operations from a native module.
    2. IReactContext.JSDispatcher: Allows applications to post tasks to the JavaScript engine thread. Use this when you need to communicate back to the JS environment from native code.

    To execute code on the dispatcher's thread, use the Post method, which accepts a ReactDispatcherCallback and executes it asynchronously.

    // Example conceptual usage of a dispatcher
// dispatcher is an instance of IReactDispatcher (e.g., UIDispatcher or JSDispatcher)

dispatcher.Post(() => {
    // This code will run asynchronously on the dispatcher's thread
    // (e.g., the UI thread or the JS thread)
});

  11. What is React Native WinRT

    main

    React Native WinRT is an extension for React Native for Windows that allows developers to access the full set of Windows Runtime (WinRT) APIs directly from JavaScript or TypeScript.

    Instead of manually writing native C++ or C# modules to bridge Windows platform features, React Native WinRT uses a tool (distributed via the Microsoft.ReactNative.WinRT NuGet package) that consumes Windows Metadata (WinMD) files to automatically produce React Native Turbo Modules. This enables seamless access to public Windows platform APIs and 3rd party WinRT components.