# react-native-yaimage

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

Latest version **1.2.1** (published 2016-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-yaimage
pnpm add react-native-yaimage
yarn add react-native-yaimage
bun add react-native-yaimage
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2016-12-28 |
| First published | 2016-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | Zenkie Zhu |
| Maintainers | zenkiezhu |
| Keywords | react-native, image, cache |

## Links

- npm: https://www.npmjs.com/package/react-native-yaimage
- Repository: https://github.com/z4139jq/react-native-yaimage
- Homepage: https://github.com/z4139jq/react-native-yaimage#readme
- Issues: https://github.com/z4139jq/react-native-yaimage/issues
- npm.io page: https://npm.io/package/react-native-yaimage

## Dependencies (4)

- [urijs](https://npm.io/package/urijs.md) ^1.18.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.2
- [crypto-js](https://npm.io/package/crypto-js.md) ^3.1.8
- [react-native-fetch-blob](https://npm.io/package/react-native-fetch-blob.md) ^0.10.1-beta.2

## Alternatives

- [memory-cache](https://npm.io/package/memory-cache.md) — 795.0K weekly downloads
- [@httptoolkit/proxy-agent](https://npm.io/package/@httptoolkit/proxy-agent.md) — 11.2K weekly downloads
- [express-cache-controller](https://npm.io/package/express-cache-controller.md) — 5.3K weekly downloads
- [http-cache-middleware](https://npm.io/package/http-cache-middleware.md) — 4.5K weekly downloads
- [cache2](https://npm.io/package/cache2.md) — 1.5K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2016-12-28
- 1.2.0 — 2016-12-14
- 1.1.2 — 2016-11-25
- 1.1.1 — 2016-11-24
- 1.1.0 — 2016-11-23
- 1.0.0 — 2016-11-22

## README

# react-native-yaimage

[![npm version](https://img.shields.io/npm/v/react-native-yaimage.svg)](https://www.npmjs.com/package/react-native-yaimage)
[![npm downloads](https://img.shields.io/npm/dt/react-native-yaimage.svg)](https://www.npmjs.com/package/react-native-yaimage)
[![David](https://david-dm.org/zenkiezhu/react-native-yaimage.svg)](https://david-dm.org/zenkiezhu/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][react-native-fetch-blob-ref] 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.

    ```javascript
    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][ResponsiveImage-ref] or [PhotoView][PhotoView-ref]

    ```javascript
    // 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

    ```javascript
    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][Image-ref]

* `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][URI-ref], [MD5][MD5-ref] 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][react-native-cacheable-image-ref]
* [remobile/react-native-cache-image][react-native-cache-image-ref]


[react-native-cacheable-image-ref]: https://github.com/jayesbe/react-native-cacheable-image
[react-native-cache-image-ref]: https://github.com/remobile/react-native-cache-image
[Image-ref]: https://facebook.github.io/react-native/docs/image.html#props
[URI-ref]: http://medialize.github.io/URI.js/docs.html
[MD5-ref]: https://github.com/brix/crypto-js#usage
[ResponsiveImage-ref]: https://github.com/Dharmoslap/react-native-responsive-image
[PhotoView-ref]: https://github.com/alwx/react-native-photo-view
[react-native-fetch-blob-ref]: https://github.com/wkh237/react-native-fetch-blob#installation

---
_Source: https://npm.io/package/react-native-yaimage · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._