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