From fa1b533c56b5e25fead69adda932a276e7e0fafd Mon Sep 17 00:00:00 2001
From: nicehacker <mglwinkyawmyat@gmail.com>
Date: Tue, 12 Sep 2017 20:25:16 -0700
Subject: [PATCH] Add Example for TouchableOpacity.js

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 with [react-native-web-player](https://github.com/dabbott/react-native-web-player)

Screenshot on http://localhost:8079/react-native/docs/touchableopacity.html
![react-native-touchableopacity](https://user-images.githubusercontent.com/13135332/30335218-bd32fb0e-9807-11e7-976d-5235402fdba8.png)
Closes https://github.com/facebook/react-native/pull/15911

Differential Revision: D5817180

Pulled By: TheSavior

fbshipit-source-id: 6399a53dabf8e3f0cf680aeb41d8afbaa2ce11e8
---
 .../Components/Touchable/TouchableOpacity.js  | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
index 72735325e..e3d64ff0e 100644
--- a/Libraries/Components/Touchable/TouchableOpacity.js
+++ b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -51,6 +51,72 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  *   );
  * },
  * ```
+ * ### Example
+ *
+ * ```ReactNativeWebPlayer
+ * import React, { Component } from 'react'
+ * import {
+ *   AppRegistry,
+ *   StyleSheet,
+ *   TouchableOpacity,
+ *   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}>
+ *         <TouchableOpacity
+ *          style={styles.button}
+ *          onPress={this.onPress}
+ *        >
+ *          <Text> Touch Here </Text>
+ *        </TouchableOpacity>
+ *        <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 TouchableOpacity = createReactClass({
   displayName: 'TouchableOpacity',