Skip to content

Instantly share code, notes, and snippets.

@sharathprabhal
Created February 11, 2016 11:40
Show Gist options
  • Save sharathprabhal/7c6ea1e337119cdf36fa to your computer and use it in GitHub Desktop.
Save sharathprabhal/7c6ea1e337119cdf36fa to your computer and use it in GitHub Desktop.
import React from 'react-native'
var {
Image,
Animated,
View
} = React
module.exports = React.createClass({
getInitialState() {
return {
thumbnailOpacity: new Animated.Value(0),
};
},
onLoad() {
Animated.timing(this.state.thumbnailOpacity, {
toValue: 0,
duration: 250
}).start();
},
onThumbnailLoad() {
Animated.timing(this.state.thumbnailOpacity, {
toValue: 1,
duration: 250
}).start();
},
render() {
return (
<View
width={this.props.style.width}
height={this.props.style.height}
backgroundColor={'#CCC'}
>
<Animated.Image
resizeMode={'contain'}
key={this.props.key}
style={[
{
position: 'absolute',
},
this.props.style
]}
source={this.props.source}
onLoad={this.onLoad} />
<Animated.Image
resizeMode={'contain'}
key={this.props.key}
style={[
{
opacity: this.state.thumbnailOpacity
},
this.props.style
]}
source={this.props.thumbnail}
onLoad={this.onThumbnailLoad} />
</View>
)
}
});
@cinder92
Copy link

thanks for sharing!, but is not working with current version of react...

@alinz
Copy link

alinz commented Jan 15, 2017

@cinder92, I have rewritten this to support new react-native https://gist.github.com/alinz/d10a92d3dd0192a3df1197f9393de7eb

@DeVoresyah
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment