Image

Image shows an image bundled with the plugin: a PNG, JPEG or WebP file imported from the project.

import { Image, Text, View } from '@soundor/react';

import cover from '../assets/cover.png';

const MODES = ['cover', 'contain', 'stretch', 'center'] as const;

// A bundled image (480 × 300 pixels) in square boxes: resizeMode says how
// it fills a box of another shape.
export default function ResizeModes() {
  return (
    <View style={{ flexDirection: 'row', gap: 12 }}>
      {MODES.map((mode) => (
        <View key={mode} style={{ alignItems: 'center', gap: 6 }}>
          <Image
            source={cover}
            accessibilityLabel={`A waveform, ${mode}`}
            style={{
              width: 96,
              height: 96,
              borderRadius: 8,
              backgroundColor: '#24262c',
              resizeMode: mode,
            }}
          />
          <Text style={{ color: '#8b8f98', fontSize: 12 }}>{mode}</Text>
        </View>
      ))}
    </View>
  );
}

image.tsxSource

In a plugin, import the image from the project, and give it a label:

import { Image } from '@soundor/react';

import logo from './logo.png';

export function Logo() {
  return (
    <Image
      source={logo}
      accessibilityLabel="Acme Audio"
      style={{ width: 120, height: 40, resizeMode: 'contain' }}
    />
  );
}

Size: an image is its pixels' size unless styled. Given a box, resizeMode in its style says how it fills it: cover, contain, stretch or center.
Source: import logo from './logo.png' gives a bundled asset; the CLI embeds it in the plugin. There is no loading from URLs or files.
To assistive technology an image is decorative unless it is given a label (accessibilityLabel), a role or accessible.

Props

Prop

Type

Image also takes the event props and the accessibility props.

PropsCopy Anchor Link

On this page

Props