Image

You can use the Image component to load and render bitmap images (such as PNG, JPG) or vector images (SVG). It automatically renders with the appropriate method depending on the image format.

Signature

declare function Image(props: ImageProps): import('react/jsx-runtime').JSX.Element;

Parameter

• propsobject
  

  The props object passed to the component.

  • props.styleobject
    

    An object that defines the style for the image component. It can include layout-related properties like width and height.

  • props.sourceobject
    

    An object containing information about the image resource to load.

    • props.source.uristring
      

      The URI address representing the image resource to load.

    • props.source.cache'immutable' | 'web' | 'cacheOnly' · 'immutable'
      

      An option to set the image caching strategy. This applies only to bitmap images. The default value is immutable.

  • props.onLoadStart() => void
    

    A callback function that is called when image loading starts.

  • props.onLoadEnd() => void
    

    A callback function that is called when image loading finishes.

  • props.onError() => void
    

    A callback function that is called when an error occurs during image loading.

Example

Example: Loading and rendering an image

The following example shows how to load bitmap and vector image resources, and how to print an error message to console.log if an error occurs.

import { Image } from '@granite-js/react-native';
import { View } from 'react-native';

export function ImageExample() {
  return (
    <View>
      <Image
        source={{ uri: 'my-image-link' }}
        style={{
          width: 300,
          height: 300,
          borderWidth: 1,
        }}
        onError={() => {
          console.log('Failed to load image');
        }}
      />

      <Image
        source={{ uri: 'my-svg-link' }}
        style={{
          width: 300,
          height: 300,
          borderWidth: 1,
        }}
        onError={() => {
          console.log('Failed to load image');
        }}
      />
    </View>
  );
}