Image

An accessibile image component with support for image resizing, default image, and child content.

Props

accessibilityLabel string

The text that's read by a screenreader when someone interacts with the image.

accessible bool

When false, the view is hidden from screenreaders. Default: true.

children any

Content to display over the image.

defaultSource { uri: string }

An image to display as a placeholder while downloading the final image off the network.

onError function

Invoked on load error with {nativeEvent: {error}}.

onLoad function

Invoked when load completes successfully.

onLoadEnd function

Invoked when load either succeeds or fails,

onLoadStart function

Invoked on load start.

resizeMode oneOf('contain', 'cover', 'none', 'stretch')

Determines how to resize the image when the frame doesn't match the raw image dimensions. Default: stretch.

source { uri: string }

uri is a string representing the resource identifier for the image, which could be an http address or a base64 encoded image.

style style

View style

Defaults:

{
  alignSelf: 'flex-start',
  backgroundColor: 'lightGray'
}

testID string

Used to locate a view in end-to-end tests.

Examples

import placeholderAvatar from './placeholderAvatar.png'
import React, { Image } from 'react-native-web'

const { Component, PropTypes } = React;

class Avatar extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = { loading: true }
  }

  static propTypes = {
    size: PropTypes.oneOf(['small', 'normal', 'large']),
    testID: Image.propTypes.testID,
    user: PropTypes.object
  }

  static defaultProps = {
    size: 'normal'
  }

  _onLoad(e) {
    console.log('Avatar.onLoad', e)
    this.setState({ loading: false })
  }

  render() {
    const { size, testID, user } = this.props
    const loadingStyle = this.state.loading ? { styles.loading } : { }

    return (
      <Image
        accessibilityLabel={`${user.name}'s profile picture`}
        defaultSource={{ uri: placeholderAvatar }}
        onLoad={this._onLoad.bind(this)}
        resizeMode='cover'
        source={{ uri: user.avatarUrl }}
        style={{ ...styles.base, ...styles[size], ...loadingStyle }}
      />
    )
  }
}

const styles = {
  base: {
    borderColor: 'white',
    borderRadius: '5px',
    borderWidth: '5px'
  },
  loading: {
    opacity: 0.5
  },
  small: {
    height: '32px',
    width: '32px'
  },
  normal: {
    height: '48px',
    width: '48px'
  },
  large: {
    height: '64px',
    width: '64px'
  }
}

2.6 KiB Raw Blame History

Image

Props

Examples

2.6 KiB

Raw Blame History