Image

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

List large thumbnail (375x200) example

API

Props

Image has no specific (custom) Props, however, it supports every prop that the standard React Native Image component supports. For full list of available props, visit React Native Image component documentation.

Style names

For most of available Image style names, Image dimensions are scaled depending on screen dimensions. As example, Image with featured style name applied will have dimensions of 365x345px (width, height respectively) on device with screen width of 375px. If device’s screen width is larger, then the image dimensions will be larger than 365x345px and similar, if device screen width is smaller than 375px, actual image will be smaller than 365x345px.

  • featured: width: (365 / 375) * window.width height: (345 / 375) * window.width
  • large: width: window.width height: (280 / 375) * window.width
  • large-portrait: width: window.width height: (280 / 375) * window.width
  • large-banner: width: window.width height: (200 / 375) * window.width
  • large-square: width: window.width height: window.width
  • large-wide: width: window.width height: (238 / 375) * window.width
  • large-ultra-wide: width: window.width height: (130 / 375) * window.width
  • medium-avatar: rounded image, 72.5px radius
  • medium: width: 145px x height: 92px
  • medium-wide: width: (180/375) * window.width height: 85px
  • medium-square: width: 145px height: 145px
  • medium-portrait: width: (209/375) height: 139px
  • rounded-corners: defines rounded corners, as defined in Theme
  • small-avatar: rounded image, 25px radius
  • small: width: 65px height: 65px

Style

  • Supports every Style prop that the standard React Native Image component supports

Examples

List image thumbnail (65x65)

List image thumbnail (65x65) example

JSX Declaration

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

List video thumbnail (145x92)

List video thumbnail (145x92) example

JSX Declaration

<Image
  styleName="medium"
  source={{ uri: 'https://shoutem.github.io/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://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
/>

Avatar thumbnail (25x25)

Avatar thumbnail (25x25) example

JSX Declaration

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

Avatar image (145x145)

Avatar image (145x145) example

JSX Declaration

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

Featured image (365x345) example

JSX Declaration

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

Detail large photo (375x518)

Detail large photo (375x518) example

JSX Declaration

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

Detail medium photo (375x280)

Detail medium photo (375x280) example

JSX Declaration

<Image
  styleName="large"
  source={{ uri: 'https://shoutem.github.io/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://shoutem.github.io/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://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
/>