rsys2022/react-native-image-colors

Fetch prominent colors from an image.

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':
    // 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<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.