osamaqarem/react-native-image-colors

Error in react native CLI

Closed this issue · 9 comments

Bug

I installed the library (I use react native CLI), and created the custom hook from the example, but when using it, it showed me the following error:

1| import { requireNativeModule } from 'expo-modules-core';
| ^
2 | // It loads the native module object from the JSI or falls back to
3 | // the bridge module (from NativeModulesProxy) if the remote debugger is on.
4 | export default requireNativeModule('ImageColors');

I don't understand why expo imports a native react native CLI library, and if it is required, they should specify it when implementing the example.

Environment info

im using typescript and react native CLI, this is the content of package.json
{
"name": "AppPeliculas",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-navigation/native": "^6.1.7",
"@react-navigation/stack": "^6.3.17",
"@types/react-native-snap-carousel": "^3.8.5",
"axios": "^1.5.0",
"currency-formatter": "^1.5.9",
"fbjs": "^3.0.5",
"react": "18.2.0",
"react-native": "0.72.4",
"react-native-gesture-handler": "^2.13.1",
"react-native-image-colors": "^2.3.0",
"react-native-linear-gradient": "^2.8.3",
"react-native-safe-area-context": "^4.7.2",
"react-native-screens": "^3.25.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-vector-icons": "^10.0.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.11",
"@tsconfig/react-native": "^3.0.0",
"@types/currency-formatter": "^1.5.2",
"@types/react": "^18.0.24",
"@types/react-native-vector-icons": "^6.4.15",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.76.8",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"engines": {
"node": ">=16"
}

Steps To Reproduce

  1. my project works correctly
  2. I install the library with yarn (yarn add react-native-image-colors)
  3. I created a custom hook using the example code, as seen in the following code:

import { useEffect, useState } from 'react'
import { getColors } from 'react-native-image-colors'
export default function useColors(){
const [colors, setColors] = useState(null)

const get = async()=>{
const url = 'https://i.imgur.com/68jyjZT.jpg'
await getColors(url, {
fallback: '#228B22',
cache: true,
key: url,
}).then(res=>console.log(res))
}
useEffect(() => {
get()

}, [])

return {colors}

  1. send me the error

Describe what you expected to happen:

  1. my project works correctly
  2. I install the library with yarn (yarn add react-native-image-colors)
  3. I create a custom hook using the example code
  4. It compiles correctly with the library

Reproducible sample code

could see the code and run the code in the next repository:

https://github.com/victor291201/pelisApp-ReactNative

Please configure expo modules in your project which this library depends on
https://docs.expo.dev/bare/installing-expo-modules/

Let me know if the above doesn't work for you. If you have reasons not to install expo modules, I'd love to know them.

@osamaqarem I understand, I will try to do that, but one question, is this library made for ReactNative CLI or made for Expo?, because in the documentation it says that I can use it with ReactNative CLI, but it asks me to install expo plugins, so it is confusing, could you explain a little to me?

however I try solve the error, importing the expo complement, and I will be telling you my progress

It's made for both, but it relies on APIs used in development of Expo packages which make it easier for me to maintain the library.

After doing those Expo configuration steps, you will also be able to install any Expo package in your React Native CLI app without repeating those steps.

Expo packages are very well maintained which makes them a very good choice even for React Native CLI apps.

I already installed the libraries, but now it gives me the following error
image

I found same issue to install this library.
@osamaqarem

Screenshot_1701674120

@osamaqarem it is a bad idea for include expo modules

Feel free to install v1 of the library without expo modules or long term support. Otherwise, you're welcome to fork.