diff --git a/docs/storybook/1-components/Image/examples/NetworkImage.js b/docs/storybook/1-components/Image/examples/NetworkImage.js index 8fa936d7..3160b923 100644 --- a/docs/storybook/1-components/Image/examples/NetworkImage.js +++ b/docs/storybook/1-components/Image/examples/NetworkImage.js @@ -31,7 +31,7 @@ class NetworkImageExample extends PureComponent { ) : null; return ( - + {loader} - {this.state.message && {this.state.message}} + {this.state.message && {this.state.message}} ); } diff --git a/docs/storybook/1-components/Image/examples/PropChildren.js b/docs/storybook/1-components/Image/examples/PropChildren.js index ac731572..a496ecbe 100644 --- a/docs/storybook/1-components/Image/examples/PropChildren.js +++ b/docs/storybook/1-components/Image/examples/PropChildren.js @@ -8,21 +8,25 @@ import { Image, StyleSheet, Text } from 'react-native'; const ImageChildrenExample = () => ( - React + Child content ); const styles = StyleSheet.create({ image: { - width: 60, - height: 60, + width: 300, + height: 200, backgroundColor: 'transparent', justifyContent: 'center', alignItems: 'center' }, text: { backgroundColor: 'transparent', - color: 'white' + color: 'white', + fontWeight: 'bold', + fontSize: 18, + position: 'relative', + top: 50 } }); diff --git a/docs/storybook/1-components/Image/examples/PropDefaultSource.js b/docs/storybook/1-components/Image/examples/PropDefaultSource.js index 49df5234..a0fea737 100644 --- a/docs/storybook/1-components/Image/examples/PropDefaultSource.js +++ b/docs/storybook/1-components/Image/examples/PropDefaultSource.js @@ -8,11 +8,7 @@ import React from 'react'; import { Image } from 'react-native'; const ImageDefaultSourceExample = () => ( - + ); export default ImageDefaultSourceExample; diff --git a/docs/storybook/1-components/Image/examples/PropDraggable.js b/docs/storybook/1-components/Image/examples/PropDraggable.js index 03b5dbfc..32665b6e 100644 --- a/docs/storybook/1-components/Image/examples/PropDraggable.js +++ b/docs/storybook/1-components/Image/examples/PropDraggable.js @@ -17,8 +17,8 @@ const styles = StyleSheet.create({ flexDirection: 'row' }, image: { - width: 60, - height: 60, + width: 300, + height: 200, backgroundColor: 'transparent', marginRight: 10 } diff --git a/docs/storybook/1-components/Image/examples/PropOnLoad.js b/docs/storybook/1-components/Image/examples/PropOnLoad.js index cd671b93..8017e131 100644 --- a/docs/storybook/1-components/Image/examples/PropOnLoad.js +++ b/docs/storybook/1-components/Image/examples/PropOnLoad.js @@ -8,7 +8,7 @@ import React from 'react'; import sources from '../sources'; const ImageOnLoadExample = () => ( - + ); export default ImageOnLoadExample; diff --git a/docs/storybook/1-components/Image/examples/PropOnLoadEnd.js b/docs/storybook/1-components/Image/examples/PropOnLoadEnd.js index db161e21..ef43ca99 100644 --- a/docs/storybook/1-components/Image/examples/PropOnLoadEnd.js +++ b/docs/storybook/1-components/Image/examples/PropOnLoadEnd.js @@ -8,7 +8,7 @@ import React from 'react'; import sources from '../sources'; const ImageOnLoadEndExample = () => ( - + ); export default ImageOnLoadEndExample; diff --git a/docs/storybook/1-components/Image/examples/PropOnLoadStart.js b/docs/storybook/1-components/Image/examples/PropOnLoadStart.js index 51f814b7..8dc4110a 100644 --- a/docs/storybook/1-components/Image/examples/PropOnLoadStart.js +++ b/docs/storybook/1-components/Image/examples/PropOnLoadStart.js @@ -8,7 +8,7 @@ import React from 'react'; import sources from '../sources'; const ImageOnLoadStartExample = () => ( - + ); export default ImageOnLoadStartExample; diff --git a/docs/storybook/1-components/Image/examples/PropResizeMode.js b/docs/storybook/1-components/Image/examples/PropResizeMode.js index 72607e28..5a38bf0a 100644 --- a/docs/storybook/1-components/Image/examples/PropResizeMode.js +++ b/docs/storybook/1-components/Image/examples/PropResizeMode.js @@ -8,7 +8,7 @@ import { Image, StyleSheet, Text, View } from 'react-native'; const ImageResizeModeExample = () => ( - {[sources.small, sources.large].map((source, i) => { + {[sources.small].map((source, i) => { return ( @@ -60,12 +60,11 @@ const styles = StyleSheet.create({ resizeMode: { borderColor: 'black', borderWidth: 0.5, - height: 60, - width: 90 + height: 120, + width: 120 }, resizeModeText: { - fontSize: 11, - marginBottom: 3 + marginBottom: '0.5rem' }, leftMargin: { marginLeft: 10 diff --git a/docs/storybook/1-components/Image/examples/PropSource.js b/docs/storybook/1-components/Image/examples/PropSource.js index 137be337..babd7013 100644 --- a/docs/storybook/1-components/Image/examples/PropSource.js +++ b/docs/storybook/1-components/Image/examples/PropSource.js @@ -30,18 +30,22 @@ const ImageSourceExample = () => ( const styles = StyleSheet.create({ row: { flexDirection: 'row', - flexWrap: 'wrap' + flexWrap: 'wrap', + justifyContent: 'space-between' }, column: { - marginRight: '1rem' + alignItems: 'flex-start', + marginBottom: '1rem' }, text: { marginBottom: '0.5rem' }, image: { - flex: 1, - height: 50, - resizeMode: 'contain' + borderColor: 'black', + borderWidth: 0.5, + height: 120, + width: 120, + resizeMode: 'cover' } }); diff --git a/docs/storybook/1-components/Image/helpers.js b/docs/storybook/1-components/Image/helpers.js index 332ae469..664847d2 100644 --- a/docs/storybook/1-components/Image/helpers.js +++ b/docs/storybook/1-components/Image/helpers.js @@ -13,8 +13,8 @@ const createUncachedURI = source => { const styles = StyleSheet.create({ base: { - height: 38, - width: 38 + height: 200, + width: 300 }, row: { flexDirection: 'row' @@ -22,8 +22,8 @@ const styles = StyleSheet.create({ centerRow: { alignItems: 'center' }, - marginLeft: { - marginLeft: '1rem' + marginTop: { + marginTop: '1rem' } }); diff --git a/docs/storybook/1-components/Image/sources/bunny.png b/docs/storybook/1-components/Image/sources/bunny.png deleted file mode 100644 index 0d94af66..00000000 Binary files a/docs/storybook/1-components/Image/sources/bunny.png and /dev/null differ diff --git a/docs/storybook/1-components/Image/sources/index.js b/docs/storybook/1-components/Image/sources/index.js index 73af827d..d98b975f 100644 --- a/docs/storybook/1-components/Image/sources/index.js +++ b/docs/storybook/1-components/Image/sources/index.js @@ -1,5 +1,5 @@ -import placeholder from './bunny.png'; -import staticImage from './uie_thumb_normal@2x.png'; +import placeholder from './placeholder.jpg'; +import staticImage from './ladybug.jpg'; const dataPng = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg=='; @@ -12,11 +12,27 @@ const sources = { 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif' }, broken: { uri: 'http://TYPO_ERROR.github.io/image.png' }, - small: { uri: 'http://facebook.github.io/react/img/logo_small_2x.png' }, - large: { uri: 'http://facebook.github.io/react/img/logo_og.png' }, - largeAlt: { uri: 'http://facebook.github.io/origami/public/images/birds.jpg' }, + small: { + uri: + 'https://images.unsplash.com/photo-1488584585634-35fc98ccb808?dpr=1&auto=format&fit=crop&w=100&h=66&q=60&cs=tinysrgb' + }, + smallAlt: { + uri: + 'https://images.unsplash.com/photo-1481595357459-84468f6eeaac?dpr=1&auto=format&fit=crop&w=100&h=66&q=60&cs=tinysrgb' + }, + large: { + uri: + 'https://images.unsplash.com/photo-1481595357459-84468f6eeaac?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb' + }, + largeAlt: { + uri: + 'https://images.unsplash.com/photo-1471145653077-54c6f0aae511?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb' + }, placeholder, - prefetchable: { uri: 'http://origami.design/public/images/bird-logo.png' }, + prefetchable: { + uri: + 'https://images.unsplash.com/photo-1471145653077-54c6f0aae511?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb' + }, static: staticImage, huge: { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/d7/Chestnut-mandibled_Toucan.jpg' diff --git a/docs/storybook/1-components/Image/sources/ladybug.jpg b/docs/storybook/1-components/Image/sources/ladybug.jpg new file mode 100644 index 00000000..1680d304 Binary files /dev/null and b/docs/storybook/1-components/Image/sources/ladybug.jpg differ diff --git a/docs/storybook/1-components/Image/sources/placeholder.jpg b/docs/storybook/1-components/Image/sources/placeholder.jpg new file mode 100644 index 00000000..5049ad70 Binary files /dev/null and b/docs/storybook/1-components/Image/sources/placeholder.jpg differ diff --git a/docs/storybook/1-components/Image/sources/uie_thumb_normal@2x.png b/docs/storybook/1-components/Image/sources/uie_thumb_normal@2x.png deleted file mode 100644 index 72683dfa..00000000 Binary files a/docs/storybook/1-components/Image/sources/uie_thumb_normal@2x.png and /dev/null differ diff --git a/docs/storybook/1-components/Image/sources/uie_thumb_selected@2x.png b/docs/storybook/1-components/Image/sources/uie_thumb_selected@2x.png deleted file mode 100644 index 79eb69cf..00000000 Binary files a/docs/storybook/1-components/Image/sources/uie_thumb_selected@2x.png and /dev/null differ