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%'
}