diff --git a/docs/touchableopacity.md b/docs/touchableopacity.md
index 725a6e1f8ab..152457aa523 100644
--- a/docs/touchableopacity.md
+++ b/docs/touchableopacity.md
@@ -24,7 +24,60 @@ 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';
+
+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,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#DDDDDD',
+    padding: 10,
+  },
+  countContainer: {
+    alignItems: 'center',
+    padding: 10,
+  },
+});
+```
+
+<block class="classical syntax" />
+
+```SnackPlayer name=Class%20Component%20Example
 import React, { Component } from 'react'
 import {
   StyleSheet,
@@ -84,6 +137,7 @@ const styles = StyleSheet.create({
   }
 })
 ```
+<block class="endBlock syntax" />
 
 ---