react-native-image-placeholder
Advanced tools
Comparing version
31
index.js
import React, { PropTypes } from 'react'; | ||
import { Image, ActivityIndicator, View } from 'react-native'; | ||
import { Image, ImageBackground, ActivityIndicator, View } from 'react-native'; | ||
@@ -35,6 +35,6 @@ class ImageLoad extends React.Component { | ||
return( | ||
<Image | ||
<ImageBackground | ||
onLoadEnd={this.onLoadEnd.bind(this)} | ||
onError={this.onError.bind(this)} | ||
style={this.props.style} | ||
style={[styles.backgroundImage, this.props.style]} | ||
source={this.props.source} | ||
@@ -47,2 +47,10 @@ resizeMode={this.props.resizeMode} | ||
<View style={styles.viewImageStyles}> | ||
{ | ||
this.props.isShowActivity && | ||
<ActivityIndicator | ||
style={styles.activityIndicator} | ||
size={this.props.loadingStyle ? this.props.loadingStyle.size : 'small'} | ||
color={this.props.loadingStyle ? this.props.loadingStyle.color : 'gray'} | ||
/> | ||
} | ||
<Image | ||
@@ -52,9 +60,2 @@ style={this.props.placeholderStyle ? this.props.placeholderStyle : [styles.imagePlaceholderStyles, this.props.customImagePlaceholderDefaultStyle]} | ||
> | ||
{ | ||
this.props.isShowActivity && | ||
<ActivityIndicator | ||
size={this.props.loadingStyle ? this.props.loadingStyle.size : 'small'} | ||
color={this.props.loadingStyle ? this.props.loadingStyle.color : 'gray'} | ||
/> | ||
} | ||
</Image> | ||
@@ -71,3 +72,3 @@ </View> | ||
} | ||
</Image> | ||
</ImageBackground> | ||
); | ||
@@ -78,2 +79,10 @@ } | ||
const styles = { | ||
backgroundImage: { | ||
position: 'relative', | ||
}, | ||
activityIndicator: { | ||
position: 'absolute', | ||
margin: 'auto', | ||
zIndex: 9, | ||
}, | ||
viewImageStyles: { | ||
@@ -80,0 +89,0 @@ flex: 1, |
{ | ||
"name": "react-native-image-placeholder", | ||
"version": "1.0.11", | ||
"version": "1.0.12", | ||
"description": "react native image placeholder", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
609867
0.04%98
10.11%