https://github.com/ngnclht1102/rn-cached-image
A react native cached, animated, and auto chooses the best-resolution image for the current screen.
https://github.com/ngnclht1102/rn-cached-image
cached-images cached-network-images react-native react-native-image
Last synced: 2 months ago
JSON representation
A react native cached, animated, and auto chooses the best-resolution image for the current screen.
- Host: GitHub
- URL: https://github.com/ngnclht1102/rn-cached-image
- Owner: ngnclht1102
- Created: 2021-09-20T06:38:44.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-21T10:49:45.000Z (over 4 years ago)
- Last Synced: 2025-09-01T21:15:31.956Z (8 months ago)
- Topics: cached-images, cached-network-images, react-native, react-native-image
- Language: JavaScript
- Homepage:
- Size: 12.2 MB
- Stars: 29
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# A react native cached, animated and auto chooses the best-resolution image for the current screen.
#### This is a simple react native image component that
- enable image caching (save to cache directory).
- add loading animation while the image is loading.
- add error placeholder if image loading has any errors.
- also wrap the https://github.com/expo/react-native-responsive-image so it can choose the correct image size for loading
## Installation
```
yarn add @ngnclht/rn-cached-image
```
Import it with:
```js
import RNCachedImage from ' @ngnclht/rn-cached-image';
```
## Demo: Loading animation and caching
## Demo: Loading failed:
## Usage
RNCachedImage accepts the same props as Image, and some new props.
For multiple sources, we have a new prop called `sources`. The `sources` prop is
an object whose keys are pixel ratios (that is, screen scales like "2" or "3").
Its values are Image sources to display on screens with the respective pixel ratio.
#### Multiple sources:
```js
```
#### Caching
```js
```