1.7.2 • Published 3 years ago
rn-dominant-color v1.7.2
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
- Rebuild your app.
iOS
$ 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
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 areprimary
,secondary
,background
anddetail
. If some color doesn't exist will return#00000000
.