react-native-aisino-fast-image

🚩 FastImage, performant React Native image component.

Usage no npm install needed!

<script type="module">
  import reactNativeAisinoFastImage from 'https://cdn.skypack.dev/react-native-aisino-fast-image';
</script>

README

🚩 aisinoFastImage

Performant React Native image component.

Usage

# Install
yarn add react-native-aisino-fast-image

# Automatic linking. (other linking methods listed below)
react-native link react-native-aisino-fast-image

import FastImage from 'react-native-aisino-fast-image'

const YourImage = () =>
  <FastImage
    style={styles.image}
    source={{
      uri: 'https://unsplash.it/400/400?image=1',
      headers:{ Authorization: 'someAuthToken' },
      priority: FastImage.priority.normal,
    }}
    resizeMode={FastImage.resizeMode.contain}
  />

Properties

source?: object

Source for the remote image to load.

source.uri?: string

Remote url to load the image from. e.g. 'https://facebook.github.io/react/img/logo_og.png'.

source.headers?: object

Headers to load the image with. e.g. { Authorization: 'someAuthToken' }.

source.priority?: enum

  • FastImage.priority.low - Low Priority.
  • FastImage.priority.normal (Default) - Normal Priority.
  • FastImage.priority.high - High Priority.

source.cache?: enum

  • FastImage.cacheControl.immutable - (Default) - Only updates if url changes.
  • FastImage.cacheControl.web - Use headers and follow normal caching procedures.
  • FastImage.cacheControl.cacheOnly - Only show images from cache, do not make any network requests.

resizeMode?: enum

  • FastImage.resizeMode.contain - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
  • FastImage.resizeMode.cover (Default) - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
  • FastImage.resizeMode.stretch - Scale width and height independently, This may change the aspect ratio of the src.
  • FastImage.resizeMode.center - Do not scale the image, keep centered.

onLoadStart?: () => void

Called when the image starts to load.

onProgress?: (event) => void

Called when the image is loading.

e.g. onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}

onLoad?: (event) => void

Called on a successful image fetch. Called with the width and height of the loaded image.

e.g. onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}

onError?: () => void

Called on an image fetching error.

onLoadEnd?: () => void

Called when the image finishes loading, whether it was successful or an error.

style

A React Native style. Supports using borderRadius.

fallback: boolean

If true will fallback to using Image. In this case the image will still be styled and laid out the same way as FastImage.

Static Methods

FastImage.preload: (source[]) => void

Preload images to display later. e.g.

FastImage.preload([
  {
    uri: 'https://facebook.github.io/react/img/logo_og.png',
    headers: { Authorization: 'someAuthToken' },
  },
  {
    uri: 'https://facebook.github.io/react/img/logo_og.png',
    headers: { Authorization: 'someAuthToken' },
  },
])

Licenses

  • FastImage - MIT
  • SDWebImage - MIT
  • Glide - Apache-2.0