[Fabric] Unable to load an image inside a custom visual

[rlbisbe]

Problem Description

I'm trying to build a custom visual for the fabric architecture using the MovingLight sample. This custom visual will have an image that will be loaded from a custom stream. But I started by checking if I could load the image from a URL:

 const winrt::hstring& localUri = L"file:///path/to/download.bmp";
 winrt::Uri uri(localUri);
 auto loadedSurface = winrt::LoadedImageSurface::StartLoadFromUri(uri);

From the documentation of ReactImage I see that the LoadedImageSurface is being used to load the image, so I thought to use the same sources.

However, when debugging, the app doesn't go beyond StartLoadFromUri, it crashes the app with an abort and doesn't give me any information. I have used the same URI in the React Native button and the app does load the image, so there's something on how the custom components access the WinAppSDK APIs.

Other than the MovingLight sample, I am having a hard time finding examples of custom components for Fabric.

Steps To Reproduce

1. Try load the image
2. See the application crash

Expected Results

Not crashing

CLI version

15.0.0

Environment

System:
  OS: Windows 10 10.0.19045
  CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
  Memory: 7.25 GB / 31.78 GB
Binaries:
  Node:
    version: 22.11.0
    path: C:\Program Files\nodejs\node.exe
  Yarn:
    version: 3.6.4
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 10.9.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 16.11.34931.43 (Visual Studio Professional 2019)
    - 17.11.35327.3 (Visual Studio Professional 2022)
Languages:
  Java: Not Found
  Ruby:
    version: 3.0.2
    path: C:\tools\ruby30\bin\ruby.exe
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0
    wanted: 15.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.0
    wanted: 0.76.0
  react-native-windows:
    installed: 0.76.0
    wanted: 0.76.0
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.76.6 is now available (your project is running on v0.76.0).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.76.6
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.76.0&to=0.76.6
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".

Community Modules

No response

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

[similar-issues-ai]

We've found some similar issues:

• Crash using Fabric Image with a uri that doesn't resolve #11507 , similarity score: 81%

If any of the above are duplicates, please consider closing this issue out and adding additional context in the original issue.

Note: You can give me feedback by 👍 or 👎 this comment.

[acoates-ms]

If you just want to load an image from a custom stream, you shouldn't need a custom component. Just a custom UriImageProvider?

react-native-windows/packages/playground/windows/playground-composition/Playground-Composition.cpp

Line 54 in fdca0ff

struct EllipseImageHandler

If the stream is a stream that windows can already decode (like a png stream), then you can just return a StreamImageResponse from your image provider with your stream and that should work.