[add] new Image resize modes

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.

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}
                   />
                 </View>
-                { Platform.OS === 'ios' ?
+                <View style={styles.leftMargin}>
-                  <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
-                    <Text style={[styles.resizeModeText]}>
+                    Repeat
-                      Repeat
+                  </Text>
-                    </Text>
+                  <Image
-                    <Image
+                    style={styles.resizeMode}
-                      style={styles.resizeMode}
+                    resizeMode={'repeat'}
-                      resizeMode={Image.resizeMode.repeat}
+                    source={image}
-                      source={image}
+                  />
-                    />
+                </View>
-                  </View>
+                <View style={styles.leftMargin}>
-                : null }
+                  <Text style={[styles.resizeModeText]}>
-                { Platform.OS === 'android' ?
+                    Center
-                  <View style={styles.leftMargin}>
+                  </Text>
-                    <Text style={[styles.resizeModeText]}>
+                  <Image
-                      Center
+                    style={styles.resizeMode}
-                    </Text>
+                    resizeMode={'center'}
-                    <Image
+                    source={image}
-                      style={styles.resizeMode}
+                  />
-                      resizeMode={Image.resizeMode.center}
+                </View>
-                      source={image}
-                    />
-                  </View>
-                : null }
               </View>
             </View>
           );
@@ -654,5 +650,6 @@ var styles = StyleSheet.create({
 
 examples.forEach((example) => {
   storiesOf('<Image>', module)
+    .addDecorator((renderStory) => <View>{renderStory()}</View>)
     .add(example.title, () => example.render())
 })

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
 })
 

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