Image

This document covers Image component and Image size style names available in Shoutem UI toolkit.

List image thumbnail (65x65)

List image thumbnail (65x65) example

JSX Declaration

<Image
  styleName="small"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

List video thumbnail (145x92)

List video thumbnail (145x92) example

JSX Declaration

<Image
  styleName="medium"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

Card image thumbnail (180x85)

Card image thumbnail (180x85) example

JSX Declaration

<Image
  styleName="medium-wide"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

Avatar thumbnail (25x25)

Avatar thumbnail (25x25) example

JSX Declaration

<Image
  styleName="small-avatar"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

Avatar image (145x145)

Avatar image (145x145) example

JSX Declaration

<Image
  styleName="medium-avatar"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

List medium image (145x145)

List medium image (145x145) example

JSX Declaration

<Image
  styleName="medium-square"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

List large thumbnail (375x200)

List large thumbnail (375x200) example

JSX Declaration

<Image
  styleName="large-banner"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

Featured image (365x345) example

JSX Declaration

<Image
  styleName="featured"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

Detail large photo (375x581)

Detail large photo (375x581) example

JSX Declaration

<Image
  styleName="large-portrait"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

Detail medium photo (375x280)

Detail medium photo (375x280) example

JSX Declaration

<Image
  styleName="large"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

Detail wide photo (375x238)

Detail wide photo (375x238) example

JSX Declaration

<Image
  styleName="large-wide"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>

Detail square photo (375x375)

Detail square photo (375x375) example

JSX Declaration

<Image
  styleName="large-square"
  source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png'}} />
/>