Fetch prominent colors from an image.

This module is a wrapper around the Palette class on Android and UIImageColors on iOS.

$ npm install react-native-image-colors

or

$ yarn add react-native-image-colors

Rebuild the app.

Install the pod, then rebuild the app.

npx pod-install

RN < 0.62: if you face a compilation error while building, your Xcode project likely does not support Swift which this package requires. You can fix this by either a) Creating a blank dummy swift file using Xcode or b) Following steps 1,2,3 here.

Start by importing the module

import ImageColors from "react-native-image-colors"

🎨 Fetch colors

const colors = await ImageColors.getColors(URI, config)

Can be:

• URL:

  https://i.imgur.com/O3XSdU7.jpg

• Local file:

  const catImg = require("./images/cat.jpg")

• Base64:

  const catImgBase64 = "data:image/jpeg;base64,/9j/4Ri..."

  The mime type prefix for base64 is required (e.g. data:image/png;base64).

On android, you will get an object with the following color properties, plus a platform key to help you figure out that this is the android result type.

On iOS, you get the following color properties object, plus the respective platform key.

const coolImage = require("./cool.jpg")

const colors = await ImageColors.getColors(coolImage, {
  fallback: "#228B22",
})

if (colors.platform === "android") {
  // Access android properties
  // e.g.
  const averageColor = colors.average
} else {
  // Access iOS properties
  // e.g.
  const backgroundColor = colors.background
}

• There is an example react-native project.