microsoft / microsoft/react-native-windows

Upstream changes to resolveAssetSource.js

Open
#10,619 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Fabric Area: Image enhancement Needs: Dev Design New Architecture Partner: Facebook Workstream: Releases and Integrations
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Summary

We need to override Libraries/Image/resolveAssetSource.js for unpackaged apps. There are assumptions in the upstream version of resolveAssetSource.js that the root bundle path is of the form <protocol>://<path>, and unpackaged apps may use bundle root paths of the form "C:<path>" or otherwise.

Motivation

We ship both packaged and unpackaged versions of our app. We should support both scenarios.

Currently, react-native-windows has a bug where the source code URL for bundled apps is an empty string. We'll be fixing this so that apps can reliably use the Image.resolveAssetSource API from React Native to get a fully qualified path to a packaged asset.

In order for this bug fix to work with unpackaged apps, we need eliminate the assumption that bundle paths match the form <protocol>://<path>.

Basic Example

For example, in our app, we have a context menu native module that takes in an object including the URI for the Icon to use for a context menu item. It should be possible to use the Image.resolveAssetPath API to resolve the fully qualified asset path for the icon.

E.g.,

const icon = require('icon.png');
const iconSource = Image.resolveAssetSource(icon);
NativeModules.ContextMenu.show({text: 'Item 1', icon: iconSource});

Without this change, unpackaged app icon sources will always be resolved to file://icon.png and we need native logic in the context menu module to strip the file:// prefix and prepend the bundle root path from the instance settings snapshot.

I'd prefer that we have common logic that is reusable for all modules that works in roughly the same way resolveAssetSource behaves on other platforms.

Open Questions

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 with Libraries/Image/resolveAssetSource.js and inspect how it parses the bundle root path for packaged and unpackaged apps. Verify the behavior of Image.resolveAssetSource with paths such as C:<path> and protocol-based roots; done means both scenarios return a fully qualified asset path without requiring native modules to rewrite it.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.