diff --git a/releases/next/docs/image.html b/releases/next/docs/image.html
index 8d9758a9975..4b77930d15a 100644
--- a/releases/next/docs/image.html
+++ b/releases/next/docs/image.html
@@ -177,6 +177,63 @@ const IMAGE_PREFETCH_URL = },
});
+var MultipleSourcesExample = React.createClass({
+ getInitialState: function() {
+ return {
+ width: 30,
+ height: 30,
+ };
+ },
+ render: function() {
+ return (
+ <View style={styles.container}>
+ <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+ <Text
+ style={styles.touchableText}
+ onPress={this.decreaseImageSize} >
+ Decrease image size
+ </Text>
+ <Text
+ style={styles.touchableText}
+ onPress={this.increaseImageSize} >
+ Increase image size
+ </Text>
+ </View>
+ <Text>Container image size: {this.state.width}x{this.state.height} </Text>
+ <View
+ style={[styles.imageContainer, {height: this.state.height, width: this.state.width}]} >
+ <Image
+ style={{flex: 1}}
+ source={[
+ {uri: 'http://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
+ {uri: 'http://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},
+ {uri: 'http://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}
+ ]}
+ />
+ </View>
+ </View>
+ );
+ },
+ increaseImageSize: function() {
+ if (this.state.width >= 100) {
+ return;
+ }
+ this.setState({
+ width: this.state.width + 10,
+ height: this.state.height + 10,
+ });
+ },
+ decreaseImageSize: function() {
+ if (this.state.width <= 10) {
+ return;
+ }
+ this.setState({
+ width: this.state.width - 10,
+ height: this.state.height - 10,
+ });
+ },
+});
+
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = '<Image>';
@@ -531,6 +588,16 @@ exports.examples return <ImageSizeExample source={fullImage} />;
},
},
+ {
+ title: 'MultipleSourcesExample',
+ description:
+ 'The `source` prop allows passing in an array of uris, so that native to choose which image ' +
+ 'to diplay based on the size of the of the target image',
+ render: function() {
+ return <MultipleSourcesExample />;
+ },
+ platform: 'android',
+ },
];
var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
@@ -588,6 +655,10 @@ exports.examples : 50,
resizeMode: 'contain',
},
+ touchableText: {
+ fontWeight: '500',
+ color: 'blue',
+ },
});