Performance issue

[NastuzziSamy]

Bug

When I navigate to the screen where the package is used twice, the screen freezes and takes 1 sec or more to load.

Environment info

Library	Version
react-native-image-colors	1.2.7

Reproducible sample code

try {
	if (isExpo) throw null;

	const ImageColors = require('react-native-image-colors').default;

	getColorFromImage = async (image, callback) => {
		ImageColors.getColors(image)
			.then((color) => {
				if (color.platform === 'android') {
					return callback(color.muted);
				}
			})
			.catch(() => {});
	};
} catch {
	getColorFromImage = (image, callback) => {
		callback(Colors.lightGreen);
	};
}

[osamaqarem]

Hello, sorry about the trouble. Can you post an example highlighting the issue that can also be run?

[NastuzziSamy]

Hi @osamaqarem , thank you for your reply.

import * as React from 'react';
import { View } from 'react-native';

try {
	if (isExpo) throw null;

	const ImageColors = require('react-native-image-colors').default;

	getColorFromImage = async (image, callback) => {
		ImageColors.getColors(image)
			.then((color) => {
				if (color.platform === 'android') {
					return callback(color.muted);
				}
			})
			.catch(() => {});
	};
} catch {
	getColorFromImage = (image, callback) => {
		callback('#fff');
	};
}

function Card({ url }) {
	const [color, setColor] = React.useState(null);

	React.useEffect(() => {
		getColorFromImage(url, (color) => setColor(color));		
	}, [url]);

	return <View style={{ backgroundColor: color, padding: 25 }} />;
}

export default function HomeScreen() {
	return (
		<View>
			<Card url="'https://i.ibb.co/RzGLN8P/edgar-castrejon-1-SPu0-KT-Ejg-unsplash.jpg'" />
			<Card url="https://i.ibb.co/5cJLY1b/cala-w6ft-Fb-PCs9-I-unsplash.jpg" />
		</View>
	);
};

[osamaqarem]

I will look into it some more but for now I can say that it will definitely lag but not beacuse the library is used twice, but because this image https://i.ibb.co/RzGLN8P/edgar-castrejon-1-SPu0-KT-Ejg-unsplash.jpg you're using is 2.7MB in size with a very high resolution (3751 × 4689).

[osamaqarem]

thanks for reporting this. I've looked into it and it's an Android only issue. I think downloading a large image on the MessageQueueThread is probably locking it up and causing performance issues for other modules that need to use this thread. I'll look into adding multithreading to the Android implementation.

[NastuzziSamy]

Hi @osamaqarem, thank you for investigating this. Nice if you can improve this package ! 💪

[osamaqarem]

Happy to help 😄

Please try v1.2.8 The UI should no longer freeze on Android.
But please note if either the image is too large or the internet connection is slow it would still take some time for the image to be downloaded before colors are extracted. To make this faster either use smaller images so downloading is faster, or use local images (we can download image ahead of time, save it as a file to cache) and pass URI to this ImageColors package.

https://github.com/osamaqarem/react-native-image-colors/releases/tag/v1.2.8

I will close this issue for now. But please feel free to reopen it if you still have UI freezing issue on Android.