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: #24666

Differential Revision: D15166582

Pulled By: cpojer

fbshipit-source-id: 48bfe88f03f791e3b9c7cbd0e2eed80a2cfba8ee

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}

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);

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,