react-native-find-image-color

This plugin detects most used color in an image

SIGNIFICANT NOTE

• This package depends on react-native-webview plugin and if you have already installed react-native-webview in your project make sure you have the same versions otherwise you'll get an error. If you faced an error fork this repository and update react-native-webview version.

• Current Version is: ^13.3.0" (24 December 2023)

Example

"dependencies" : {
  Your repo url with updated react-native-webview version
  "react-native-find-image-color" : "git://github.com/user/project.git",
  ...

Installation

yarn add react-native-find-image-color or npm i react-native-find-image-color

Usage

import ColorWebview from 'react-native-find-image-color'
<ColorWebview
    base64={route.params.base64}
    onGenerate={color => {
        console.log(color)
    }}
/>

Why only base64 image

• You can get cors error because of some cdn configurations (IE. Amazon S3 Links) but if you convert the links to base64 you can get the colors.

• Example Base64 Convert

   let imagePath: string = ''
   const resp = await RNFetchBlob.config({
     fileCache: true,
   }).fetch('GET', url)
   imagePath = resp.path()
   const base64 = await resp.readFile('base64')
   fs.unlink(imagePath)

Note

• If you try webview with react-native-view-shot you'll need to remove webview from dom before the shot.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library