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

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

Config?

The config object is optional.

ImageColorsResult

Every result object contains a respective platform key to help narrow down the type.

AndroidImageColors

WebImageColors

IOSImageColors

Notes

• There is an example app.
• Since the implementation of each platform is different you can get different color results for each.