microsoft / microsoft/react-native-windows

URI loaded Images with ReactImageBrush do not consistently set Background brush when cached (when using clang)

Open
#10,962 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Partner: Facebook Scenario: Clang Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Problem Description

XAML uses an internal memory and disk cache for images. This is true of BitmapImage as well as LoadedImageCache. In the case of LoadedImageCache, we can get into a situation where a network / URI image is pulled from cache and the LoadCompleted event subscribed here either does not fire or fires synchronously before we subscribe the event.

I suspect this is a clang-only issue, as this does not repro when building with MSVC, and we've seen other instances of clang behaving slightly differently w.r.t. coroutines (see #10772)

When this cached image issue occurs, we wind up not setting the image because we set the ReactImage background to the composition brush here.

Steps To Reproduce

Would require an environment where we build Microsoft.ReactNative with Clang in open source, which we do not have :(

Expected Results

No response

CLI version

npx react-native --version

Environment
npx react-native info
Target Platform Version

No response

Target Device(s)

No response

Visual Studio Version

No response

Build Configuration

No response

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

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in vnext/Microsoft.ReactNative/Views/Image/ReactImage.cpp, especially the LoadCompleted subscription around line 266 and background assignment around line 292. Trace cached URI image handling and compare synchronous versus asynchronous completion under Clang. Done means cached images consistently set the ReactImage background brush, though the issue provides no reproducible Clang environment or named test.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp, react-native
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.