Image

function Image(__namedParameters: ImageSourceProps): ReactElement;

The image component: hand it the source and it decodes, registers, and draws when ready - no hook, no null-gating in user code.

<Canvas style={{ width: 300, height: 200 }}>
  <TgfxImage source={require('./cat.png')} x={0} y={0} width={300} height={200} fit="cover" />
  <TgfxImage source="https://picsum.photos/300/200" x={0} y={200} width={300} height={200} />
</Canvas>

Nothing draws until the decode lands (a frame or two for a local asset), and a failed load warns and stays empty - useImage's behaviour, which this wraps. The handle lives for the component's life; remounting the same source re-decodes through the shared cache.

The trade: this is a function component, so a canvas containing one leaves the direct-nodes fast path and reconciles through React. Irrelevant for typical scenes; for hundreds of animated nodes, load with useImage (or loadImage) and keep <TgfxImage image={...}>, which is a plain host tag.

Parameters

__namedParameters

ImageSourceProps

Returns

ReactElement