From b64ffd70cd1022d10c30d2df9e6cfdff72f79798 Mon Sep 17 00:00:00 2001
From: Kshitij Kotasthane <kshitij.kotasthsne@gmail.com>
Date: Fri, 8 Jan 2021 12:07:21 -0800
Subject: [PATCH] Added missing examples for TouchableHighlight and
 TouchableWithoutFeedback (#30364)

Summary:
Added example for the following missing props in TouchableHighlight
   * onHideUnderlay
   * onShowUnderlay

**Motivation** - Missing examples for these props in the RNTester app
## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Added] - Added example to ToucableHighlight

Pull Request resolved: https://github.com/facebook/react-native/pull/30364

Test Plan:
* Tested on an Android device
![under_2](https://user-images.githubusercontent.com/26821140/98783116-0a47dd00-241f-11eb-95a1-feffb5c8a00b.png)
![under_1](https://user-images.githubusercontent.com/26821140/98783118-0c11a080-241f-11eb-907a-498cdfceee13.png)
![Screenshot_1605441612](https://user-images.githubusercontent.com/26821140/99184542-946aab00-2769-11eb-847c-e5f71ff5093a.png)

Reviewed By: TheSavior

Differential Revision: D25563070

Pulled By: rickhanlonii

fbshipit-source-id: c8a10601cda28f4884e1444039a208d0b70cbdf1
---
 .../js/examples/Touchable/TouchableExample.js | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)

diff --git a/packages/rn-tester/js/examples/Touchable/TouchableExample.js b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
index 7c313cbf185..7c06a2b830b 100644
--- a/packages/rn-tester/js/examples/Touchable/TouchableExample.js
+++ b/packages/rn-tester/js/examples/Touchable/TouchableExample.js
@@ -479,6 +479,105 @@ const remoteImage = {
   uri: 'https://www.facebook.com/favicon.ico',
 };
 
+const TouchableHighlightUnderlayMethods = () => {
+  const [underlayVisible, setUnderlayVisible] = useState(
+    'Underlay not visible',
+  );
+
+  const hiddenUnderlay = () => {
+    setUnderlayVisible('Press to make underlay visible');
+  };
+
+  const shownUnderlay = () => {
+    setUnderlayVisible('Underlay visible');
+  };
+  return (
+    <TouchableHighlight
+      style={styles.logBox}
+      underlayColor={'#eee'}
+      onShowUnderlay={shownUnderlay}
+      onHideUnderlay={hiddenUnderlay}
+      onPress={() => {
+        console.log('TouchableHighlight underlay shown!');
+      }}>
+      <Text style={styles.textBlock}>{underlayVisible}</Text>
+    </TouchableHighlight>
+  );
+};
+
+const TouchableTouchSoundDisabled = () => {
+  const [soundEnabled, setSoundEnabled] = useState(false);
+  const toggleTouchableSound = () => {
+    soundEnabled ? setSoundEnabled(false) : setSoundEnabled(true);
+  };
+  return (
+    <>
+      {Platform.OS === 'android' ? (
+        <>
+          <TouchableWithoutFeedback
+            touchSoundDisabled={soundEnabled}
+            onPress={() => console.log('touchSoundDisabled pressed!')}>
+            <Text
+              style={{
+                padding: 10,
+              }}>
+              Touchables make a sound on Android, which can be turned off.
+            </Text>
+          </TouchableWithoutFeedback>
+          <TouchableOpacity
+            style={{
+              padding: 10,
+            }}
+            onPress={toggleTouchableSound}
+            touchSoundDisabled={soundEnabled}>
+            <Text style={styles.button}>
+              {soundEnabled
+                ? 'Disable Touchable Sound'
+                : 'Enable Touchable Sound'}
+            </Text>
+          </TouchableOpacity>
+        </>
+      ) : null}
+    </>
+  );
+};
+
+function TouchableOnFocus<T: React.AbstractComponent<any, any>>() {
+  const ref = useRef<?React.ElementRef<T> | {focus: Function}>(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [focusStatus, setFocusStatus] = useState(
+    'This touchable is not focused.',
+  );
+  const [isBlurred, setIsBlurred] = useState(
+    'This item still has focus, onBlur is not called',
+  );
+
+  const toggleFocus = () => {
+    isFocused
+      ? setFocusStatus('This touchable is focused')
+      : setIsFocused('This touchable is not focused') &&
+        setIsBlurred('This item has lost focus, onBlur called');
+  };
+  const focusTouchable = () => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  };
+
+  return (
+    <TouchableHighlight
+      ref={ref}
+      onFocus={toggleFocus}
+      onPress={focusTouchable}>
+      <Text>
+        {focusStatus}
+        {'\n'}
+        {isBlurred}
+      </Text>
+    </TouchableHighlight>
+  );
+}
+
 const styles = StyleSheet.create({
   row: {
     justifyContent: 'center',
@@ -603,6 +702,24 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'TouchableHighlight Underlay Visibility',
+    render: function(): React.Node {
+      return <TouchableHighlightUnderlayMethods />;
+    },
+  },
+  {
+    title: 'Touchable Touch Sound',
+    render: function(): React.Node {
+      return <TouchableTouchSoundDisabled />;
+    },
+  },
+  {
+    title: 'Touchable onFocus',
+    render: function(): React.Node {
+      return <TouchableOnFocus />;
+    },
+  },
   {
     title: '<Text onPress={fn}> with highlight',
     render: function(): React.Element<any> {