react-native-volume-manager

Take control of system volume on iOS and Android with this powerful native package. Seamlessly adjust volume levels, track changes, and design custom sliders for a tailored user experience. With an intuitive API, you can access the current volume, detect the silent switch on iOS, and monitor ringer mode changes on Android.

Features

• Adjust system volume
• Monitor volume changes
• Suppress default volume UI
• Access current volume level
• Detect silent switch status (iOS)
• Enable/disable audio session and change category (iOS)
• Track ringer mode changes (Android)

Installation

Using npm:

npm install react-native-volume-manager

Using Yarn:

yarn add react-native-volume-manager

New and old architecture are supported. React Native 0.76+ is required. iOS 15+ is required. If you are using Expo, make sure to use expo-build-properties to set the minimum iOS version to 15. (Default in SDK 52+). Kotlin 1.8+ is required. No support for older versions!

[
  "expo-build-properties",
  {
    "android": {
      "compileSdkVersion": 34,
      "targetSdkVersion": 34,
      "buildToolsVersion": "34.0.0"
    },
    "ios": {
      "deploymentTarget": "15.2"
    }
  }
]

> Note: This library is incompatible with Expo Go. To use it, you can install a custom development client.

Simulators / Emulators

• iOS: The AVAudioSession API provides control over audio behaviors and settings on iOS devices. However, hardware-specific features like volume control and audio route selection are unavailable on macOS, where the simulator runs. Consequently, this package only works on a physical device, as events won’t trigger in the simulator.

• Android: It runs on both a real device (API level 21+) and the emulator (API level 33+).

Web

This library is not functional on the web. While the package exports no-op methods for web usage, allowing you to include it without any issues, these methods have no actual effect.

Usage

All methods are available under the VolumeManager namespace or can be imported directly. Here are some examples:

import { VolumeManager } from 'react-native-volume-manager';

// Disable the native volume toast globally (iOS, Android)
VolumeManager.showNativeVolumeUI({ enabled: true });

// Set the volume (value between 0 and 1)
await VolumeManager.setVolume(0.5);

// Get the current volume async
const { volume } = await VolumeManager.getVolume();

// Listen to volume changes
const volumeListener = VolumeManager.addVolumeListener((result) => {
  console.log(result.volume);

  // On Android, additional volume types are available:
  // music, system, ring, alarm, notification
});

// Remove the volume listener
volumeListener.remove();

iOS Audio Session Management

This section provides methods related to AVAudioSession on iOS. For example:

import { VolumeManager } from 'react-native-volume-manager';

// Enable or disable iOS AudioSession
VolumeManager.enable(true, true); // Enable async
VolumeManager.enable(false, true); // Disable async, non-blocking

// Activate or deactivate the audio session
VolumeManager.setActive(true, true); // Activate async
VolumeManager.setActive(false, true); // Deactivate async, non-blocking

iOS Mute Switch Listener

To monitor the mute switch status on iOS, you can use the following:

import { VolumeManager } from 'react-native-volume-manager';

const silentListener = VolumeManager.addSilentListener((status) => {
  console.log(status.isMuted);
  console.log(status.initialQuery);
});

// Remove the silent listener
silentListener.remove();

Android Ringer Listener

To listen to ringer mode changes on Android, you can use the following:

import { VolumeManager } from 'react-native-volume-manager';

const ringerListener = VolumeManager.addRingerListener((status) => {
  console.log(status.ringerMode);
});

// Remove the ringer listener
VolumeManager.removeRingerListener(ringerListener);

useSilentSwitch hook

useSilentSwitch is a custom React hook that monitors the silent switch on an iOS device. The nativeIntervalCheck parameter (optional) allows you to set the interval at which the silent switch status is checked in seconds. If the parameter is not provided, a default interval is used (2.0).

The hook returns an object with two properties: isMuted (which represents the ring/mute switch position) and initialQuery (which indicates whether the reported status is the first one after the application launch). On non-iOS platforms or for the first call, the hook returns undefined. This hook is only applicable to iOS.

import React from 'react';
import { View, Text } from 'react-native';
import { useSilentSwitch } from 'react-native-volume-manager';

export default function App() {
  const status = useSilentSwitch();

  return (
    
  );
}

In this example, useSilentSwitch is used to monitor the status of the silent switch on iOS devices. The status of the switch (isMuted) and whether it's the initial query (initialQuery) are displayed. If the status is not available yet, "Fetching..." is displayed.

useRingerMode Hook

You can use the useRingerMode hook to get and set the ringer mode on Android:

import React from 'react';
import { View, Text, Button } from 'react-native';
import {
  useRingerMode,
  RINGER_MODE,
  RingerModeType,
} from 'react-native-volume-manager';

const modeText = {
  [RINGER_MODE.silent]: 'Silent',
  [RINGER_MODE.normal]: 'Normal',
  [RINGER_MODE.vibrate]: 'Vibrate',
};

export default function App() {
  const { mode, error, setMode } = useRingerMode();

  return (