Unable to resolve dependencies for rn-placeholder

[mchisolm0]

Describe the bug, the incomprehension

When trying the add the rn-placeholder package, npm gives an error that the dependency tree was unable to resolve.

1. cd into root project directory
2. npm i rn-placeholder
3. error appears

Additional info

Error

spacecraft on  add-placeholders [$] via ⬢ v20.18.0

❯ npm i rn-placeholder
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: spacecraft@1.0.0
npm error Found: react@18.2.0
npm error node_modules/react
npm error react@"18.2.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^16.13.1" from rn-placeholder@3.0.3
npm error node_modules/rn-placeholder
npm error rn-placeholder@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/13b279ba-6695-4b61-bd22-b4dda1f2d188/.npm/_logs/2025-02-03T02_53_15_894Z-eresolve-report.txt
npm error A complete log of this run can be found in: /{USER-HOME-DIRECTORY/.npm/_logs/2025-02-03T02_53_15_894Z-debug-0.log

I believe the issue is the dependencies for rn-placeholder just need to be bumped (considering offering to do it for them), but they are currently unmaintained and looking for maintainers (see issue here).

[mchisolm0]

After looking into it a bit more, there is another issue on rn-placeholder that seems to suggest the problem is actually that a hash for the package was not published to npm (issue here).

I admittedly do not know what that means, but I wanted to mention it here for context.

[flexbox]

Thanks for the feedback

I should migrate the challenge to a simple Animated.Text with reanimated
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#animated-component

something like

<Animated.Text entering={fadeIn} exiting={fadeOut}>
  Loading...
</Animated.Text>