From 48e62fcd643d4dbf9e719dd21cc2d95947bd5435 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 21 May 2018 21:21:34 -0700
Subject: [PATCH] Add PJPEG example to docs

---
 .../1-components/Image/examples/PropSource.js | 48 +++++++++++--------
 .../Image/examples/StaticGetSize.js           |  8 ++--
 .../1-components/Image/sources/index.js       |  3 ++
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/website/storybook/1-components/Image/examples/PropSource.js b/website/storybook/1-components/Image/examples/PropSource.js
index 75d91d38..43995f50 100644
--- a/website/storybook/1-components/Image/examples/PropSource.js
+++ b/website/storybook/1-components/Image/examples/PropSource.js
@@ -7,28 +7,36 @@ import React from 'react';
 import { Image, StyleSheet, Text, View } from 'react-native';
 
 const ImageSourceExample = () => (
-  <View style={styles.row}>
-    <View style={styles.column}>
-      <Text style={styles.text}>Static image</Text>
-      <Image source={sources.static} style={styles.image} />
+  <React.Fragment>
+    <View style={styles.row}>
+      <View style={styles.column}>
+        <Text style={styles.text}>Static image</Text>
+        <Image source={sources.static} style={styles.image} />
+      </View>
+      <View style={styles.column}>
+        <Text style={styles.text}>Progressive JPEG</Text>
+        <Image source={sources.pjpeg} style={styles.image} />
+      </View>
+      <View style={styles.column}>
+        <Text style={styles.text}>Animated GIF</Text>
+        <Image source={sources.animatedGif} style={styles.image} />
+      </View>
     </View>
-    <View style={styles.column}>
-      <Text style={styles.text}>Animated GIF</Text>
-      <Image source={sources.animatedGif} style={styles.image} />
+    <View style={styles.row}>
+      <View style={styles.column}>
+        <Text style={styles.text}>PNG (base64)</Text>
+        <Image source={sources.dataBase64Png} style={styles.image} />
+      </View>
+      <View style={styles.column}>
+        <Text style={styles.text}>SVG (base64)</Text>
+        <Image source={sources.dataBase64Svg} style={styles.image} />
+      </View>
+      <View style={styles.column}>
+        <Text style={styles.text}>SVG (inline data)</Text>
+        <Image source={sources.dataSvg} style={styles.image} />
+      </View>
     </View>
-    <View style={styles.column}>
-      <Text style={styles.text}>PNG (base64)</Text>
-      <Image source={sources.dataBase64Png} style={styles.image} />
-    </View>
-    <View style={styles.column}>
-      <Text style={styles.text}>SVG (base64)</Text>
-      <Image source={sources.dataBase64Svg} style={styles.image} />
-    </View>
-    <View style={styles.column}>
-      <Text style={styles.text}>SVG (inline data)</Text>
-      <Image source={sources.dataSvg} style={styles.image} />
-    </View>
-  </View>
+  </React.Fragment>
 );
 
 const styles = StyleSheet.create({
diff --git a/website/storybook/1-components/Image/examples/StaticGetSize.js b/website/storybook/1-components/Image/examples/StaticGetSize.js
index 5e98dc46..1e346a05 100644
--- a/website/storybook/1-components/Image/examples/StaticGetSize.js
+++ b/website/storybook/1-components/Image/examples/StaticGetSize.js
@@ -26,7 +26,7 @@ class ImageGetSizeExample extends PureComponent {
       <View>
         {showButton ? (
           <View style={styles.button}>
-            <Button onPress={this._handlePress} title="(4.7MB) Get image dimensions" />
+            <Button onPress={this._handlePress} title="Get image dimensions" />
           </View>
         ) : null}
         {startLoad ? (
@@ -55,12 +55,12 @@ const styles = StyleSheet.create({
   },
   image: {
     backgroundColor: '#eee',
-    height: 227,
+    height: 230,
     marginTop: 10,
-    width: 323
+    width: 320
   }
 });
 
-const StaticGetSizeExample = () => <ImageGetSizeExample source={sources.huge} />;
+const StaticGetSizeExample = () => <ImageGetSizeExample source={sources.pjpeg} />;
 
 export default StaticGetSizeExample;
diff --git a/website/storybook/1-components/Image/sources/index.js b/website/storybook/1-components/Image/sources/index.js
index bbe9acd7..254edc8e 100644
--- a/website/storybook/1-components/Image/sources/index.js
+++ b/website/storybook/1-components/Image/sources/index.js
@@ -39,6 +39,9 @@ const sources = {
   huge: {
     uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Chestnut-mandibled_Toucan.jpg'
   },
+  pjpeg: {
+    uri: 'http://pooyak.com/p/progjpeg/jpegload.cgi?o=1'
+  },
   dataSvg,
   dataBase64Png,
   dataBase64Svg