Unable to create a Native Components (Fabric) following documentation

[sundaramramaswamy]

Problem Description

Just following Native Platform: Native Component (Fabric) I get a runtime error and not a basic, working native component.

The exact error I get is

View config getter callback for component CircleMask must be a function (received undefined)

It's frustrating as a simple first step in realizing a basic native component is hindered. This used to work in 0.80 days.

Steps To Reproduce

1. Follow Native Platform: Getting Started
2. Follow Native Platform: Native Modules
3. Follow Native Platform: Native Components (Fabric)

Expected Results

An app window should show a circle mask component. This isn't the case. Aforementioned runtime error is seen.

CLI version

20.0.0

Environment

System:
  OS: Windows 11 10.0.26100
  CPU: (12) x64 Intel(R) Xeon(R) W-2133 CPU @ 3.60GHz
  Memory: 43.62 GB / 63.73 GB
Binaries:
  Node:
    version: 25.2.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 3.6.1
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 11.6.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.14.36811.4 (Visual Studio Enterprise 2022)
    - 18.1.11312.151 (Visual Studio Enterprise 2026)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.5
    wanted: 0.81.5
  react-native-windows:
    installed: 0.0.0-canary.1022
    wanted: 0.0.0-canary.1020

Target React Native Architecture

New Architecture (WinAppSDK) Only

Target Platform Version

10.0.26100

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

[sundaramramaswamy]

Issue: Metro is resolving react-native directly from node_modules/react-native instead of from node_modules/react-native-windows. Two registries were present and circle mask component was getting registered with one and trying to be loaded from another.

I was able to fix it by fixing example/metro.config.js. Refer commit in react-native-fancy-mod.

[sundaramramaswamy]

One can use //vnext/Scripts/creaternwlib.cmd to arrive at the repro faster.