Package Exports

react-native-image-colors

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-image-colors) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-image-colors

Fetch prominent colors from an image using a URL.

Example usage with a gradient

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

Installation

$ npm install react-native-image-colors
# --- or ---
$ yarn add react-native-image-colors

Android

Rebuild the app.

iOS

Install the pod, then rebuild the app.

cd ios && pod install

(if you face a compilation error while building, you probably need to create a blank swift file in XCode. See #1).

Usage

Start by importing the module

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

🎨 Fetch colors

const colors = await ImageColors.getColors(URL, config);

URL

e.g.

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

config (android)

Property	Description	Type	Required
`dominant`	Get the dominant color if true.	`boolean`	No
`average`	Get the average color if true.	`boolean`	No
`vibrant`	Get the vibrant color if true.	`boolean`	No
`darkVibrant`	Get the dark vibrant color if true.	`boolean`	No
`lightVibrant`	Get the light vibrant color if true.	`boolean`	No
`darkMuted`	Get the dark muted color if true.	`boolean`	No
`lightMuted`	Get the light muted color if true.	`boolean`	No
`muted`	Get the muted color if true.	`boolean`	No
`defaultColor`	If a color property couldn't be retrieved, it will default to this hex color string. If this parameter is not passed, `#000000` will be used (*important*: shorthand hex will not work e.g. `#fff` ❌ vs `#ffffff` ✅)	`string`	No

config (iOS)

Property	Description	Type	Required
`defaultColor`	If a color property couldn't be retrieved, it will default to this hex color string. If this parameter is not passed, `#000000` will be used.	`string`	No

Result (android)

On android, you will only get the color properties you marked as true in the config object, plus a platform key to help you figure out that this is the android result type.

Property	Type
`dominant`	`string`
`average`	`string`
`vibrant`	`string`
`darkVibrant`	`string`
`lightVibrant`	`string`
`darkMuted`	`string`
`lightMuted`	`string`
`muted`	`string`
`platform`	`string`

Result (iOS)

On iOS, you will always get all of the following properties regardless of what you pass to the config object, plus the respective platform key.

Property	Type
`background`	`string`
`primary`	`string`
`secondary`	`string`
`detail`	`string`
`platform`	`string`

For TypeScript users, the typings might be easier to digest.

Example

const colors = await ImageColors.getColors(this.URL, {
  average: true,
  defaultColor: "#000000"
});

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

Notes

The background property in the iOS result and the average property in the android result are usually similar colors.
There is an example react-native project.