Running all pages through prettier (facebook#1900)

.prettierrc

@@ -15,12 +15,12 @@
       "files": "*.md",
       "options": {
         "arrowParens": "always",
-        "bracketSpacing": false,
+        "bracketSpacing": true,
         "jsxBracketSameLine": true,
-        "printWidth": 80,
+        "printWidth": 66,
         "proseWrap": "never",
         "singleQuote": true,
-        "trailingComma": "all"
+        "trailingComma": "none"
       }
     }
   ]

docs/accessibility.md

@@ -184,12 +184,28 @@ In the case of two overlapping UI components with the same parent, default acces
 
 ```jsx
 <View style={styles.container}>
-  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
-    backgroundColor: 'green'}} importantForAccessibility="yes">
+  <View
+    style={{
+      position: 'absolute',
+      left: 10,
+      top: 10,
+      right: 10,
+      height: 100,
+      backgroundColor: 'green'
+    }}
+    importantForAccessibility="yes">
     <Text> First layout </Text>
   </View>
-  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
-    backgroundColor: 'yellow'}} importantForAccessibility="no-hide-descendants">
+  <View
+    style={{
+      position: 'absolute',
+      left: 10,
+      top: 10,
+      right: 10,
+      height: 100,
+      backgroundColor: 'yellow'
+    }}
+    importantForAccessibility="no-hide-descendants">
     <Text> Second layout </Text>
   </View>
 </View>
@@ -230,9 +246,9 @@ To handle action requests, a component must implement an `onAccessibilityAction`
 <View
   accessible={true}
   accessibilityActions={[
-    {name: 'cut', label: 'cut'},
-    {name: 'copy', label: 'copy'},
-    {name: 'paste', label: 'paste'},
+    { name: 'cut', label: 'cut' },
+    { name: 'copy', label: 'copy' },
+    { name: 'paste', label: 'paste' }
   ]}
   onAccessibilityAction={(event) => {
     switch (event.nativeEvent.actionName) {

docs/actionsheetios.md

@@ -81,13 +81,13 @@ ActionSheetIOS.showActionSheetWithOptions(
   {
     options: ['Cancel', 'Remove'],
     destructiveButtonIndex: 1,
-    cancelButtonIndex: 0,
+    cancelButtonIndex: 0
   },
   (buttonIndex) => {
     if (buttonIndex === 1) {
       /* destructive action */
     }
-  },
+  }
 );
 ```
 

docs/alert.md

@@ -171,15 +171,18 @@ Alert.alert(
   'Alert Title',
   'My Alert Msg',
   [
-    {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
+    {
+      text: 'Ask me later',
+      onPress: () => console.log('Ask me later pressed')
+    },
     {
       text: 'Cancel',
       onPress: () => console.log('Cancel Pressed'),
-      style: 'cancel',
+      style: 'cancel'
     },
-    {text: 'OK', onPress: () => console.log('OK Pressed')},
+    { text: 'OK', onPress: () => console.log('OK Pressed') }
   ],
-  {cancelable: false},
+  { cancelable: false }
 );
 ```
 

docs/alertios.md

@@ -10,14 +10,17 @@ title: 🚧 AlertIOS
 Creating an iOS alert:
 
 ```jsx
-AlertIOS.alert('Sync Complete', 'All your data are belong to us.');
+AlertIOS.alert(
+  'Sync Complete',
+  'All your data are belong to us.'
+);
 ```
 
 Creating an iOS prompt:
 
 ```jsx
 AlertIOS.prompt('Enter a value', null, (text) =>
-  console.log('You entered ' + text),
+  console.log('You entered ' + text)
 );
 ```
 
@@ -56,13 +59,13 @@ AlertIOS.alert(
     {
       text: 'Cancel',
       onPress: () => console.log('Cancel Pressed'),
-      style: 'cancel',
+      style: 'cancel'
     },
     {
       text: 'Install',
-      onPress: () => console.log('Install Pressed'),
-    },
-  ],
+      onPress: () => console.log('Install Pressed')
+    }
+  ]
 );
 ```
 
@@ -97,14 +100,15 @@ AlertIOS.prompt(
     {
       text: 'Cancel',
       onPress: () => console.log('Cancel Pressed'),
-      style: 'cancel',
+      style: 'cancel'
     },
     {
       text: 'OK',
-      onPress: (password) => console.log('OK Pressed, password: ' + password),
-    },
+      onPress: (password) =>
+        console.log('OK Pressed, password: ' + password)
+    }
   ],
-  'secure-text',
+  'secure-text'
 );
 ```
 
@@ -118,7 +122,7 @@ AlertIOS.prompt(
   null,
   (text) => console.log('Your username is ' + text),
   null,
-  'default',
+  'default'
 );
 ```
 

docs/animated.md

@@ -215,7 +215,7 @@ In most cases, you will be using `timing()`. By default, it uses a symmetric eas
 Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
 
 ```jsx
-Animated.timing({}).start(({finished}) => {
+Animated.timing({}).start(({ finished }) => {
   /* completion callback */
 });
 ```
