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: #iran-react-community#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

You may run to this issue if you don't create swift file:

warning: Could not find or use auto-linked library 'swiftWebKit'
Undefined symbols for architecture x86_64:
  "__swift_FORCE_LOAD_$_swiftWebKit", referenced from:
      __swift_FORCE_LOAD_$_swiftWebKit_$_RNDominantColor in libRNDominantColor.a(RNDominantColor.o)
      __swift_FORCE_LOAD_$_swiftWebKit_$_RNDominantColor in libRNDominantColor.a(UIImageColors.o)
      __swift_FORCE_LOAD_$_swiftWebKit_$_lottie_react_native in liblottie-react-native.a(ContainerView.o)
      __swift_FORCE_LOAD_$_swiftWebKit_$_lottie_react_native in liblottie-react-native.a(AnimationViewManagerModule.o)
     (maybe you meant: __swift_FORCE_LOAD_$_swiftWebKit_$_lottie_react_native, __swift_FORCE_LOAD_$_swiftWebKit_$_RNDominantColor )
ld: symbol(s) not found for architecture x86_64

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.