Image

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

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)

JSX Declaration

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

List video thumbnail (145x92)

JSX Declaration

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

Card image thumbnail (180x85)

JSX Declaration

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

Avatar thumbnail (25x25)

JSX Declaration

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

Avatar image (145x145)

JSX Declaration

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

List medium image (145x145)

JSX Declaration

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

List large thumbnail (375x200)

JSX Declaration

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

Featured image (365x345)

JSX Declaration

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

Detail large photo (375x518)

JSX Declaration

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

Detail medium photo (375x280)

JSX Declaration

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

Detail wide photo (375x238)

JSX Declaration

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

Detail square photo (375x375)

JSX Declaration

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