Skip to content

Commit af826a2

Browse files
jjayasagarjjayasagar
committed
Add offlineImage onLoadEnd method
1 parent 95ebc04 commit af826a2

File tree

5 files changed

+72
-27
lines changed

5 files changed

+72
-27
lines changed

‎README.md

+40-23
Original file line numberDiff line numberDiff line change
@@ -114,29 +114,46 @@ componentWillMount() {
114114
<View style={styles.container}>
115115
<Text>React native offline image</Text>
116116
<OfflineImage
117-
resizeMode={'center'}
118-
style={ { width: '99%', height: 110, margin: 5 } }
119-
fallbackSource={ Images.fallbackSource }
120-
source={ { uri: 'https://wrong-url/noImageExist.jpg' } }/>
121-
<OfflineImage
122-
reloadImage = { true }
123-
resizeMode={'cover'}
124-
fallbackSource={ Images.fallbackSource }
125-
style={ { width: '99%', height: 110, margin: 5 } }
126-
source={ { uri: 'https://wallpaperbrowse.com/media/images/wallpaper-for-mobile-13.jpg' } }/>
127-
<OfflineImage
128-
resizeMode={'cover'}
129-
style={ { width: '99%', height: 110, margin: 5 } }
130-
source={ { uri: 'https://wallpaperbrowse.com/media/images/tvrcnkbcgeirbxcmsbfz.jpg' } }/>
131-
<OfflineImage
132-
resizeMode={'cover'}
133-
style={ { width: '99%', height: 110, margin: 5 } }
134-
source={ { uri: 'https://wallpaperbrowse.com/media/images/mobileswall-043.jpg' } }/>
135-
<OfflineImage
136-
resizeMode={'cover'}
137-
fallbackSource={ Images.fallbackSource }
138-
style={ { width: '99%', height: 110, margin: 5 } }
139-
source={ { uri: 'https://wallpaperbrowse.com/media/images/butterfly-wallpaper_SzlKJB8.jpeg' } }/>
117+
key={'https://wrong-url/noImageExist.jpg'}
118+
resizeMode={'center'}
119+
style={ { width: '99%', height: 110, margin: 5 } }
120+
fallbackSource={ Images.fallbackSource }
121+
source={ { uri: 'https://wrong-url/noImageExist.jpg' } }/>
122+
<OfflineImage
123+
key={'https://wallpaperbrowse.com/media/images/wallpaper-for-mobile-13.jpg'}
124+
onLoadEnd={(sourceUri) => {
125+
console.log('Loading finished for image with path: ', sourceUri)
126+
}}
127+
reloadImage = { true }
128+
resizeMode={'cover'}
129+
fallbackSource={ Images.fallbackSource }
130+
style={ { width: '99%', height: 110, margin: 5 } }
131+
source={ { uri: 'https://wallpaperbrowse.com/media/images/wallpaper-for-mobile-13.jpg' } }/>
132+
<OfflineImage
133+
key={'https://wallpaperbrowse.com/media/images/tvrcnkbcgeirbxcmsbfz.jpg'}
134+
onLoadEnd={(sourceUri) => {
135+
console.log('Loading finished for image with path: ', sourceUri)
136+
}}
137+
resizeMode={'cover'}
138+
style={ { width: '99%', height: 110, margin: 5 } }
139+
source={ { uri: 'https://wallpaperbrowse.com/media/images/tvrcnkbcgeirbxcmsbfz.jpg' } }/>
140+
<OfflineImage
141+
key={'https://wallpaperbrowse.com/media/images/mobileswall-043.jpg'}
142+
onLoadEnd={(sourceUri) => {
143+
console.log('Loading finished for image with path: ', sourceUri)
144+
}}
145+
resizeMode={'cover'}
146+
style={ { width: '99%', height: 110, margin: 5 } }
147+
source={ { uri: 'https://wallpaperbrowse.com/media/images/mobileswall-043.jpg' } }/>
148+
<OfflineImage
149+
key={'https://wallpaperbrowse.com/media/images/butterfly-wallpaper_SzlKJB8.jpeg'}
150+
onLoadEnd={(sourceUri) => {
151+
console.log('Loading finished for image with path: ', sourceUri)
152+
}}
153+
resizeMode={'cover'}
154+
fallbackSource={ Images.fallbackSource }
155+
style={ { width: '99%', height: 110, margin: 5 } }
156+
source={ { uri: 'https://wallpaperbrowse.com/media/images/butterfly-wallpaper_SzlKJB8.jpeg' } }/>
140157
</View>
141158
);
142159
}

‎examples/offline-image/src/index.js

+17
Original file line numberDiff line numberDiff line change
@@ -84,25 +84,42 @@ export default class App extends React.Component {
8484
<View style={styles.container}>
8585
<Text>React native offline image</Text>
8686
<OfflineImage
87+
key={'https://wrong-url/noImageExist.jpg'}
8788
resizeMode={'center'}
8889
style={ { width: '99%', height: 110, margin: 5 } }
8990
fallbackSource={ Images.fallbackSource }
9091
source={ { uri: 'https://wrong-url/noImageExist.jpg' } }/>
9192
<OfflineImage
93+
key={'https://wallpaperbrowse.com/media/images/wallpaper-for-mobile-13.jpg'}
94+
onLoadEnd={(sourceUri) => {
95+
console.log('Loading finished for image with path: ', sourceUri)
96+
}}
9297
reloadImage = { true }
9398
resizeMode={'cover'}
9499
fallbackSource={ Images.fallbackSource }
95100
style={ { width: '99%', height: 110, margin: 5 } }
96101
source={ { uri: 'https://wallpaperbrowse.com/media/images/wallpaper-for-mobile-13.jpg' } }/>
97102
<OfflineImage
103+
key={'https://wallpaperbrowse.com/media/images/tvrcnkbcgeirbxcmsbfz.jpg'}
104+
onLoadEnd={(sourceUri) => {
105+
console.log('Loading finished for image with path: ', sourceUri)
106+
}}
98107
resizeMode={'cover'}
99108
style={ { width: '99%', height: 110, margin: 5 } }
100109
source={ { uri: 'https://wallpaperbrowse.com/media/images/tvrcnkbcgeirbxcmsbfz.jpg' } }/>
101110
<OfflineImage
111+
key={'https://wallpaperbrowse.com/media/images/mobileswall-043.jpg'}
112+
onLoadEnd={(sourceUri) => {
113+
console.log('Loading finished for image with path: ', sourceUri)
114+
}}
102115
resizeMode={'cover'}
103116
style={ { width: '99%', height: 110, margin: 5 } }
104117
source={ { uri: 'https://wallpaperbrowse.com/media/images/mobileswall-043.jpg' } }/>
105118
<OfflineImage
119+
key={'https://wallpaperbrowse.com/media/images/butterfly-wallpaper_SzlKJB8.jpeg'}
120+
onLoadEnd={(sourceUri) => {
121+
console.log('Loading finished for image with path: ', sourceUri)
122+
}}
106123
resizeMode={'cover'}
107124
fallbackSource={ Images.fallbackSource }
108125
style={ { width: '99%', height: 110, margin: 5 } }

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-image-offline",
3-
"version": "0.1.1",
3+
"version": "0.1.2",
44
"main": "src/index.js",
55
"repository": "https://github.com/code-and-co/react-native-image-offline.git",
66
"author": "code&co.",
@@ -15,6 +15,10 @@
1515
{
1616
"name": "Jayasagar Jagirapu",
1717
"email": "[email protected]"
18+
},
19+
{
20+
"name": "Dan Bender",
21+
"email": "[email protected]"
1822
}
1923
],
2024
"peerDependencies": {

‎src/OfflineImage.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,14 @@ class OfflineImage extends React.Component {
2424
/**
2525
* Callback function triggered after image downloaded or if already exist in offline store
2626
*/
27-
handler = (path) => {
28-
this.setState({ path: path });
27+
handler = (sourceUri, path) => {
28+
const { onLoadEnd, source } = this.props;
29+
if (source && source.uri && source.uri === sourceUri) {
30+
this.setState({ path: path });
31+
if (path && onLoadEnd) {
32+
onLoadEnd(sourceUri);
33+
}
34+
}
2935
};
3036

3137
shouldComponentUpdate(nextProps, nextState) {
@@ -113,6 +119,7 @@ OfflineImage.propTypes = {
113119
//fallbackSource: PropTypes.int,
114120
component: PropTypes.func,
115121
reloadImage: PropTypes.bool,
122+
onLoadEnd: PropTypes.func,
116123
};
117124

118125
export default OfflineImage;

‎src/OfflineImageStore.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ class OfflineImageStore {
309309
if (this.store.debugMode) {
310310
console.log('Notify handler called', uri);
311311
}
312-
handler(this.entries[uri].basePath + '/' + this.entries[uri].localUriPath);
312+
handler(uri, this.entries[uri].basePath + '/' + this.entries[uri].localUriPath);
313313
});
314314
}
315315
};

0 commit comments

Comments
 (0)