sharathprabhal · February 11, 2016 11:40 · Feb 11, 2016
diff --git a/ProgressiveImage.js b/ProgressiveImage.js
@@ -0,0 +1,62 @@
+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>      
+    )
+  }
+});