rn-dominant-color

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

You need to have swift enabled in your project. In order to have this installed follow these steps: #https://github.com/iran-react-community/rn-dominant-color/issues/3

1. In project navigator right click on project name and create new swift file (any name
2. After that press save and click on Create Bridging Header.
3. Recompile your project

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.