Image

Analog of the Image component at React Native, React Sketchapp. Renders Figma rectangle node with background.

Props

PropTypeDefaultNote
nameStringThe name to be displayed in the Figma Layers List
sourceStringPath for loading image
resizeModeResizeMode
styleStyle
onSelectionEnterFunctionSelection enter event callback
onSelectionLeaveFunctionSelection leave event callback
onLayoutFunctionEvent is fired once the layout has been calculated
onNodeIdFuctionGetting Figma Node ID callback
type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center' | 'repeat' | 'none';

Examples

Absolute path supported:

<Image
source="http://placekitten.com/400"
resizeMode="contain"
style={{
height: 400,
width: 400,
}}
/>

Webpack image loader supported:

import * as img from "./icon.png";
...
<Image
source={img}
resizeMode="contain"
style={{
height: 400,
width: 400,
}}
/>