react-native-yaimage

Yet another Image component for React Native with images cached into file system.

Simple and flexible.

Installation

1. npm install react-native-yaimage --save

2. Link react-native-fetch-blob which is a dependency:

   react-native link react-native-fetch-blob

Usage

• Just replace Image with YaImage, add renderLoadingIndicator prop to control the UI for feedback, e.g.

  import YaImage from 'react-native-yaimage';
  
  <YaImage
    source={{ uri: 'https://facebook.github.io/react-native/img/react-native-congratulations.png' }}
    style={styles.image}
    renderLoadingIndicator={() => <Text>Loading...</Text>}
  />

• Not using Image component? imageComponent comes to rescue, e.g. ResponsiveImage or PhotoView

  // ResponsiveImage
  <YaImage
    source={{ uri: 'https://facebook.github.io/react-native/img/react-native-congratulations.png' }}
    style={styles.image}
    initWidth="138"
    initHeight="138"
    renderLoadingIndicator={() => <Text>Loading...</Text>}
    imageComponent={ResponsiveImage}
  />
  
  // PhotoView
  <YaImage
    source={{ uri: this.props.image }}
    minimumZoomScale={0.5}
    maximumZoomScale={3}
    androidScaleType="centerInside"
    onLoad={() => console.log('Image loaded!')}
    style={[{ width: this.props.width, height: this.props.height }, iosImageStyle]}
    onTap={Actions.pop}
    renderLoadingIndicator={() => <Text>Loading...</Text>}
    imageComponent={PhotoView}
  />

• Cache operations

  import imageCache from 'react-native-yaimage/cache';
  
  imageCache.clear().then(() => console.log('cleared'));
  imageCache.size().then(v => console.log(`${v} bytes`));

Props

• ...Image.propTypes - Image Props

• renderLoadingIndicator - func What to show when loading

• renderLoadError - func What to show when load error, defaults to renderLoadingIndicator

• imageComponent - func Which component class to use as the Image component, defaults to Image

• renderLoadedImage - func What to show when loaded, arguments passed are props of this component instance, source with the uri of the cached file; defaults to (props, source) => React.createElement(props.imageComponent, { ...props, source })

• fetchTimeout - number timeout for remote fetching, defaults to 30000(ms)

• cachePathPattern - string Where to store the loaded, a template interpolated with options {uri, MD5}, uri is the remote URI, MD5 is the hash function; defaults to '${uri.hostname()}/${MD5(uri.toString())}${uri.suffix() ? ("." + uri.suffix()) : ""}', that means... e.g. https://facebook.github.io/react-native/img/react-native-congratulations.png will be cached at cacheRoot/facebook.github.io/06d46276f7fb741e7ebd0dfee4ca8d6a.png. You can customize it if you know what you are doing.

What if a remote uri without suffix?

Easy! I do my best to handle it for you. But how? no magic but resort to Content-Type of the HTTP response, e.g. with the default cachePathPattern, http://localhost:9000/ebooks/5805f2d9dc8877b70da04a2a/figures/10 will be cached at cacheRoot/localhost/9375a0b9b094e04bcf0d9448f2400036.jpg if the Content-Type is image/jpeg.

Alternatives

• jayesbe/react-native-cacheable-image
• remobile/react-native-cache-image