From 722f88ca9058c5d902c416b826a7a7ab347326b8 Mon Sep 17 00:00:00 2001 From: Andrew Kriger Date: Mon, 9 Apr 2018 16:57:54 -0700 Subject: [PATCH] Adds Android click sound to Touchables Summary: Android apps play a touch sound on press, as long as you have "Touch sounds" enabled in the settings. As and Android user, when building my app using React Native, one of the first things I noticed was that there were not any touch sounds. This is missing from React Native and there have been multiple PRs to have this implemented, but no success. This PR iterates over [#6825](https://github.com/facebook/react-native/pull/6825) and [#11136](https://github.com/facebook/react-native/pull/11136) This PR keeps it simple by only implementing the enhancement for Android, as iOS apps typically do not use touch sounds, and follows the users' system settings for whether or not the sound is played. I have manually tested this on multiple devices and emulators with zero problems [ANDROID] [ENHANCEMENT] [UIManagerModule.java]- Adds Android click sound to touchables [ANDROID] [ENHANCEMENT] [Touchable] - Adds Android click sound to touchables Closes https://github.com/facebook/react-native/pull/17183 Differential Revision: D7560327 Pulled By: hramos fbshipit-source-id: ce1094c437541bc677c7d64b0dba343dd9574422 --- Libraries/Components/Touchable/Touchable.js | 9 ++++++++- .../com/facebook/react/uimanager/UIManagerModule.java | 10 ++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/Touchable/Touchable.js b/Libraries/Components/Touchable/Touchable.js index 00a82cd64ac6e6..f39457b827253d 100644 --- a/Libraries/Components/Touchable/Touchable.js +++ b/Libraries/Components/Touchable/Touchable.js @@ -741,6 +741,9 @@ const TouchableMixin = { this._startHighlight(e); this._endHighlight(e); } + if (Platform.OS === 'android') { + this._playTouchSound(); + } this.touchableHandlePress(e); } } @@ -748,7 +751,11 @@ const TouchableMixin = { this.touchableDelayTimeout && clearTimeout(this.touchableDelayTimeout); this.touchableDelayTimeout = null; }, - + + _playTouchSound: function() { + UIManager.playTouchSound(); + }, + _startHighlight: function(e) { this._savePressInLocation(e); this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e); diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModule.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModule.java index 57430f3d07e7dd..3ef612874938d8 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModule.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModule.java @@ -12,6 +12,8 @@ import android.content.ComponentCallbacks2; import android.content.res.Configuration; +import android.content.Context; +import android.media.AudioManager; import com.facebook.common.logging.FLog; import com.facebook.debug.holder.PrinterHolder; import com.facebook.debug.tags.ReactDebugOverlayTags; @@ -584,6 +586,14 @@ public void clearJSResponder() { public void dispatchViewManagerCommand(int reactTag, int commandId, ReadableArray commandArgs) { mUIImplementation.dispatchViewManagerCommand(reactTag, commandId, commandArgs); } + + @ReactMethod + public void playTouchSound() { + AudioManager audioManager = (AudioManager) getReactApplicationContext().getSystemService(Context.AUDIO_SERVICE); + if (audioManager != null) { + audioManager.playSoundEffect(AudioManager.FX_KEY_CLICK); + } + } /** * Show a PopupMenu.