Example app does not display images from the library

[vasiliy-pdk]

Description

Hey folks 👋. Thanks for the great library, it does the job well.
Unfortunately encountered a problem with showing images from the package in the example app. The package defines a simple component that renders an image from within its source tree as a static asset. The example app renders the component but the image is not shown.

Steps to reproduce

1. Generate a library and example app with npx create-react-native-library@latest
2. Add a component to the library that renders an image via the canonical React Native way. For example: <Image source={require('./img/foo.png')} />. The image should be located within the library source, so that it can be distributed with the library.
3. Go to example workspace, try to render the component. See no image is displayed.

Alternatively try the demo repo where the issue reproduced.

Demo repo

When trying to render just the component from the package

1. Check out just-component-from-package branch.
2. yarn
3. yarn example start
4. See that the image from package isn't shown

The example app line: https://github.com/vasiliy-pdk/react-native-load-image-example/blob/just-component-from-package/example/src/App.tsx#L7

The component code: https://github.com/vasiliy-pdk/react-native-load-image-example/blob/just-component-from-package/src/Pic/index.tsx#L6-L13

When trying to render the component alongside another image from the example app

Initially, I encountered the issue while trying to render the component from the package alongside an image shown from the example app. I saw that despite the assets paths were correct, 2 instances of the image from the example app were displayed.

It's also reproduced within the same repo. Check out main branch.

The example app lines: https://github.com/vasiliy-pdk/react-native-load-image-example/blob/main/example/src/App.tsx#L8-L9

The component that shows the image from the example app: https://github.com/vasiliy-pdk/react-native-load-image-example/blob/main/example/src/LocalPic/index.tsx#L8

What have I tried to fix it

• First of all, there's no error messages anywhere.
• I tried loading single image without different sizes
• different directory structure
• tried moving it to assets
• tried requiring the image to a constant and passing the constant to the Image component to the source prop
• logging the image constant returns a number, which was weirdly always 1 for both images the one in the library and the one in example app
• tried different image
• I also checked the bundled js code in the debugger and the assets were present in there as a modules

Nothing worked.

I suspected that it was a configuration issue related to the usage of workspace for the example app. So I built another demo app and included the package as a regular dependency. There were no issues.

So the problem appears to be specific to the example app. I think there's some configuration missing in the /example workspace so that when an asset is referenced the wrong instance is given.

Packages

• create-react-native-library
• react-native-builder-bob

Selected options

All default

Link to repro

https://github.com/vasiliy-pdk/react-native-load-image-example

Environment

System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M1 Pro
  Memory: 96.22 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.3.0
    path: ~/.asdf/installs/nodejs/22.3.0/bin/node
  Yarn:
    version: 3.6.1
    path: ~/.asdf/installs/nodejs/22.3.0/bin/yarn
  npm:
    version: 10.8.1
    path: ~/.asdf/plugins/nodejs/shims/npm
  Watchman:
    version: 2024.07.08.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.3.0
    path: /Users/vasylpedak/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

[satya164]

hey @vasiliy-pdk, can you test the fix in this PR #608 and let me know if it fixes the issue?

[vasiliy-pdk]

Hey @satya164 . Huge thank you for the quick fix 👍 . So far it's looking great - I can see both images. I have tried it on the real package I am developing which was generated with an older version of the create-react-native-library by adding the lines you added in your PR.

diff --git a/example/metro.config.js b/example/metro.config.js
index f949d17..3e0fd71 100644
--- a/example/metro.config.js
+++ b/example/metro.config.js
@@ -5,7 +5,13 @@ const exclusionList = require('metro-config/src/defaults/exclusionList');
 const pak = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
-const modules = Object.keys({ ...pak.peerDependencies });
+const modules = [
+  // AssetsRegistry is used internally by React Native to handle asset imports
+  // This needs to be a singleton so all assets are registered to a single registry
+  '@react-native/assets-registry',
+  ...Object.keys({ ...pak.peerDependencies }),
+];
 
 const defaultConfig = getDefaultConfig(__dirname);

I have also tried it with the demo repo in this branch by upgrading to the freshly released version - 0.29.0 of Bob. And it works. 🎉