TouchableHighlight: Update API and Snack to functional componen… (#1591)

* Update TouchableHighlight example and API

* Update touchablehighlight.md

- Prettifying code.
- Tweaking example to include toggler.

* Update touchablehighlight.md

Example didn't work for a stray `this`!

Co-authored-by: Rachel Nabors <rachelnabors@users.noreply.github.com>

Author: Damian Sznajder

docs/touchablehighlight.md

@@ -9,83 +9,138 @@ The underlay comes from wrapping the child in a new View, which can affect layou
 
 TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
 
-Example:
-
 ```jsx
-renderButton: function() {
+function MyComponent(props) {
   return (
-    <TouchableHighlight onPress={this._onPressButton}>
-      <Image
-        style={styles.button}
-        source={require('./myButton.png')}
-      />
-    </TouchableHighlight>
+    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
+      <Text>My Component</Text>
+    </View>
   );
-},
+}
+
+<TouchableHighlight
+  activeOpacity={0.6}
+  underlayColor="#DDDDDD"
+  onPress={() => alert('Pressed!')}>
+  <MyComponent />
+</TouchableHighlight>
 ```
 
 ### Example
 
-```SnackPlayer name=TouchableHighlight
-import React, { Component } from 'react'
-import {
-  StyleSheet,
-  TouchableHighlight,
-  Text,
-  View,
-} from 'react-native'
+<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=TouchableHighlight%20Function%20Component%20Example
+import React, { useState } from "react";
+import { StyleSheet, TouchableHighlight, Text, View } from "react-native";
+
+export default function TouchableHighlightExample() {
+  const [count, setCount] = useState(0);
+
+  const onPress = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableHighlight style={styles.button} onPress={onPress}>
+        <Text> Touch Here </Text>
+      </TouchableHighlight>
+
+      <View style={styles.countContainer}>
+        <Text style={styles.countText}>{count !== 0 ? 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="classical syntax" />
+
+```SnackPlayer name=TouchableHighlight%20Class%20Component%20Example
+import React, { Component } from "react";
+import { StyleSheet, TouchableHighlight, Text, View } from "react-native";
 
 export default class App extends Component {
   constructor(props) {
-    super(props)
-    this.state = { count: 0 }
+    super(props);
+    this.state = { count: 0 };
   }
 
   onPress = () => {
     this.setState({
-      count: this.state.count+1
-    })
-  }
+      count: this.state.count + 1
+    });
+  };
 
- render() {
+  render() {
     return (
       <View style={styles.container}>
-        <TouchableHighlight
-         style={styles.button}
-         onPress={this.onPress}
-        >
-         <Text> Touch Here </Text>
+        <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}
+            {this.state.count !== 0 ? this.state.count : null}
           </Text>
         </View>
       </View>
-    )
+    );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
     paddingHorizontal: 10
   },
   button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
+    alignItems: "center",
+    backgroundColor: "#DDDDDD",
     padding: 10
   },
   countContainer: {
-    alignItems: 'center',
+    alignItems: "center",
     padding: 10
   },
   countText: {
-    color: '#FF00FF'
+    color: "#FF00FF"
   }
-})
+});
 ```
+<block class="endBlock syntax" />
 
 ### Props
 
@@ -97,7 +152,6 @@ const styles = StyleSheet.create({
 * [`style`](touchablehighlight.md#style)
 * [`underlayColor`](touchablehighlight.md#underlaycolor)
 * [`hasTVPreferredFocus`](touchablehighlight.md#hastvpreferredfocus)
-* [`tvParallaxProperties`](touchablehighlight.md#tvparallaxproperties)
 * [`nextFocusDown`](touchablehighlight.md#nextFocusDown)
 * [`nextFocusForward`](touchablehighlight.md#nextFocusForward)
 * [`nextFocusLeft`](touchablehighlight.md#nextFocusLeft)
@@ -171,18 +225,6 @@ _(Apple TV only)_ TV preferred focus (see documentation for the View component).
 
 ---
 
-### `tvParallaxProperties`
-
-_(Apple TV only)_ Object with properties to control Apple TV parallax effects.
-
-enabled: If true, parallax effects are enabled. Defaults to true. shiftDistanceX: Defaults to 2.0. shiftDistanceY: Defaults to 2.0. tiltAngle: Defaults to 0.05. magnification: Defaults to 1.0. pressMagnification: Defaults to 1.0. pressDuration: Defaults to 0.3. pressDelay: Defaults to 0.0.
-
-| Type   | Required | Platform |
-| ------ | -------- | -------- |
-| object | No       | iOS      |
-
----
-
 ### `nextFocusDown`
 
 TV next focus down (see documentation for the View component).