Skip to main content

Image

Images can be drawn by specifying the output rectangle and how the image should fit into that rectangle.

NameTypeDescription
imageSkImageImage instance.
xnumberLeft position of the destination image.
ynumberRight position of the destination image.
widthnumberWidth of the destination image.
heightnumberHeight of the destination image.
fit?FitMethod to make the image fit into the rectangle. Value can be contain, fill, cover fitHeight, fitWidth, scaleDown, none (default is contain).

Example

tsx
import { Canvas, Image, useImage } from "@shopify/react-native-skia";
 
const ImageDemo = () => {
// Alternatively, you can pass an image URL directly
// for instance: const image = useImage("https://bit.ly/3fkulX5");
const image = useImage(require("../../assets/oslo.jpg"));
return (
<Canvas style={{ flex: 1 }}>
{image && (
<Image
image={image}
fit="contain"
x={0}
y={0}
width={256}
height={256}
/>
)}
</Canvas>
);
};
tsx
import { Canvas, Image, useImage } from "@shopify/react-native-skia";
 
const ImageDemo = () => {
// Alternatively, you can pass an image URL directly
// for instance: const image = useImage("https://bit.ly/3fkulX5");
const image = useImage(require("../../assets/oslo.jpg"));
return (
<Canvas style={{ flex: 1 }}>
{image && (
<Image
image={image}
fit="contain"
x={0}
y={0}
width={256}
height={256}
/>
)}
</Canvas>
);
};

fit="contain"

fit=&quot;contain&quot;

fit="cover"

fit=&quot;cover&quot;

fit="fill"

fit=&quot;fill&quot;

fit="fitHeight"

fit=&quot;fitHeight&quot;

fit="fitWidth"

fit=&quot;fitWidth&quot;

fit="scaleDown"

fit=&quot;fitWidth&quot;

fit="none"

fit=&quot;none&quot;

Instance Methods

NameDescription
heightReturns the possibly scaled height of the image.
widthReturns the possibly scaled width of the image.
encodeToBytesEncodes Image pixels, returning result as UInt8Array
encodeToBase64Encodes Image pixels, returning result as a base64 encoded string