diff --git a/docs/components/Image.md b/docs/components/Image.md index 6dc9f1be..14833095 100644 --- a/docs/components/Image.md +++ b/docs/components/Image.md @@ -46,7 +46,7 @@ Invoked when load either succeeds or fails, Invoked on load start. -**resizeMode**: oneOf('contain', 'cover', 'none', 'stretch') = 'stretch' +**resizeMode**: oneOf('center', 'contain', 'cover', 'none', 'repeat', 'stretch') = 'stretch' Determines how to resize the image when the frame doesn't match the raw image dimensions. diff --git a/examples/Image/ImageExample.js b/examples/Image/ImageExample.js index 09bc5aaf..041d8346 100644 --- a/examples/Image/ImageExample.js +++ b/examples/Image/ImageExample.js @@ -1,5 +1,5 @@ import React from 'react'; -import { storiesOf, action } from '@kadira/storybook'; +import { storiesOf, action, addDecorator } from '@kadira/storybook'; import { ActivityIndicator, Image, Platform, StyleSheet, Text, View } from 'react-native' /** @@ -499,30 +499,26 @@ const examples = [ source={image} /> - { Platform.OS === 'ios' ? - - - Repeat - - - - : null } - { Platform.OS === 'android' ? - - - Center - - - - : null } + + + Repeat + + + + + + Center + + + ); @@ -654,5 +650,6 @@ var styles = StyleSheet.create({ examples.forEach((example) => { storiesOf('', module) + .addDecorator((renderStory) => {renderStory()}) .add(example.title, () => example.render()) }) diff --git a/src/components/Image/ImageResizeMode.js b/src/components/Image/ImageResizeMode.js index 072c1fa8..912dd38a 100644 --- a/src/components/Image/ImageResizeMode.js +++ b/src/components/Image/ImageResizeMode.js @@ -1,9 +1,11 @@ import keyMirror from 'fbjs/lib/keyMirror' const ImageResizeMode = keyMirror({ + center: null, contain: null, cover: null, none: null, + repeat: null, stretch: null }) diff --git a/src/components/Image/index.js b/src/components/Image/index.js index 4600bf67..dd34ca0f 100644 --- a/src/components/Image/index.js +++ b/src/components/Image/index.js @@ -35,7 +35,7 @@ class Image extends Component { onLoad: PropTypes.func, onLoadEnd: PropTypes.func, onLoadStart: PropTypes.func, - resizeMode: PropTypes.oneOf(['contain', 'cover', 'none', 'stretch']), + resizeMode: PropTypes.oneOf(['center', 'contain', 'cover', 'none', 'repeat', 'stretch']), source: ImageSourcePropType, style: StyleSheetPropType(ImageStylePropTypes), testID: createReactDOMComponent.propTypes.testID @@ -207,6 +207,10 @@ const styles = StyleSheet.create({ }) const resizeModeStyles = StyleSheet.create({ + center: { + backgroundSize: 'auto', + backgroundPosition: 'center' + }, contain: { backgroundSize: 'contain' }, @@ -216,6 +220,10 @@ const resizeModeStyles = StyleSheet.create({ none: { backgroundSize: 'auto' }, + repeat: { + backgroundSize: 'auto', + backgroundRepeat: 'repeat' + }, stretch: { backgroundSize: '100% 100%' }