This implementation is incomplete: only works correctly (I think) for jpg files, we still need to find out a simplified version of jimp that does not import anything from node
To use this impl, add these packages and copy the files to a folder
"@vibrant/core": "^3.2.1-alpha.1",
"@vibrant/generator-default": "^3.2.1-alpha.1",
"@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
Example usage:
My implementation works for this hook:
import { Palette } from '@vibrant/color';
import { useEffect, useState } from 'react';
// Files of this gist:
import { Vibrant } from '../react-native-vibrant';
export const useImagePalette = (url: string) => {
const [colors, setColors] = useState<Palette>();
useEffect(() => {
if (!url) {
return;
}
let mounted = true;
fetch(url)
.then((response) => response.arrayBuffer())
.then((buffer) => Vibrant.from(buffer).getPalette())
.then((palette) => {
mounted && setColors(palette);
})
.catch((err) => {
console.log(err);
});
return () => {
mounted = false;
};
}, [url]);
return colors;
};