https://github.com/quenice/react-native-cacheimage
A cacheable image component for react native
https://github.com/quenice/react-native-cacheimage
android cache-image ios react-native
Last synced: 9 months ago
JSON representation
A cacheable image component for react native
- Host: GitHub
- URL: https://github.com/quenice/react-native-cacheimage
- Owner: quenice
- Created: 2018-10-12T03:40:19.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-22T06:21:43.000Z (over 7 years ago)
- Last Synced: 2025-04-10T14:17:34.449Z (about 1 year ago)
- Topics: android, cache-image, ios, react-native
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 26
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Getting started
## rn-fecth-blob
[rn-fetch-blob](https://github.com/joltup/rn-fetch-blob) is a dependency for this package that you'll need to add to your project. To install, run the following commands:
```
$ npm install rn-fetch-blob --save
$ react-native link rn-fetch-blob
```
And I recommend you install `rn-fetch-blob` base on [official guide](https://github.com/joltup/rn-fetch-blob)
## installation
`$ npm install react-native-rn-cacheimage --save`
# Usage
## Register and unregister
- Before mount the `` or `` component, should initialize and config some base params. Recommend initialize in the `componentDidMount()` inside of the top `react componet` in your App.
- When all components of your App will been unmounted, you should unregister this package. Recommend do this in the `componentWillMount()` inside of the top `react componet` in your App.
```jsx
import React from 'react'
import {AppRegistry} from 'react-native'
import {Provider} from 'react-redux'
import ReduxStore from './src/configuration/reduxStore'
import App from './src/App'
import {CacheHelper} from "react-native-rn-cacheimage";
const store = ReduxStore
class MyApp extends React.Component {
componentDidMount() {
CacheHelper.register({overwrite:false}).catch(e => console.log(e))
}
componentWillUnmount() {
CacheHelper.unregister().catch(e=>console.log(e))
}
render() {
return (
)
}
}
AppRegistry.registerComponent("YourAppName", () => MyApp);
```
## Replace `` with ``
We can use `` just like `` component, and everything is all the same besides this
```jsx
import {CacheImage} from 'react-native-rn-cacheimage'
export default class Example extends React.Component {
...
render() {
return
(
...
...
)
}
...
}
```
## Replace `` with ``
We can use `` just like `` component, and everything is all the same besides this
```jsx
import {CacheImage} from 'react-native-rn-cacheimage'
export default class Example extends React.Component {
...
render() {
return
(
...
Hello World!
...
)
}
...
}
```
## Replace `` component with ``
We can use `` just like `` component, and everything is all the same besides this
```jsx
import {AnimatedCacheImage} from 'react-native-rn-cacheimage'
export default class Example extends React.Component {
...
render() {
return
(
...
...
)
}
...
}
```
# API
## Components
About below two components, can see the detail in [Usage](#usage)
- `CacheImage`
- `AnimatedCacheImage`
## CacheHelper
### register(config:Object):Promise\
Init necessary things of current package(`react-native-rn-cacheimage`). Should call this method before mount `` or ``. Recommend call this method in the TOP component of your App.
name | desc | defaultValue
---|---|---
`config.overwrite` | Overwirte or not when the pre-cached(be downloaded just now) file has exists in the local path. | `false`
`config.dirsQuantity` | Quantity of all dirs where cached file be saved in. Recommend set a prime number | `17`
### getImagePath(uri:String):Promise\
Get the image cached local path.
name | desc | defaultValue
---|---|---
`uri` | Image uri. example: [https://xxx.xxx/xxx.jpg](#) |
`ImagePath.uri` | Image cached local path. |
`ImagePath.task` | It's the task that fetch the remote image, and you can call `task.cancel()` to cancel the fetch task manually |
### getCacheSize():Promise\
Get the size of used space of all cached images. The unit of result number is `Byte`
### getCacheSizeFormat():Promise\
Similarity to `getCacheSize()`, and difference is that the result is been formatted.
The format rule is as below:
- `0KB` <= `result` < `1024KB`, format to `KB`, eg: `134KB`
- `result` >= `1024KB`, format to `MB`, eg: `109.3MB`
### clearCache():Promise\
Clear all cached images.
### unregister():Promise\
Un-register current package, cancel all uncompleted tasks which fetch image.