-
Notifications
You must be signed in to change notification settings - Fork 183
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Example app does not display images from the library #607
Comments
hey @vasiliy-pdk, can you test the fix in this PR #608 and let me know if it fixes the issue? |
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
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. 🎉 |
react-native uses a asset registry package to register assets. seems the library and the example app are using different copies of this package, presumably because Expo CLI embeds `@react-native/assets-registry` verbatim in the code during transform. this causes the library not to use the same copy of the package as `react-native`. this results in broken assets in the app. with this change we're ensuring that we always load a single version of the package to ensure assets work. closes #607
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
npx create-react-native-library@latest
<Image source={require('./img/foo.png')} />
. The image should be located within the library source, so that it can be distributed with the library.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
yarn
yarn example start
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
assets
Image
component to thesource
prop1
for both images the one in the library and the one in example appNothing 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
Selected options
All default
Link to repro
https://github.com/vasiliy-pdk/react-native-load-image-example
Environment
The text was updated successfully, but these errors were encountered: