Prettier the rest of ReactNative

Reviewed By: yungsters Differential Revision: D7974340 fbshipit-source-id: 5fe457a8a9be4bd360fc3af9acb5c1136b2be0d7
2026-04-28 20:25:33 +08:00 · 2018-05-11 13:32:37 -07:00
parent aba4ec0c09
commit 36fcbaa56d
170 changed files with 5132 additions and 3995 deletions
--- a/RNTester/js/ImageExample.js
+++ b/RNTester/js/ImageExample.js
@@ -4,8 +4,10 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
+ * @format
 * @flow
 */
+
 'use strict';

 var React = require('react');
@@ -21,10 +23,12 @@ var {
  ImageBackground,
 } = ReactNative;

-var base64Icon = '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==';
+var base64Icon =
+  '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==';

 var ImageCapInsetsExample = require('./ImageCapInsetsExample');
-const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
+const IMAGE_PREFETCH_URL =
+  'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
 var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);

 /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an error
@@ -45,19 +49,23 @@ var NetworkImageCallbackExample = createReactClass({
  },

  render: function() {
-    var { mountTime } = this.state;
+    var {mountTime} = this.state;

    return (
      <View>
        <Image
          source={this.props.source}
          style={[styles.base, {overflow: 'visible'}]}
-          onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
-          onLoad={(event) => {
+          onLoadStart={() =>
+            this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)
+          }
+          onLoad={event => {
            // Currently this image source feature is only available on iOS.
            if (event.nativeEvent.source) {
              const url = event.nativeEvent.source.url;
-              this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
+              this._loadEventFired(
+                `✔ onLoad (+${new Date() - mountTime}ms) for URL ${url}`,
+              );
            } else {
              this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`);
            }
@@ -65,43 +73,61 @@ var NetworkImageCallbackExample = createReactClass({
          onLoadEnd={() => {
            this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
            this.setState({startLoadPrefetched: true}, () => {
-              prefetchTask.then(() => {
-                this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`);
-              }, error => {
-                this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`);
-              });
+              prefetchTask.then(
+                () => {
+                  this._loadEventFired(
+                    `✔ Prefetch OK (+${new Date() - mountTime}ms)`,
+                  );
+                },
+                error => {
+                  this._loadEventFired(
+                    `✘ Prefetch failed (+${new Date() - mountTime}ms)`,
+                  );
+                },
+              );
            });
          }}
        />
-        {this.state.startLoadPrefetched ?
+        {this.state.startLoadPrefetched ? (
          <Image
            source={this.props.prefetchedSource}
            style={[styles.base, {overflow: 'visible'}]}
-            onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
-            onLoad={(event) => {
+            onLoadStart={() =>
+              this._loadEventFired(
+                `✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`,
+              )
+            }
+            onLoad={event => {
              // Currently this image source feature is only available on iOS.
              if (event.nativeEvent.source) {
                const url = event.nativeEvent.source.url;
-                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
+                this._loadEventFired(
+                  `✔ (prefetched) onLoad (+${new Date() -
+                    mountTime}ms) for URL ${url}`,
+                );
              } else {
-                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`);
+                this._loadEventFired(
+                  `✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`,
+                );
              }
            }}
-            onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
+            onLoadEnd={() =>
+              this._loadEventFired(
+                `✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`,
+              )
+            }
          />
-          : null}
-        <Text style={{marginTop: 20}}>
-          {this.state.events.join('\n')}
-        </Text>
+        ) : null}
+        <Text style={{marginTop: 20}}>{this.state.events.join('\n')}</Text>
      </View>
    );
  },

  _loadEventFired(event) {
-    this.setState((state) => {
-      return state.events = [...state.events, event];
+    this.setState(state => {
+      return (state.events = [...state.events, event]);
    });
-  }
+  },
 });

 var NetworkImageExample = createReactClass({
@@ -109,27 +135,38 @@ var NetworkImageExample = createReactClass({
    return {
      error: false,
      loading: false,
-      progress: 0
+      progress: 0,
    };
  },
  render: function() {
-    var loader = this.state.loading ?
+    var loader = this.state.loading ? (
      <View style={styles.progress}>
        <Text>{this.state.progress}%</Text>
-        <ActivityIndicator style={{marginLeft:5}} />
-      </View> : null;
-    return this.state.error ?
-      <Text>{this.state.error}</Text> :
+        <ActivityIndicator style={{marginLeft: 5}} />
+      </View>
+    ) : null;
+    return this.state.error ? (
+      <Text>{this.state.error}</Text>
+    ) : (
      <ImageBackground
        source={this.props.source}
        style={[styles.base, {overflow: 'visible'}]}
-        onLoadStart={(e) => this.setState({loading: true})}
-        onError={(e) => this.setState({error: e.nativeEvent.error, loading: false})}
-        onProgress={(e) => this.setState({progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)})}
+        onLoadStart={e => this.setState({loading: true})}
+        onError={e =>
+          this.setState({error: e.nativeEvent.error, loading: false})
+        }
+        onProgress={e =>
+          this.setState({
+            progress: Math.round(
+              100 * e.nativeEvent.loaded / e.nativeEvent.total,
+            ),
+          })
+        }
        onLoad={() => this.setState({loading: false, error: false})}>
        {loader}
-      </ImageBackground>;
-  }
+      </ImageBackground>
+    );
+  },
 });

 var ImageSizeExample = createReactClass({
@@ -154,7 +191,8 @@ var ImageSizeExample = createReactClass({
            backgroundColor: 'transparent',
            marginRight: 10,
          }}
-          source={this.props.source} />
+          source={this.props.source}
+        />
        <Text>
          Actual dimensions:{'\n'}
          Width: {this.state.width}, Height: {this.state.height}
@@ -175,26 +213,36 @@ var MultipleSourcesExample = createReactClass({
    return (
      <View>
        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-          <Text
-            style={styles.touchableText}
-            onPress={this.decreaseImageSize} >
+          <Text style={styles.touchableText} onPress={this.decreaseImageSize}>
            Decrease image size
          </Text>
-          <Text
-            style={styles.touchableText}
-            onPress={this.increaseImageSize} >
+          <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={{height: this.state.height, width: this.state.width}} >
+        <Text>
+          Container image size: {this.state.width}x{this.state.height}{' '}
+        </Text>
+        <View style={{height: this.state.height, width: this.state.width}}>
          <Image
            style={{flex: 1}}
            source={[
-              {uri: 'https://facebook.github.io/react-native/img/favicon.png', width: 38, height: 38},
-              {uri: 'https://facebook.github.io/react-native/img/favicon.png', width: 76, height: 76},
-              {uri: 'https://facebook.github.io/react-native/img/opengraph.png', width: 400, height: 400}
+              {
+                uri: 'https://facebook.github.io/react-native/img/favicon.png',
+                width: 38,
+                height: 38,
+              },
+              {
+                uri: 'https://facebook.github.io/react-native/img/favicon.png',
+                width: 76,
+                height: 76,
+              },
+              {
+                uri:
+                  'https://facebook.github.io/react-native/img/opengraph.png',
+                width: 400,
+                height: 400,
+              },
            ]}
          />
        </View>
@@ -224,33 +272,43 @@ var MultipleSourcesExample = createReactClass({
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Image>';
-exports.description = 'Base component for displaying different types of images.';
+exports.description =
+  'Base component for displaying different types of images.';

 exports.examples = [
  {
    title: 'Plain Network Image',
-    description: 'If the `source` prop `uri` property is prefixed with ' +
-    '"http", then it will be downloaded from the network.',
+    description:
+      'If the `source` prop `uri` property is prefixed with ' +
+      '"http", then it will be downloaded from the network.',
    render: function() {
-      return (
-        <Image
-          source={fullImage}
-          style={styles.base}
-        />
-      );
+      return <Image source={fullImage} style={styles.base} />;
    },
  },
  {
    title: 'Plain Static Image',
-    description: 'Static assets should be placed in the source code tree, and ' +
-    'required in the same way as JavaScript modules.',
+    description:
+      'Static assets should be placed in the source code tree, and ' +
+      'required in the same way as JavaScript modules.',
    render: function() {
      return (
        <View style={styles.horizontal}>
-          <Image source={require('./uie_thumb_normal.png')} style={styles.icon} />
-          <Image source={require('./uie_thumb_selected.png')} style={styles.icon} />
-          <Image source={require('./uie_comment_normal.png')} style={styles.icon} />
-          <Image source={require('./uie_comment_highlighted.png')} style={styles.icon} />
+          <Image
+            source={require('./uie_thumb_normal.png')}
+            style={styles.icon}
+          />
+          <Image
+            source={require('./uie_thumb_selected.png')}
+            style={styles.icon}
+          />
+          <Image
+            source={require('./uie_comment_normal.png')}
+            style={styles.icon}
+          />
+          <Image
+            source={require('./uie_comment_highlighted.png')}
+            style={styles.icon}
+          />
        </View>
      );
    },
@@ -259,8 +317,14 @@ exports.examples = [
    title: 'Image Loading Events',
    render: function() {
      return (
-        <NetworkImageCallbackExample source={{uri: 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now()}}
-          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
+        <NetworkImageCallbackExample
+          source={{
+            uri:
+              'http://origami.design/public/images/bird-logo.png?r=1&t=' +
+              Date.now(),
+          }}
+          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}
+        />
      );
    },
  },
@@ -268,7 +332,11 @@ exports.examples = [
    title: 'Error Handler',
    render: function() {
      return (
-        <NetworkImageExample source={{uri: 'https://TYPO_ERROR_facebook.github.io/react/logo-og.png'}} />
+        <NetworkImageExample
+          source={{
+            uri: 'https://TYPO_ERROR_facebook.github.io/react/logo-og.png',
+          }}
+        />
      );
    },
    platform: 'ios',
@@ -277,7 +345,11 @@ exports.examples = [
    title: 'Image Download Progress',
    render: function() {
      return (
-        <NetworkImageExample source={{uri: 'http://origami.design/public/images/bird-logo.png?r=1'}}/>
+        <NetworkImageExample
+          source={{
+            uri: 'http://origami.design/public/images/bird-logo.png?r=1',
+          }}
+        />
      );
    },
    platform: 'ios',
@@ -289,7 +361,9 @@ exports.examples = [
      return (
        <Image
          defaultSource={require('./bunny.png')}
-          source={{uri: 'https://facebook.github.io/origami/public/images/birds.jpg'}}
+          source={{
+            uri: 'https://facebook.github.io/origami/public/images/birds.jpg',
+          }}
          style={styles.base}
        />
      );
@@ -298,17 +372,18 @@ exports.examples = [
  },
  {
    title: 'Cache Policy',
-    description: 'First image has never been loaded before and is instructed not to load unless in cache.' +
-    'Placeholder image from above will stay. Second image is the same but forced to load regardless of' +
-    ' local cache state.',
-    render: function () {
+    description:
+      'First image has never been loaded before and is instructed not to load unless in cache.' +
+      'Placeholder image from above will stay. Second image is the same but forced to load regardless of' +
+      ' local cache state.',
+    render: function() {
      return (
        <View style={styles.horizontal}>
          <Image
            defaultSource={require('./bunny.png')}
            source={{
              uri: smallImage.uri + '?cacheBust=notinCache' + Date.now(),
-              cache: 'only-if-cached'
+              cache: 'only-if-cached',
            }}
            style={styles.base}
          />
@@ -316,7 +391,7 @@ exports.examples = [
            defaultSource={require('./bunny.png')}
            source={{
              uri: smallImage.uri + '?cacheBust=notinCache' + Date.now(),
-              cache: 'reload'
+              cache: 'reload',
            }}
            style={styles.base}
          />
@@ -335,7 +410,7 @@ exports.examples = [
            style={[
              styles.base,
              styles.background,
-              {borderWidth: 3, borderColor: '#f099f0'}
+              {borderWidth: 3, borderColor: '#f099f0'},
            ]}
          />
        </View>
@@ -352,7 +427,7 @@ exports.examples = [
            style={[
              styles.base,
              styles.background,
-              {borderWidth: 5, borderColor: '#f099f0'}
+              {borderWidth: 5, borderColor: '#f099f0'},
            ]}
          />
        </View>
@@ -364,10 +439,7 @@ exports.examples = [
    render: function() {
      return (
        <View style={styles.horizontal}>
-          <Image
-            style={[styles.base, {borderRadius: 5}]}
-            source={fullImage}
-          />
+          <Image style={[styles.base, {borderRadius: 5}]} source={fullImage} />
          <Image
            style={[styles.base, styles.leftMargin, {borderRadius: 19}]}
            source={fullImage}
@@ -386,7 +458,7 @@ exports.examples = [
            style={[
              styles.base,
              styles.leftMargin,
-              {backgroundColor: 'rgba(0, 0, 100, 0.25)'}
+              {backgroundColor: 'rgba(0, 0, 100, 0.25)'},
            ]}
            source={smallImage}
          />
@@ -407,10 +479,7 @@ exports.examples = [
    render: function() {
      return (
        <View style={styles.horizontal}>
-          <Image
-            style={[styles.base, {opacity: 1}]}
-            source={fullImage}
-          />
+          <Image style={[styles.base, {opacity: 1}]} source={fullImage} />
          <Image
            style={[styles.base, styles.leftMargin, {opacity: 0.8}]}
            source={fullImage}
@@ -442,10 +511,9 @@ exports.examples = [
        <View style={{width: 60, height: 60}}>
          <Image
            style={{...StyleSheet.absoluteFillObject}}
-            source={fullImage}/>
-          <Text style={styles.nestedText}>
-            React
-          </Text>
+            source={fullImage}
+          />
+          <Text style={styles.nestedText}>React</Text>
        </View>
      );
    },
@@ -457,16 +525,15 @@ exports.examples = [
        <ImageBackground
          style={{width: 60, height: 60, backgroundColor: 'transparent'}}
          source={fullImage}>
-          <Text style={styles.nestedText}>
-            React
-          </Text>
+          <Text style={styles.nestedText}>React</Text>
        </ImageBackground>
      );
    },
  },
  {
    title: 'Tint Color',
-    description: 'The `tintColor` style prop changes all the non-alpha ' +
+    description:
+      'The `tintColor` style prop changes all the non-alpha ' +
      'pixels to the tint color.',
    render: function() {
      return (
@@ -474,19 +541,31 @@ exports.examples = [
          <View style={styles.horizontal}>
            <Image
              source={require('./uie_thumb_normal.png')}
-              style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa' }]}
+              style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa'}]}
            />
            <Image
              source={require('./uie_thumb_normal.png')}
-              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
+              style={[
+                styles.icon,
+                styles.leftMargin,
+                {borderRadius: 5, tintColor: '#4cd964'},
+              ]}
            />
            <Image
              source={require('./uie_thumb_normal.png')}
-              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
+              style={[
+                styles.icon,
+                styles.leftMargin,
+                {borderRadius: 5, tintColor: '#ff2d55'},
+              ]}
            />
            <Image
              source={require('./uie_thumb_normal.png')}
-              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
+              style={[
+                styles.icon,
+                styles.leftMargin,
+                {borderRadius: 5, tintColor: '#8e8e93'},
+              ]}
            />
          </View>
          <Text style={styles.sectionText}>
@@ -495,19 +574,31 @@ exports.examples = [
          <View style={styles.horizontal}>
            <Image
              source={smallImage}
-              style={[styles.base, {borderRadius: 5, tintColor: '#5ac8fa' }]}
+              style={[styles.base, {borderRadius: 5, tintColor: '#5ac8fa'}]}
            />
            <Image
              source={smallImage}
-              style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
+              style={[
+                styles.base,
+                styles.leftMargin,
+                {borderRadius: 5, tintColor: '#4cd964'},
+              ]}
            />
            <Image
              source={smallImage}
-              style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
+              style={[
+                styles.base,
+                styles.leftMargin,
+                {borderRadius: 5, tintColor: '#ff2d55'},
+              ]}
            />
            <Image
              source={smallImage}
-              style={[styles.base, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
+              style={[
+                styles.base,
+                styles.leftMargin,
+                {borderRadius: 5, tintColor: '#8e8e93'},
+              ]}
            />
          </View>
        </View>
@@ -516,71 +607,62 @@ exports.examples = [
  },
  {
    title: 'Resize Mode',
-    description: 'The `resizeMode` style prop controls how the image is ' +
+    description:
+      'The `resizeMode` style prop controls how the image is ' +
      'rendered within the frame.',
    render: function() {
      return (
        <View>
          {[smallImage, fullImage].map((image, index) => {
            return (
-            <View key={index}>
-              <View style={styles.horizontal}>
-                <View>
-                  <Text style={[styles.resizeModeText]}>
-                    Contain
-                  </Text>
-                  <Image
-                    style={styles.resizeMode}
-                    resizeMode={Image.resizeMode.contain}
-                    source={image}
-                  />
+              <View key={index}>
+                <View style={styles.horizontal}>
+                  <View>
+                    <Text style={[styles.resizeModeText]}>Contain</Text>
+                    <Image
+                      style={styles.resizeMode}
+                      resizeMode={Image.resizeMode.contain}
+                      source={image}
+                    />
+                  </View>
+                  <View style={styles.leftMargin}>
+                    <Text style={[styles.resizeModeText]}>Cover</Text>
+                    <Image
+                      style={styles.resizeMode}
+                      resizeMode={Image.resizeMode.cover}
+                      source={image}
+                    />
+                  </View>
                </View>
-                <View style={styles.leftMargin}>
-                  <Text style={[styles.resizeModeText]}>
-                    Cover
-                  </Text>
-                  <Image
-                    style={styles.resizeMode}
-                    resizeMode={Image.resizeMode.cover}
-                    source={image}
-                  />
+                <View style={styles.horizontal}>
+                  <View>
+                    <Text style={[styles.resizeModeText]}>Stretch</Text>
+                    <Image
+                      style={styles.resizeMode}
+                      resizeMode={Image.resizeMode.stretch}
+                      source={image}
+                    />
+                  </View>
+                  <View style={styles.leftMargin}>
+                    <Text style={[styles.resizeModeText]}>Repeat</Text>
+                    <Image
+                      style={styles.resizeMode}
+                      resizeMode={Image.resizeMode.repeat}
+                      source={image}
+                    />
+                  </View>
+                  <View style={styles.leftMargin}>
+                    <Text style={[styles.resizeModeText]}>Center</Text>
+                    <Image
+                      style={styles.resizeMode}
+                      resizeMode={Image.resizeMode.center}
+                      source={image}
+                    />
+                  </View>
                </View>
              </View>
-              <View style={styles.horizontal}>
-                <View>
-                  <Text style={[styles.resizeModeText]}>
-                    Stretch
-                  </Text>
-                  <Image
-                    style={styles.resizeMode}
-                    resizeMode={Image.resizeMode.stretch}
-                    source={image}
-                  />
-                </View>
-                <View style={styles.leftMargin}>
-                  <Text style={[styles.resizeModeText]}>
-                    Repeat
-                  </Text>
-                  <Image
-                    style={styles.resizeMode}
-                    resizeMode={Image.resizeMode.repeat}
-                    source={image}
-                  />
-                </View>
-                <View style={styles.leftMargin}>
-                  <Text style={[styles.resizeModeText]}>
-                    Center
-                  </Text>
-                  <Image
-                    style={styles.resizeMode}
-                    resizeMode={Image.resizeMode.center}
-                    source={image}
-                  />
-                </View>
-              </View>
-            </View>
-          );
-        })}
+            );
+          })}
        </View>
      );
    },
@@ -591,7 +673,10 @@ exports.examples = [
      return (
        <Image
          style={styles.gif}
-          source={{uri: 'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
+          source={{
+            uri:
+              'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif',
+          }}
        />
      );
    },
@@ -601,10 +686,7 @@ exports.examples = [
    title: 'Base64 image',
    render: function() {
      return (
-        <Image
-          style={styles.base64}
-          source={{uri: base64Icon, scale: 3}}
-        />
+        <Image style={styles.base64} source={{uri: base64Icon, scale: 3}} />
      );
    },
    platform: 'ios',
@@ -642,17 +724,12 @@ exports.examples = [
      'Images shipped with the native bundle, but not managed ' +
      'by the JS packager',
    render: function() {
-      return (
-        <Image
-          source={{uri: 'legacy_image', width: 120, height: 120}}
-        />
-      );
+      return <Image source={{uri: 'legacy_image', width: 120, height: 120}} />;
    },
  },
  {
    title: 'Bundled images',
-    description:
-      'Images shipped in a separate native bundle',
+    description: 'Images shipped in a separate native bundle',
    render: function() {
      return (
        <View style={{flexDirection: 'row'}}>
@@ -684,11 +761,7 @@ exports.examples = [
    render: function() {
      return (
        <View style={styles.horizontal}>
-          <Image
-            style={[styles.base,]}
-            source={fullImage}
-            blurRadius={0}
-          />
+          <Image style={[styles.base]} source={fullImage} blurRadius={0} />
          <Image
            style={[styles.base, styles.leftMargin]}
            source={fullImage}
@@ -720,8 +793,12 @@ exports.examples = [
  },
 ];

-var fullImage = {uri: 'https://facebook.github.io/react-native/img/opengraph.png'};
-var smallImage = {uri: 'https://facebook.github.io/react-native/img/favicon.png'};
+var fullImage = {
+  uri: 'https://facebook.github.io/react-native/img/opengraph.png',
+};
+var smallImage = {
+  uri: 'https://facebook.github.io/react-native/img/favicon.png',
+};

 var styles = StyleSheet.create({
  base: {
@@ -732,13 +809,13 @@ var styles = StyleSheet.create({
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
-    width: 100
+    width: 100,
  },
  leftMargin: {
    marginLeft: 10,
  },
  background: {
-    backgroundColor: '#222222'
+    backgroundColor: '#222222',
  },
  sectionText: {
    marginVertical: 6,
@@ -747,13 +824,13 @@ var styles = StyleSheet.create({
    marginLeft: 12,
    marginTop: 20,
    backgroundColor: 'transparent',
-    color: 'white'
+    color: 'white',
  },
  resizeMode: {
    width: 90,
    height: 60,
    borderWidth: 0.5,
-    borderColor: 'black'
+    borderColor: 'black',
  },
  resizeModeText: {
    fontSize: 11,