From 73c1ff413b63458e5d76cf6d08f0a1dfa90878c1 Mon Sep 17 00:00:00 2001
From: Kaio Duarte <duartedossantos@gmail.com>
Date: Wed, 5 Feb 2020 20:20:45 +0000
Subject: [PATCH 1/2] update TouchableOpacity Snack example

---
 docs/touchableopacity.md | 63 +++++++++++++---------------------------
 1 file changed, 20 insertions(+), 43 deletions(-)

diff --git a/docs/touchableopacity.md b/docs/touchableopacity.md
index 725a6e1f8ab..beb3b2d3aa7 100644
--- a/docs/touchableopacity.md
+++ b/docs/touchableopacity.md
@@ -25,64 +25,41 @@ renderButton: function() {
 ### Example
 
 ```SnackPlayer name=TouchableOpacity
-import React, { Component } from 'react'
-import {
-  StyleSheet,
-  TouchableOpacity,
-  Text,
-  View,
-} from 'react-native'
-
-export default 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>
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
+
+export default function App() {
+  const [count, setCount] = useState(0);
+  const handleIncrementCount = () => setCount(prevState => prevState + 1);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.countContainer}>
+        <Text>Count: {count}</Text>
       </View>
-    )
-  }
+      <TouchableOpacity style={styles.button} onPress={handleIncrementCount}>
+        <Text>Touch Here</Text>
+      </TouchableOpacity>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
-    paddingHorizontal: 10
+    paddingHorizontal: 10,
   },
   button: {
     alignItems: 'center',
     backgroundColor: '#DDDDDD',
-    padding: 10
+    padding: 10,
   },
   countContainer: {
     alignItems: 'center',
-    padding: 10
+    padding: 10,
   },
-  countText: {
-    color: '#FF00FF'
-  }
-})
+});
 ```
 
 ---

From b1ef6ae43a948a34e9916c29f333dc055e51fee6 Mon Sep 17 00:00:00 2001
From: Rachel Nabors <rachelnabors@users.noreply.github.com>
Date: Fri, 7 Feb 2020 16:58:46 +0000
Subject: [PATCH 2/2] Update touchableopacity.md

Ensuring that the old class example is still there.
---
 docs/touchableopacity.md | 79 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 78 insertions(+), 1 deletion(-)

diff --git a/docs/touchableopacity.md b/docs/touchableopacity.md
index beb3b2d3aa7..152457aa523 100644
--- a/docs/touchableopacity.md
+++ b/docs/touchableopacity.md
@@ -24,7 +24,20 @@ renderButton: function() {
 
 ### Example
 
-```SnackPlayer name=TouchableOpacity
+<div class="toggler">
+  <ul role="tablist" class="toggle-syntax">
+    <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
+```SnackPlayer name=Function%20Component%20Example%20TouchableOpacity
 import React, { useState } from 'react';
 import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
 
@@ -62,6 +75,70 @@ const styles = StyleSheet.create({
 });
 ```
 
+<block class="classical syntax" />
+
+```SnackPlayer name=Class%20Component%20Example
+import React, { Component } from 'react'
+import {
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+  View,
+} from 'react-native'
+
+export default 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'
+  }
+})
+```
+<block class="endBlock syntax" />
+
 ---
 
 # Reference