*NOTE: * This was forked from hu9osaez to get support for promises which he did not release
react-native-vibrant-color
Extract the dominant colors of an image (Just for Android).
Getting started
$ npm install react-native-vibrant-color --save
Mostly automatic installation
$ react-native link react-native-vibrant-color
Manual installation
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.idanlo.rnvibrantcolor.RNVibrantColorPackage;
to the imports at the top of the file - Add
new RNVibrantColorPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-vibrant-color' project(':react-native-vibrant-color').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vibrant-color/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-vibrant-color')
Usage
;;; const imageUrl = 'https://source.unsplash.com/random/800x600'; const styles = StyleSheet; { super; thisstate = color: '#ffffff' ; } { ; } { return <View style=stylescontainer backgroundColor: thisstatecolor > <Image style=stylesimage source= uri: imageUrl /> </View> ; }
API
Methods
colorsFromUrl(imageUrl)
: Promise resolves an object with the prominent colors from the image. Object properties areaverageColor
,dominantColor
,vibrantColor
,darkVibrantColor
andlightVibrantColor
. If some color doesn't exist will return#CCCCCC
.