Package Exports

react-native-image-colors
react-native-image-colors/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-image-colors) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-image-colors

Publish size

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.

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

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<string, string>`	`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.