Skip to content

Commit e3f8c30

Browse files
Jayasagar JagirapuJayasagar Jagirapu
Jayasagar Jagirapu
authored and
Jayasagar Jagirapu
committed
Add peer depoendencies and dependencies
1 parent f222c1f commit e3f8c30

File tree

5 files changed

+91
-1
lines changed

5 files changed

+91
-1
lines changed

.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,6 @@ typings/
5757
# dotenv environment variables file
5858
.env
5959

60+
# IntelliJ
61+
.idea
62+

.idea/vcs.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

README.md

+47-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,47 @@
1-
# react-native-image-offline
1+
# react-native-image-offline
2+
3+
## Features
4+
* By default, it always will reload the image from backend unless you specify the reloadImage={'never'}.
5+
* You can Download and cache the image upfront when you get API response from backend.
6+
* It persists all the image uris so that on second load onwards, image shown from local device! However, also reloads the latest images from backend and replace the image in offline store.
7+
* Supports fallback source static image. This will be shown if source object has 'uri' but image not exist in offline store
8+
9+
## Installation
10+
11+
**Using yarn**
12+
13+
`$ yarn add react-native-image-offline`
14+
15+
**Using npm**
16+
17+
`$ npm install react-native-image-offline --save`
18+
19+
## Basic Usage
20+
21+
##### OfflineImage with static source
22+
```
23+
<OfflineImage component={ ImageBackground }
24+
reloadImage={'always'}
25+
style={ [styles.swiperBackgroundImg, { width: this.props.width }] }
26+
resizeMode="cover"
27+
source={ require('../../../assets/images/placeholder/placeholder.png') }>
28+
<View>...</View>
29+
</OfflineImage>
30+
31+
```
32+
33+
##### OfflineImage with fallback/placeholder image
34+
```
35+
<OfflineImage component={ ImageBackground }
36+
reloadImage={'always'}
37+
style={ [styles.swiperBackgroundImg, { width: this.props.width }] }
38+
resizeMode="cover"
39+
fallbackSource={ require('../../../assets/images/placeholder/placeholder.png') }
40+
source={ { uri: this.props.serverResponse.image.link } }>
41+
<View>...</View>
42+
</OfflineImage>
43+
44+
```
45+
**Note** fallback image shown if actual image not available in offline store!
46+
47+
## Development/Contributions

package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "react-native-image-offline",
3+
"version": "0.0.1",
4+
"main": "index.js",
5+
"repository": "https://github.com/code-and-co/react-native-image-offline.git",
6+
"author": "code&co.",
7+
"license": "MIT",
8+
"keywords": [
9+
"react-native",
10+
"image offline",
11+
"image persist",
12+
"image cache"
13+
],
14+
"contributors": [
15+
{
16+
"name": "Jayasagar Jagirapu",
17+
"email": "[email protected]"
18+
}
19+
],
20+
"peerDependencies": {
21+
"react": "*",
22+
"react-native": "*",
23+
"redux": "3.*"
24+
},
25+
"dependencies": {
26+
"crypto-js": "^3.1.9-1"
27+
}
28+
}

yarn.lock

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
crypto-js@^3.1.9-1:
6+
version "3.1.9-1"
7+
resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-3.1.9-1.tgz#fda19e761fc077e01ffbfdc6e9fdfc59e8806cd8"

0 commit comments

Comments
 (0)