Skip to content
Library to extract the dominant colors from an image in React Native both android and ios!
Swift Java JavaScript Objective-C Ruby
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android
ios
.DS_Store
.npmrc
LICENSE
README.md
RNDominantColor.podspec
index.js
package.json

README.md

rn-dominant-color

PRs Welcome npm version
Extract the dominant colors of an image for android and ios.
Thanks react-native-dominant-color for android module

Getting started

$ yarn add rn-dominant-color

Mostly automatic installation

For react-native <= 60:
$ react-native link rn-dominant-color

Android

  1. Rebuild your app.

iOS

  1. $ cd ios && pod install

Usage

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { getColorFromURL } from 'rn-dominant-color';

const imageUrl = 'http://donapr.com/wp-content/uploads/2016/03/RRUe0Mo.png';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    image: {
        width: 300,
        height: 300,
        borderRadius: 10
    }
});

class Example extends Component {
    constructor() {
        super();
        this.state = {
            color: '#ffffff',
        };
    }

    componentWillMount() {
        let self = this;
        getColorFromURL(imageUrl).then(colors => {
            this.setState({color: colors.primary})
        })
    }

    render() {
        return (
            <View style={[styles.container, {backgroundColor: this.state.color }]}>
                <Image style={styles.image} source={{ uri: imageUrl}} />
            </View>
        );
    }
}

API

Methods

  • getColorFromURL(imageUrl, callback): Callback returns an object with the prominent colors from the image. Object properties are primary, secondary, background and detail. If some color doesn't exist will return #00000000.
You can’t perform that action at this time.