Need help with react-native-image-colors?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

osamaqarem
145 Stars 6 Forks MIT License 65 Commits 2 Opened issues

Description

Fetch prominent colors from an image.

Services available

!
?

Need anything else?

Contributors list

react-native-image-colors

Platform TypeScript NPM Badge PRs Welcome

Fetch prominent colors from an image.

Example 1 Demo 1 Android Demo 1 iOS Demo 2 Android Demo 2 iOS

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:

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).

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.