From 590f90fe2eab0fc4a1d64e2409eaf4a617dcd9d1 Mon Sep 17 00:00:00 2001
From: Artyom Trityak <art.trityak@gmail.com>
Date: Wed, 22 Jun 2016 18:51:17 -0700
Subject: [PATCH] Fix guides docs to es2015 classes and remove flowtype from
 Animation example

Summary:
1. Animation guide page is the only place where Flowtype is used, it would be better to remove it to prevent some confusion.

2. ES2015 classes in guidelines docs pages and fixed some typos

**Test plan (required)**

Should i write any tests for this?
Closes https://github.com/facebook/react-native/pull/8339

Differential Revision: D3474192

Pulled By: bestander

fbshipit-source-id: 5531d1e399eaed0952732ac2e0bd1effc72d00a8
---
 docs/Animations.md              |  8 +++----
 docs/DirectManipulation.md      | 40 +++++++++++++++++++--------------
 docs/NativeComponentsAndroid.md |  3 ++-
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/docs/Animations.md b/docs/Animations.md
index 5eff3d3c53f..19629b6cb81 100644
--- a/docs/Animations.md
+++ b/docs/Animations.md
@@ -24,13 +24,13 @@ component with a simple spring bounce on mount looks like this:
 
 ```javascript
 class Playground extends React.Component {
-  constructor(props: any) {
+  constructor(props) {
     super(props);
     this.state = {
       bounceValue: new Animated.Value(0),
     };
   }
-  render(): ReactElement {
+  render() {
     return (
       <Animated.Image                         // Base: Image, Text, View
         source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
@@ -286,7 +286,7 @@ class App extends React.Component {
   componentWillMount() {
     // Animate creation
     LayoutAnimation.spring();
-  },
+  }
 
   _onPress() {
     // Animate the update
@@ -306,7 +306,7 @@ class App extends React.Component {
       </View>
     );
   }
-};
+}
 ```
 [Run this example](https://rnplay.org/apps/uaQrGQ)
 
diff --git a/docs/DirectManipulation.md b/docs/DirectManipulation.md
index c3fb6f7f871..1d4f6f0416c 100644
--- a/docs/DirectManipulation.md
+++ b/docs/DirectManipulation.md
@@ -32,7 +32,7 @@ uses `setNativeProps` internally to update the opacity of its child
 component:
 
 ```javascript
-setOpacityTo: function(value) {
+setOpacityTo(value) {
   // Redacted: animation related code
   this.refs[CHILD_REF].setNativeProps({
     opacity: value
@@ -57,9 +57,10 @@ might implement it with that constraint is to store the opacity value
 in the state, then update that value whenever `onPress` is fired:
 
 ```javascript
-getInitialState() {
-  return { myButtonOpacity: 1, }
-},
+constructor(props) {
+  super(props);
+  this.state = { myButtonOpacity: 1, };
+}
 
 render() {
   return (
@@ -93,25 +94,25 @@ Composite components are not backed by a native view, so you cannot call
 `setNativeProps` on them. Consider this example:
 
 ```javascript
-var MyButton = React.createClass({
+class MyButton extends React.Component {
   render() {
     return (
       <View>
         <Text>{this.props.label}</Text>
       </View>
     )
-  },
-});
+  }
+}
 
-var App = React.createClass({
+class App extends React.Component {
   render() {
     return (
       <TouchableOpacity>
         <MyButton label="Press me!" />
       </TouchableOpacity>
     )
-  },
-});
+  }
+}
 ```
 [Run this example](https://rnplay.org/apps/JXkgmQ)
 
@@ -132,10 +133,10 @@ that calls `setNativeProps` on the appropriate child with the given
 arguments.
 
 ```javascript
-var MyButton = React.createClass({
+class MyButton extends React.Component {
   setNativeProps(nativeProps) {
     this._root.setNativeProps(nativeProps);
-  },
+  }
 
   render() {
     return (
@@ -143,8 +144,8 @@ var MyButton = React.createClass({
         <Text>{this.props.label}</Text>
       </View>
     )
-  },
-});
+  }
+}
 ```
 [Run this example](https://rnplay.org/apps/YJxnEQ)
 
@@ -172,10 +173,15 @@ necessary. For example, the following code demonstrates clearing the
 input when you tap a button:
 
 ```javascript
-var App = React.createClass({
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.clearText = this.clearText.bind(this);
+  }
+
   clearText() {
     this._textInput.setNativeProps({text: ''});
-  },
+  }
 
   render() {
     return (
@@ -188,7 +194,7 @@ var App = React.createClass({
       </View>
     );
   }
-});
+}
 ```
 [Run this example](https://rnplay.org/plays/pOI9bA)
 
diff --git a/docs/NativeComponentsAndroid.md b/docs/NativeComponentsAndroid.md
index b9e01426b5d..14712182416 100644
--- a/docs/NativeComponentsAndroid.md
+++ b/docs/NativeComponentsAndroid.md
@@ -148,7 +148,8 @@ The event name `topChange` maps to the `onChange` callback prop in JavaScript (m
 // MyCustomView.js
 
 class MyCustomView extends React.Component {
-  constructor() {
+  constructor(props) {
+    super(props);
     this._onChange = this._onChange.bind(this);
   }
   _onChange(event: Event) {