Wondering what’s next for npm?Check out our public roadmap! »

    react-native-image-colors
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.7 • Public • Published

    react-native-image-colors

    Platform TypeScript NPM Badge 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 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.

    Install

    npm i react-native-image-colors

    DownloadsWeekly Downloads

    590

    Version

    1.2.7

    License

    MIT

    Unpacked Size

    121 kB

    Total Files

    30

    Last publish

    Collaborators

    • avatar