react-native-image-colors

!Platform !Publish size !PRs Welcome

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

• Expo
• React Native CLI
• Web

Expo

Requirements

• Expo SDK 47+

yarn add react-native-image-colors

npx expo prebuild

iOS

npx expo run:ios

Android

npx expo run:android

The example is an expo app.

React Native CLI

Requirements

• React Native v0.70.0+
• iOS 13.4+
• Expo modules must be configured

Users on < RN0.69 and older can use v1.x.x

yarn add react-native-image-colors

iOS

npx pod-install

npx react-native run-ios

Android

npx react-native run-android

Web

yarn add react-native-image-colors

Usage

import React from 'react'
import { getColors } from 'react-native-image-colors'
const useImageColors = () => {
  const [colors, setColors] = React.useState(null)
React.useEffect(() => {
    const url = 'https://i.imgur.com/68jyjZT.jpg'
getColors(url, {
      fallback: '#228B22',
      cache: true,
      key: url,
    }).then(setColors)
  }, [])
return colors
}

API

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

uri

A string which 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).

• Content URI (Android):

const contentUri = 'content://media/external/images/media/123'

Config?

The config object is optional.

| Property | Description | Type | Default | Supported platforms | | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------- | ------------------- | | fallback | If a color property couldn't be retrieved, it will default to this hex color string | string | "#000000" | All | | cache | Enables in-memory caching of the result - skip downloading the same image next time. | boolean | 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 | undefined | All | | headers | HTTP headers to be sent along with the GET request to download the image | Record | 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 | 5 | Android | | quality | Highest implies no downscaling and very good colors. | 'lowest'
'low'
'high'
'highest' | "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.