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
318 Stars 14 Forks MIT License 97 Commits 3 Opened issues

Description

Fetch prominent colors from an image.

Services available

!
?

Need anything else?

Contributors list

react-native-image-colors

Platform NPM Badge Publish size 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, UIImageColors on iOS and node-vibrant for the web.

Installation

npm install react-native-image-colors
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 creating a blank dummy swift file using Xcode.

Expo

This package works with Expo managed workflow apps. Set up

expo-dev-client
so you can use this package. The example project demonstrates this.

Web

You're good to go!

Usage

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

const uri = require('./cool.jpg')

const result = await ImageColors.getColors(uri, { fallback: '#228B22', cache: true, key: 'unique_key', })

switch (result.platform) { case 'android': // android result properties const vibrantColor = result.vibrant break case 'web': // web result properties const lightVibrantColor = result.lightVibrant break case 'ios': // iOS result properties const primaryColor = result.primary break default: throw new Error('Unexpected platform key') }

API

ImageColors.getColors(uri: string, config?: Config): Promise

uri

A string which 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"
| |
cache
| Enables in-memory caching of the result - skip downloading the same image next time. |
boolean
| No |
false
| |
key
| Unique key to use for the cache entry. The image URI is used as the unique key by default. You should explicitly pass a key if you enable caching and you're using a base64 string as the URI. |
string
| No |
undefined
| |
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 and web) | Highest implies no downscaling and very good colors. |
'lowest'

'low'

'high'

'highest'
| No |
"low"
|

ImageColorsResult

Every result object contains a respective

platform
key to help narrow down the type.

AndroidImageColors

| Property | Type | | -------------- | ----------- | |

dominant
|
string?
| |
average
|
string?
| |
vibrant
|
string?
| |
darkVibrant
|
string?
| |
lightVibrant
|
string?
| |
darkMuted
|
string?
| |
lightMuted
|
string?
| |
muted
|
string?
| |
platform
|
"android"
|

WebImageColors

| Property | Type | | -------------- | --------- | |

dominant
|
string?
| |
vibrant
|
string?
| |
darkVibrant
|
string?
| |
lightVibrant
|
string?
| |
darkMuted
|
string?
| |
lightMuted
|
string?
| |
muted
|
string?
| |
platform
|
"web"
|

IOSImageColors

| Property | Type | | ------------ | -------- | |

background
|
string
| |
primary
|
string
| |
secondary
|
string
| |
detail
|
string
| |
platform
|
"ios"
|

Notes

  • There is an example react-native project.
  • Since the implementation of each platform is different you can get different color results for each.

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.