react-native-image-colors
Fetch prominent colors from an image.
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
Expo
Build custom native code
expo prebuild
# iOS
expo run:ios
# Android
expo run:android
The example is an expo app.
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':
const vibrantColor = result.vibrant
break
case 'web':
const lightVibrantColor = result.lightVibrant
break
case 'ios':
const primaryColor = result.primary
break
default:
throw new Error('Unexpected platform key')
}
API
ImageColors.getColors(uri: string, config?: Config): Promise<ImageColorsResult>
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 | Supported platforms |
---|
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" | All |
cache | Enables in-memory caching of the result - skip downloading the same image next time. | boolean | No | false | All |
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 | All |
headers | HTTP headers to be sent along with the GET request to download the image | Record<string, string> | No | undefined | iOS, Android |
pixelSpacing | How many pixels to skip when iterating over image pixels. Higher means better performance (note: value cannot be lower than 1). | number | No | 5 | Android |
quality | Highest implies no downscaling and very good colors. | 'lowest' 'low' 'high' 'highest' | No | "low" | iOS, Web |
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 app.
- Since the implementation of each platform is different you can get different color results for each.