Socket
Socket
Sign inDemoInstall

react-native-image-colors

Package Overview
Dependencies
794
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-image-colors

Fetch prominent colors from an image.


Version published
Maintainers
1
Weekly downloads
9,938
decreased by-46.56%

Weekly downloads

Readme

Source

react-native-image-colors

Platform NPM Badge Publish size PRs Welcome

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.

Installation

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

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.

PropertyDescriptionTypeDefaultSupported platforms
fallbackIf a color property couldn't be retrieved, it will default to this hex color stringstring"#000000"All
cacheEnables in-memory caching of the result - skip downloading the same image next time.booleanfalseAll
keyUnique 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.stringundefinedAll
headersHTTP headers to be sent along with the GET request to download the imageRecord<string, string>undefinediOS, Android
pixelSpacingHow many pixels to skip when iterating over image pixels. Higher means better performance (note: value cannot be lower than 1).number5Android
qualityHighest 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
PropertyType
dominantstring
averagestring
vibrantstring
darkVibrantstring
lightVibrantstring
darkMutedstring
lightMutedstring
mutedstring
platform"android"
WebImageColors
PropertyType
dominantstring
vibrantstring
darkVibrantstring
lightVibrantstring
darkMutedstring
lightMutedstring
mutedstring
platform"web"
IOSImageColors
PropertyType
backgroundstring
primarystring
secondarystring
detailstring
platform"ios"

Notes

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

Keywords

FAQs

Last updated on 04 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc