From 45e77c8324f7dc2d53109e45a4e0b18cbab6a877 Mon Sep 17 00:00:00 2001
From: Yury Korzun <yury@flyclops.com>
Date: Wed, 1 May 2019 09:28:26 -0700
Subject: [PATCH] Adds a touchSoundDisabled prop to Touchable (#24666)

Summary:
Currently, every time a touchable is pressed on Android, a system sound is played. It was added in the PR #17183. There is no way to disable it, except disabling touch on sound on the system level. I am pretty sure there are cases when touches should be silent and there should be an option to disable it.

Related PRs - #17183, #11136

[Android][added] - Added a touchSoundDisabled prop to Touchable. If true, doesn't system sound on touch.
Pull Request resolved: https://github.com/facebook/react-native/pull/24666

Differential Revision: D15166582

Pulled By: cpojer

fbshipit-source-id: 48bfe88f03f791e3b9c7cbd0e2eed80a2cfba8ee
---
 Libraries/Components/Button.js                           | 9 ++++++++-
 Libraries/Components/Touchable/Touchable.js              | 2 +-
 .../Components/Touchable/TouchableWithoutFeedback.js     | 5 +++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/Libraries/Components/Button.js b/Libraries/Components/Button.js
index 7a233cfc584edc..c442a2cf1a24ce 100644
--- a/Libraries/Components/Button.js
+++ b/Libraries/Components/Button.js
@@ -33,6 +33,11 @@ type ButtonProps = $ReadOnly<{|
    */
   onPress: (event?: PressEvent) => mixed,
 
+  /**
+   * If true, doesn't play system sound on touch (Android Only)
+   **/
+  touchSoundDisabled?: ?boolean,
+
   /**
    * Color of the text (iOS), or background color of the button (Android)
    */
@@ -128,6 +133,7 @@ class Button extends React.Component<ButtonProps> {
       accessibilityLabel,
       color,
       onPress,
+      touchSoundDisabled,
       title,
       hasTVPreferredFocus,
       nextFocusDown,
@@ -174,7 +180,8 @@ class Button extends React.Component<ButtonProps> {
         nextFocusUp={nextFocusUp}
         testID={testID}
         disabled={disabled}
-        onPress={onPress}>
+        onPress={onPress}
+        touchSoundDisabled={touchSoundDisabled}>
         <View style={buttonStyles}>
           <Text style={textStyles} disabled={disabled}>
             {formattedTitle}
diff --git a/Libraries/Components/Touchable/Touchable.js b/Libraries/Components/Touchable/Touchable.js
index 03aeeb9261b444..5eebe51deb096b 100644
--- a/Libraries/Components/Touchable/Touchable.js
+++ b/Libraries/Components/Touchable/Touchable.js
@@ -872,7 +872,7 @@ const TouchableMixin = {
           this._startHighlight(e);
           this._endHighlight(e);
         }
-        if (Platform.OS === 'android') {
+        if (Platform.OS === 'android' && !this.props.touchSoundDisabled) {
           this._playTouchSound();
         }
         this.touchableHandlePress(e);
diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
index 67c3c31eb6cbb8..8d317967e7c6f5 100755
--- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js
+++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -67,6 +67,7 @@ export type Props = $ReadOnly<{|
   disabled?: ?boolean,
   hitSlop?: ?EdgeInsetsProp,
   nativeID?: ?string,
+  touchSoundDisabled?: ?boolean,
   onBlur?: ?(e: BlurEvent) => void,
   onFocus?: ?(e: FocusEvent) => void,
   onLayout?: ?(event: LayoutEvent) => mixed,
@@ -135,6 +136,10 @@ const TouchableWithoutFeedback = ((createReactClass({
      *   `{nativeEvent: {layout: {x, y, width, height}}}`
      */
     onLayout: PropTypes.func,
+    /**
+     * If true, doesn't play system sound on touch (Android Only)
+     **/
+    touchSoundDisabled: PropTypes.bool,
 
     onLongPress: PropTypes.func,