osamaqarem / React Native Image Colors
Programming Languages
react-native-image-colors
Fetch prominent colors from an image.
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.
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.
Usage
Start by importing the module
import ImageColors from "react-native-image-colors"
🎨 Fetch colors
const colors = await ImageColors.getColors(URI, config)
URI
Can be:
-
URL:
-
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).
config
| Property | Description | Type | Required | Default |
|---|---|---|---|---|
fallback |
If a color property couldn't be retrieved, it will default to this hex color string (note: do not use shorthand hex. e.g. #fff). |
string |
No | "#000000" |
pixelSpacing (Android only) |
How many pixels to skip when iterating over image pixels. Higher means better performance (note: value cannot be lower than 1). | number |
No | 5 |
quality (iOS only) |
Highest implies no downscaling and very good colors, but it is very slow. See UIImageColors |
'lowest' 'low' 'high' 'highest'
|
No | "low" |
Result (android)
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.
| Property | Type |
|---|---|
dominant |
string |
average |
string |
vibrant |
string |
darkVibrant |
string |
lightVibrant |
string |
darkMuted |
string |
lightMuted |
string |
muted |
string |
platform |
"android" |
Result (iOS)
On iOS, you get the following color properties object, plus the respective platform key.
| Property | Type |
|---|---|
background |
string |
primary |
string |
secondary |
string |
detail |
string |
platform |
"ios" |
Example
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
}
Notes
- There is an example react-native project.