From f7f347329efbff66a66477282f21fe6fef651498 Mon Sep 17 00:00:00 2001
From: nicehacker <mglwinkyawmyat@gmail.com>
Date: Thu, 21 Sep 2017 17:31:53 -0700
Subject: [PATCH] Add example on Components

Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Adding example on components section with [react-native-web-player](https://github.com/dabbott/react-native-web-player)

- ActivityIndicator
- TouchableOpacity
- TouchableHighlight

Screenshot on http://localhost:8079/react-native/docs/activityindicator.html
![react-native-activityindicator](https://user-images.githubusercontent.com/13135332/30432801-adca0982-9988-11e7-8e70-94ad9e42ea43.png)

Screenshot on http://localhost:8079/react-native/docs/touchableopacity.html
![react-native-touchableopacity](https://user-images.githubusercontent.com/13135332/30432718-80570554-9988-11e7-9c81-15ab98327fed.png)

Screenshot on http://localhost:8079/react-native/docs/touchablehighlight.html
![react-native-touchablehighlight](https://user-images.githubusercontent.com/13135332/30432733-8290fbb8-9988-11e7-94a1-86c3166e544d.png)
Closes https://github.com/facebook/react-native/pull/15950

Differential Revision: D5881366

Pulled By: hramos

fbshipit-source-id: 2926071723defedf9ed5cb1b1128204256c71dd9
---
 .../ActivityIndicator/ActivityIndicator.js    | 40 +++++++++++
 .../Touchable/TouchableHighlight.js           | 68 +++++++++++++++++++
 .../Components/Touchable/TouchableOpacity.js  | 24 +++----
 3 files changed, 120 insertions(+), 12 deletions(-)

diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js
index dd9706497..1ed1a7ebc 100644
--- a/Libraries/Components/ActivityIndicator/ActivityIndicator.js
+++ b/Libraries/Components/ActivityIndicator/ActivityIndicator.js
@@ -36,6 +36,46 @@ type DefaultProps = {
 
 /**
  * Displays a circular loading indicator.
+ *
+ * ### Example
+ *
+ * ```ReactNativeWebPlayer
+ * import React, { Component } from 'react'
+ * import {
+ *   ActivityIndicator,
+ *   AppRegistry,
+ *   StyleSheet,
+ *   Text,
+ *   View,
+ * } from 'react-native'
+ *
+ * class App extends Component {
+ *   render() {
+ *     return (
+ *       <View style={[styles.container, styles.horizontal]}>
+ *         <ActivityIndicator size="large" color="#0000ff" />
+ *         <ActivityIndicator size="small" color="#00ff00" />
+ *         <ActivityIndicator size="large" color="#0000ff" />
+ *         <ActivityIndicator size="small" color="#00ff00" />
+ *       </View>
+ *     )
+ *   }
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     justifyContent: 'center'
+ *   },
+ *   horizontal: {
+ *     flexDirection: 'row',
+ *     justifyContent: 'space-around',
+ *     padding: 10
+ *   }
+ * })
+ *
+ * AppRegistry.registerComponent('App', () => App)
+ * ```
  */
 /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
  * suppresses an error when upgrading Flow's support for React. To see the
diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js
index bd79c6290..2de2777e9 100644
--- a/Libraries/Components/Touchable/TouchableHighlight.js
+++ b/Libraries/Components/Touchable/TouchableHighlight.js
@@ -71,6 +71,74 @@ const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  *   );
  * },
  * ```
+ *
+ *
+ * ### Example
+ *
+ * ```ReactNativeWebPlayer
+ * import React, { Component } from 'react'
+ * import {
+ *   AppRegistry,
+ *   StyleSheet,
+ *   TouchableHighlight,
+ *   Text,
+ *   View,
+ * } from 'react-native'
+ *
+ * class App extends Component {
+ *   constructor(props) {
+ *     super(props)
+ *     this.state = { count: 0 }
+ *   }
+ *
+ *   onPress = () => {
+ *     this.setState({
+ *       count: this.state.count+1
+ *     })
+ *   }
+ *
+ *  render() {
+ *     return (
+ *       <View style={styles.container}>
+ *         <TouchableHighlight
+ *          style={styles.button}
+ *          onPress={this.onPress}
+ *         >
+ *          <Text> Touch Here </Text>
+ *         </TouchableHighlight>
+ *         <View style={[styles.countContainer]}>
+ *           <Text style={[styles.countText]}>
+ *             { this.state.count !== 0 ? this.state.count: null}
+ *           </Text>
+ *         </View>
+ *       </View>
+ *     )
+ *   }
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     justifyContent: 'center',
+ *     paddingHorizontal: 10
+ *   },
+ *   button: {
+ *     alignItems: 'center',
+ *     backgroundColor: '#DDDDDD',
+ *     padding: 10
+ *   },
+ *   countContainer: {
+ *     alignItems: 'center',
+ *     padding: 10
+ *   },
+ *   countText: {
+ *     color: '#FF00FF'
+ *   }
+ * })
+ *
+ * AppRegistry.registerComponent('App', () => App)
+ * ```
+ * 
  */
 
 var TouchableHighlight = createReactClass({
diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
index e3d64ff0e..4a46cdab9 100644
--- a/Libraries/Components/Touchable/TouchableOpacity.js
+++ b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -64,21 +64,21 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  * } from 'react-native'
  *
  * class App extends Component {
- * constructor(props) {
- *  super(props)
- *  this.state = { count: 0 }
- * }
+ *   constructor(props) {
+ *     super(props)
+ *     this.state = { count: 0 }
+ *   }
  *
- * onPress = () => {
- *   this.setState({
- *     count: this.state.count+1
- *   })
- * }
+ *   onPress = () => {
+ *     this.setState({
+ *       count: this.state.count+1
+ *     })
+ *   }
  *
  *  render() {
- *     return (
- *       <View style={styles.container}>
- *         <TouchableOpacity
+ *    return (
+ *      <View style={styles.container}>
+ *        <TouchableOpacity
  *          style={styles.button}
  *          onPress={this.onPress}
  *        >