Android: showNativeVolumeUI stops working after app goes in the background and comes back

[matiastucci]

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 });
    };
  }, []);

[matiastucci]

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!

[Kieraano]

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.

[hirbod]

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.

[Kieraano]

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];
        }
      }
    }`

[hirbod]

@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

[rajdivergenceneuro]

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.

[hirbod]

I don't think its possible to hide the volume toast when the app is backgrounded.

[rajdivergenceneuro]

I don't think its possible to hide the volume toast when the app is backgrounded.

Ok, Thanks for quick reply!