Add examples with custom size number usage

facebook · Jul 17, 2016 · 7b5970f · 7b5970f
1 parent 4153448
commit 7b5970f
Showing 1 changed file with 40 additions and 18 deletions.
diff --git a/Examples/UIExplorer/js/ActivityIndicatorExample.js b/Examples/UIExplorer/js/ActivityIndicatorExample.js
@@ -56,7 +56,7 @@ const ToggleAnimatingActivityIndicator = React.createClass({
       <ActivityIndicator
         animating={this.state.animating}
         style={[styles.centering, {height: 80}]}
-        size="large"
+        size='large'
       />
     );
   }
@@ -74,7 +74,7 @@ exports.examples = [
       return (
         <ActivityIndicator
           style={[styles.centering, styles.gray]}
-          color="white"
+          color='white'
         />
       );
     }
@@ -99,10 +99,10 @@ exports.examples = [
     render() {
       return (
         <View style={styles.horizontal}>
-          <ActivityIndicator color="#0000ff" />
-          <ActivityIndicator color="#aa00aa" />
-          <ActivityIndicator color="#aa3300" />
-          <ActivityIndicator color="#00aa00" />
+          <ActivityIndicator color='#0000ff' />
+          <ActivityIndicator color='#aa00aa' />
+          <ActivityIndicator color='#aa3300' />
+          <ActivityIndicator color='#00aa00' />
         </View>
       );
     }
@@ -113,8 +113,8 @@ exports.examples = [
       return (
         <ActivityIndicator
           style={[styles.centering, styles.gray]}
-          color="white"
-          size="large"
+          color='white'
+          size='large'
         />
       );
     }
@@ -125,20 +125,20 @@ exports.examples = [
       return (
         <View style={styles.horizontal}>
           <ActivityIndicator
-            size="large"
-            color="#0000ff"
+            size='large'
+            color='#0000ff'
           />
           <ActivityIndicator
-            size="large"
-            color="#aa00aa"
+            size='large'
+            color='#aa00aa'
           />
           <ActivityIndicator
-            size="large"
-            color="#aa3300"
+            size='large'
+            color='#aa3300'
           />
           <ActivityIndicator
-            size="large"
-            color="#00aa00"
+            size='large'
+            color='#00aa00'
           />
         </View>
       );
@@ -151,12 +151,34 @@ exports.examples = [
     }
   },
   {
-    title: 'Custom size',
+    title: 'Custom size (size: 48)',
+    render() {
+      return (
+        <ActivityIndicator
+          style={styles.centering}
+          size={48}
+        />
+      );
+    }
+  },
+  {
+    title: 'Custom size (size: 56)',
+    render() {
+      return (
+        <ActivityIndicator
+          style={styles.centering}
+          size={56}
+        />
+      );
+    }
+  },
+  {
+    title: 'Custom size (size: 30, scale transform: 1.5)',
     render() {
       return (
         <ActivityIndicator
           style={[styles.centering, {transform: [{scale: 1.5}]}]}
-          size="large"
+          size={30}
         />
       );
     }