Prettier config update

.prettierrc

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

docs/accessibility.md

@@ -35,7 +35,8 @@ To use, set the `accessibilityLabel` property to a custom string on your View, T
 <TouchableOpacity
   accessible={true}
   accessibilityLabel="Tap me!"
-  onPress={this._onPress}>
+  onPress={this._onPress}
+>
   <View style={styles.button}>
     <Text style={styles.buttonText}>Press me!</Text>
   </View>
@@ -55,7 +56,8 @@ To use, set the `accessibilityHint` property to a custom string on your View, Te
   accessible={true}
   accessibilityLabel="Go back"
   accessibilityHint="Navigates to the previous screen"
-  onPress={this._onPress}>
+  onPress={this._onPress}
+>
   <View style={styles.button}>
     <Text style={styles.buttonText}>Back</Text>
   </View>
@@ -230,9 +232,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

@@ -17,7 +17,7 @@ Creating an iOS prompt:
 
 ```jsx
 AlertIOS.prompt('Enter a value', null, (text) =>
-  console.log('You entered ' + text),
+  console.log('You entered ' + text)
 );
 ```
 
@@ -56,13 +56,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 +97,14 @@ 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 +118,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/animatedvaluexy.md

@@ -14,30 +14,31 @@ class DraggableView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      pan: new Animated.ValueXY(), // inits to zero
+      pan: new Animated.ValueXY() // inits to zero
     };
     this.state.panResponder = PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onPanResponderMove: Animated.event([
         null,
         {
           dx: this.state.pan.x, // x,y are Animated.Value
-          dy: this.state.pan.y,
-        },
+          dy: this.state.pan.y
+        }
       ]),
       onPanResponderRelease: () => {
         Animated.spring(
           this.state.pan, // Auto-multiplexed
-          {toValue: {x: 0, y: 0}}, // Back to zero
+          { toValue: { x: 0, y: 0 } } // Back to zero
         ).start();
-      },
+      }
     });
   }
   render() {
     return (
       <Animated.View
         {...this.state.panResponder.panHandlers}
-        style={this.state.pan.getLayout()}>
+        style={this.state.pan.getLayout()}
+      >
         {this.props.children}
       </Animated.View>
     );

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,12 +710,13 @@ 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 +737,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).