I am trying to detect when the user presses volume up button within a react-native application. I am not using any media as music or video directly in the phone, I want to use the volume buttons for a different purpose. e.g: triggering the camera shot.
If there are more than 1 screen on stack, device back button will show previous screen. 2. If there is only 1 screen on stack, device back button will exit app. Important: Don't forget to bind method in constructor and to remove listener in componentWillUnmount.
Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.
Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button. This is an API that works both on Android and iOS and can show static alerts.
You will need to wrap your view object with TouchableOpacity or one of the other Touchable components. With TouchableOpacity you have the onPress prop that is passed a press event. From this press event you have access to the x,y coordinates of the press.
@dv3's answer is helpful for iOS, but IFours' package will not work on Android (see https://github.com/ifours/react-native-volume-slider/issues/1).
My solution for Android has been to use https://www.npmjs.com/package/react-native-volume. This will detect media volume changes. (I'm pretty new to React Native so I'm still working on a way to force the volume button to change the media volume specifically).
Edit: playing a silent sound on loop to force the "media" volume input. Pretty hacky but it works.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With