Skip to main content

Function: useMaterialColorFromImage()

useMaterialColorFromImage(sourceImage?, options?, imageOptions?): UseMaterialColorFromImageInstance

Defined in: hooks/use-material-color-from-image/useMaterialColorFromImage.tsx:72

Get the source color from an image and return MaterialColor.

If you already have the URI, for instance you get an image from a file/document or photo picker, or an online image, you can use useMaterialColorFromImageUri.

You may don't need this if you wish to get the source color only from an image. Then, you can use ImageUtils.sourceColorFromImageUri(), or ImageUtils.sourceHexColorFromImageUri()

You can pass undefined, or null, or empty string to the source image (first argument) to get material color later.

Parameters​

sourceImage?​

ImageSourcePropType | null

options?​

UseMaterialColorFromImageOptions

imageOptions?​

SourceColorFromImageProcessingOptions

Returns​

UseMaterialColorFromImageInstance

Example​

import {
	MaterialColor,
	useMaterialColorFromImage,
} from "react-native-material-color"

import YourImage from "./your-image.png"

function YourReactComponent() {
	const
		materialColor =
			useMaterialColorFromImage(
				// you can also use the require style
				YourImage,

				// optional argument
				{
					variant: MaterialColor.Variant.TONAL_SPOT,
				},

				// optional argument
				{
					timeout: 10000,
				}, // optional argument
			)
	
	console.log("Color Scheme", materialColor.colorScheme)
}

Platform​

Android

Platform​

iOS

Platform​

macOS

Platform​

Web