lazy loading images in react native

Expo SDK
1

Please provide the following:

  1. SDK Version: latest expo cli, on windows
  2. Platforms(Android/iOS/web/all): all
  3. Add the appropriate “Tag” based on what Expo library you have a question on. Image

While installing (npm i react-lazy-load-image-component) I am getting “unable to resolve dependency tree” error

My Code
import { LazyloadImage } from ‘react-lazy-load-image-component’;

export default function Mymage(){
console.log(“MyImage”);
return (

<LazyloadImage
effect=“blur”
style={styles.avatarImage}
src={"https://images.unsplash.com/photo-1633205719979-e47958ff6d93?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80"}
placeHolderSrc={process.env.PUBLIC_URL + “/mylogo.png”}
/>

);
}

Error
PS D:\hiveGit\poc\product-list> npm i react-lazy-load-image-component
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: product-list@1.0.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! react@“18.0.0” from the root project
npm ERR! peer react@“^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x” from react-lazy-load-image-component@1.5.5
npm ERR! node_modules/react-lazy-load-image-component
npm ERR! react-lazy-load-image-component@“” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@“17.0.2” from react-dom@17.0.2
npm ERR! node_modules/react-dom
npm ERR! react-dom@“17.0.2” from the root project
npm ERR! peer react-dom@“^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x” from react-lazy-load-image-component@1.5.5
npm ERR! node_modules/react-lazy-load-image-component
npm ERR! react-lazy-load-image-component@“” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

2

Try:

npm i react-lazy-load-image-component --legacy-peer-deps

If that doesn’t work, try contacting the authors of react-lazy-load-image-component.

1 Like
3

Thanks wodin, appreciated.
Is using legacy-peer-deps recommended/safe for production apps? I read somewhere that it can create conflicts in library versions.

4

I’m not 100% sure how to interpret the error output, but it seems that something wants react 17.0.2 and something else wants react 18.0.0.

What are your dependencies?

After you install with --legacy-peer-deps, what does the following output:

npm why react

I have not personally run into issues with --legacy-peer-deps. If you want it fixed so that you don’t need that, you are probably going to need to talk to the react-lazy-load-image-component authors.

But I’m not an expert on npm

5

Yes I have put the same comment there as well. so far no response. will wait for some more time.
Do we have any other expo alternative or samples i can refer for lazy loading image?
Or sample image component.

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.