npm install react-native-image-colors

Fetch prominent colors from an image.

About react-native-image-colors

React-native-image-colors is a powerful npm package designed specifically for mobile and web developers using React Native. This innovative module allows developers to extract prominent colors from any image, which can be a critical feature for dynamic theming or creating visually engaging user interfaces. By using react-native-image-colors, developers can ensure that the UI elements adapt to the colors of the images dynamically, enhancing the aesthetic appeal and the overall user experience. This feature is particularly useful in applications where images play a crucial role, such as in galleries, shopping apps, or social media platforms where the UI needs to be as engaging as the content itself.

To start utilizing this functionality in your project, you can easily integrate the package by running the command 'npm install react-native-image-colors'. Once installed, the module supports multiple platforms including Android, iOS, Expo, and Web, making it a versatile choice for developers looking to maintain consistency across different devices. The installation process is straightforward and once incorporated, it allows for the fetching of color data such as vibrant, dark, and light variants of the image colors. This can significantly aid in creating a cohesive color scheme that complements the displayed images, thereby elevating the user interface.

The react-native-image-colors module not only enhances the visual elements of an app but also contributes to a more intuitive user experience. By automatically adjusting the theme based on the colors in the images, the application remains visually consistent, which can help in maintaining user interest and engagement. Additionally, this module is optimized for performance and is designed to work seamlessly without affecting the load times of your application, which is crucial for maintaining a smooth and responsive user interface. Whether you are developing a new app or looking to upgrade an existing one, incorporating react-native-image-colors can significantly enhance the functionality and aesthetic value of your application.

More from osamaqarem

osamaqarem npm packages

Find the best node modules for your project.

Search npm

react-native-image-colors

Fetch prominent colors from an image...

Read more

Dependencies

Core dependencies of this npm package and its dev dependencies.

node-vibrant, @release-it/conventional-changelog, @types/react, @types/react-native, babel-preset-expo, eslint, expo-module-scripts, expo-modules-core, jest, jest-expo, prettier, react-native, release-it

Documentation

A README file for the react-native-image-colors code repository. View Code

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

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:

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