Skip to content

@2x/@3x suffix convention does not resolve correct density variant #157

Description

@YozieB

Description

When loading a local asset via loadImage(require(...)), the library does not
respect React Native's standard @2x/@3x filename suffix convention for
resolving the correct image density variant. It appears to always load the
@2x version regardless of the device's actual pixel density.

Steps to reproduce

  1. Create two visually distinct images with the same base name:
    • epic@2x.webp (e.g. solid red image)
    • epic@3x.webp (e.g. solid blue image)
  2. Load via:
   const image = await loadImage(require('./epic.webp'));
   return <NitroImage image={image} style={{ width: 200, height: 200 }} />;
  1. Run on a @3x density device (tested on iPhone 16 Pro, PixelRatio.get() === 3)

Expected behavior

The @3x variant (blue image) should be loaded and rendered, matching the
device's pixel density — consistent with how require() + <Image> behaves
in standard React Native.

Actual behavior

The @2x variant (red image) is loaded and rendered instead, regardless of
the device's actual density.

Additional context

Confirmed this isn't a width/height measurement issue — image.width/
image.height return values in points (density-independent), which are
identical regardless of which physical file was actually loaded (both @2x
and @3x variants report the same logical size). The only way to confirm the
bug was to use visually distinct source images and observe which one
rendered.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions