Fetch Prominent Colors From an Image

Fetch Prominent Colors From an Image

Fetch Prominent Colors From an Image This module is a wrapper around the Palette class on Android and UIImageColors on iOS.

react-native-image-colors

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 and UIImageColors on iOS.

Installation

$ npm install react-native-image-colors

or

$ yarn add react-native-image-colors

Android

Rebuild the app.

iOS

Install the pod, then rebuild the app.

npx pod-install

RN < 0.62: if you face a compilation error while building, your Xcode project likely does not support Swift which this package requires. You can fix this by either a) Creating a blank dummy swift file using Xcode or b) Following steps 1,2,3 here.

Usage

Start by importing the module

import ImageColors from "react-native-image-colors"

🎨 Fetch colors

const colors = await ImageColors.getColors(URI, config)

URI

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

Property Description Type Required Default
fallback If a color property couldn't be retrieved, it will default to this hex color string (note: do not use shorthand hex. e.g. #fff). string No "#000000"
pixelSpacing (Android only) How many pixels to skip when iterating over image pixels. Higher means better performance (note: value cannot be lower than 1). number No 5
quality (iOS only) Highest implies no downscaling and very good colors, but it is very slow. See UIImageColors 'lowest'
'low'
'high'
'highest' No "low"

Result (android)

On android, you will get an object with the following color properties, plus a platform key to help you figure out that this is the android result type.

Property Type
dominant string
average string
vibrant string
darkVibrant string
lightVibrant string
darkMuted string
lightMuted string
muted string
platform "android"

Result (iOS)

On iOS, you get the following color properties object, plus the respective platform key.

Property Type
background string
primary string
secondary string
detail string
platform "ios"

Example

const coolImage = require("./cool.jpg")

const colors = await ImageColors.getColors(coolImage, {
  fallback: "#228B22",
})

if (colors.platform === "android") {
  // Access android properties
  // e.g.
  const averageColor = colors.average
} else {
  // Access iOS properties
  // e.g.
  const backgroundColor = colors.background
}

Notes

  • There is an example react-native project.

Download Details:

Author: osamaqarem

Source Code: https://github.com/osamaqarem/react-native-image-colors

react-native react mobile-apps

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.