@@ -551,7 +551,7 @@ Animations are started by calling start() on your animation. start() takes a com
 Start example with callback:
 
 ```jsx
-Animated.timing({}).start(({finished}) => {
+Animated.timing({}).start(({ finished }) => {
   /* completion callback */
 });
 ```

docs/animations.md

@@ -76,7 +76,7 @@ For example, if we want to create a 2-second long animation of an object that sl
 Animated.timing(this.state.xPosition, {
   toValue: 100,
   easing: Easing.back(),
-  duration: 2000,
+  duration: 2000
 }).start();
 ```
 
@@ -93,19 +93,19 @@ Animated.sequence([
   // decay, then spring to start and twirl
   Animated.decay(position, {
     // coast to a stop
-    velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
-    deceleration: 0.997,
+    velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
+    deceleration: 0.997
   }),
   Animated.parallel([
     // after decay, in parallel:
     Animated.spring(position, {
-      toValue: {x: 0, y: 0}, // return to start
+      toValue: { x: 0, y: 0 } // return to start
     }),
     Animated.timing(twirl, {
       // and twirl
-      toValue: 360,
-    }),
-  ]),
+      toValue: 360
+    })
+  ])
 ]).start(); // start the sequence group
 ```
 
@@ -124,7 +124,7 @@ const a = new Animated.Value(1);
 const b = Animated.divide(1, a);
 
 Animated.spring(a, {
-  toValue: 2,
+  toValue: 2
 }).start();
 ```
 
@@ -137,7 +137,7 @@ A basic mapping to convert a 0-1 range to a 0-100 range would be:
 ```jsx
 value.interpolate({
   inputRange: [0, 1],
-  outputRange: [0, 100],
+  outputRange: [0, 100]
 });
 ```
 
@@ -160,7 +160,7 @@ For example, you may want to think about your `Animated.Value` as going from 0 t
 ```jsx
 value.interpolate({
   inputRange: [-300, -100, 0, 100, 101],
-  outputRange: [300, 0, 1, 0, 0],
+  outputRange: [300, 0, 1, 0, 0]
 });
 ```
 
@@ -186,7 +186,7 @@ Input | Output
 ```jsx
 value.interpolate({
   inputRange: [0, 360],
-  outputRange: ['0deg', '360deg'],
+  outputRange: ['0deg', '360deg']
 });
 ```
 
@@ -197,12 +197,12 @@ value.interpolate({
 Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
 
 ```jsx
-Animated.spring(follower, {toValue: leader}).start();
+Animated.spring(follower, { toValue: leader }).start();
 Animated.timing(opacity, {
   toValue: pan.x.interpolate({
     inputRange: [0, 300],
-    outputRange: [1, 0],
-  }),
+    outputRange: [1, 0]
+  })
 }).start();
 ```
 
@@ -695,7 +695,7 @@ Using the native driver for normal animations is straightforward. You can add `u
 Animated.timing(this.state.animatedValue, {
   toValue: 1,
   duration: 500,
-  useNativeDriver: true, // <-- Add this
+  useNativeDriver: true // <-- Add this
 }).start();
 ```
 
@@ -710,11 +710,11 @@ The native driver also works with `Animated.event`. This is especially useful fo
     [
       {
         nativeEvent: {
-          contentOffset: {y: this.state.animatedValue},
-        },
-      },
+          contentOffset: { y: this.state.animatedValue }
+        }
+      }
     ],
-    {useNativeDriver: true}, // <-- Add this
+    { useNativeDriver: true } // <-- Add this
   )}>
   {content}
 </Animated.ScrollView>
@@ -736,10 +736,10 @@ While using transform styles such as `rotateY`, `rotateX`, and others ensure the
 <Animated.View
   style={{
     transform: [
-      {scale: this.state.scale},
-      {rotateY: this.state.rotateY},
-      {perspective: 1000}, // without this line this Animation will not render on Android while working fine on iOS
-    ],
+      { scale: this.state.scale },
+      { rotateY: this.state.rotateY },
+      { perspective: 1000 } // without this line this Animation will not render on Android while working fine on iOS
+    ]
   }}
 />
 ```

docs/appearance.md

@@ -4,7 +4,7 @@ title: Appearance
 ---
 
 ```jsx
-import {Appearance} from 'react-native';
+import { Appearance } from 'react-native';
 ```
 
 The `Appearance` module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark).

docs/appregistry.md

@@ -13,7 +13,7 @@ title: AppRegistry
 `AppRegistry` is the JS entry point to running all React Native apps. App root components should register themselves with `AppRegistry.registerComponent`, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking `AppRegistry.runApplication`.
 
 ```jsx
-import {Text, AppRegistry} from 'react-native';
+import { Text, AppRegistry } from 'react-native';
 
 const App = (props) => (
   <View>