Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-image-colors
Advanced tools
Readme
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.
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.
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
yarn add react-native-image-colors
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
}
ImageColors.getColors(uri: string, config?: Config): Promise<ImageColorsResult>
uri
A string which can be:
URL:
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.
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" |
FAQs
Fetch prominent colors from an image.
The npm package react-native-image-colors receives a total of 16,351 weekly downloads. As such, react-native-image-colors popularity was classified as popular.
We found that react-native-image-colors demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.