react-native-volume-manager
react-native-volume-manager copied to clipboard
Android: showNativeVolumeUI stops working after app goes in the background and comes back
I'm hiding the native UI on a section of my app but I found that if I lock the screen and then turn it on again, the native UI starts appearing. I tried hiding it when the app state is active but no luck. FYI, this is only happening on Android. Any ideas?
useEffect(() => {
// Hide it as soon as entering the section
VolumeManager.showNativeVolumeUI({ enabled: false });
}, []);
useEffect(() => {
const listener = AppState.addEventListener('change', (nextAppState) => {
// Hide it as soon as entering the section
VolumeManager.showNativeVolumeUI({ enabled: nextAppState !== 'active' });
});
return () => {
listener.remove();
// Show it when leaving the section
VolumeManager.showNativeVolumeUI({ enabled: true });
};
}, []);
Another thing I noticed is that after setting showNativeVolumeUI
to true
, setting it to false
doesn't work anymore.
E.g:
useEffect(() => {
VolumeManager.showNativeVolumeUI({ enabled: true });
setTimeout(() => {
// doesn't work :(
VolumeManager.showNativeVolumeUI({ enabled: false });
}, 10000);
}, []);
but setting it to false
and then true
works fine.
Any ideas? Thanks!
I'm getting the same issue on iOS.
Once I call: VolumeManager.showNativeVolumeUI({ enabled: true });
Calling this doesn't work as you would expect: VolumeManager.showNativeVolumeUI({ enabled: false });
Basically once you hide the native volume UI you can't bring it back.
There might be a logic issue here
I have to check this once I have a bit more time.
if (!flag && [strongSelf->customVolumeView superview]) {
[strongSelf->customVolumeView removeFromSuperview];
} else if (flag && ![strongSelf->customVolumeView superview]) {
// Potentially adjust the frame as needed, not necessarily CGRectZero
strongSelf->customVolumeView.frame = CGRectMake(0, 0, 0, 0);
UIViewController *topViewController = [strongSelf topMostViewController];
[topViewController.view addSubview:strongSelf->customVolumeView];
}
might do the trick but I am not 100% sure yet.
The below code change fixed the issue for me on iOS.
On reflection, this is likely a different issue to what matiastucci experienced.
if (flag) {
// To show the native volume UI, ensure our customVolumeView is removed from its superview
if ([strongSelf->customVolumeView superview]) {
[strongSelf->customVolumeView removeFromSuperview];
}
} else {
// To hide the native volume UI, add our customVolumeView offscreen if it's not already added
if (![strongSelf->customVolumeView superview]) {
// Ensure the customVolumeView is offscreen and not interfering visually
strongSelf->customVolumeView.frame = CGRectMake(0, 0, 0, 0); // Set the frame to CGRectZero
// Find the topMostViewController to add the customVolumeView to its view hierarchy
UIViewController *topViewController = [strongSelf topMostViewController];
if (topViewController) {
[topViewController.view addSubview:strongSelf->customVolumeView];
}
}
}`
@Kieraano yes, @matiastucci issue is related to Android. I have some ideas. I will also verify your suggestion and create some more test cases and release a new version pretty soon
Related issue(iOS)
-
showNativeVolumeUI
is not working, when app is in background state.
Step to produce
- Add the volume manage in background service (
React-Native-Ble-Manager
,React-Native-Background-Timer
). - Increase random volume, it is showing UI even it is set to false.
I don't think its possible to hide the volume toast when the app is backgrounded.
I don't think its possible to hide the volume toast when the app is backgrounded.
Ok, Thanks for quick reply!