React-native-volume-indicator NPM

tl;dr

Replaces the default iOS volume popup by a less-obtrusive indicator. Includes helpers to get access and subscribe to your app's audio volume.

Getting started

$ npm install react-native-volume-indicator --save

Installation

⚠️ Only iOS is supported at the moment.

Mostly automatic installation

$ react-native link react-native-volume-indicator

Manual installation

iOS

In XCode, in the project navigator, right click Libraries and select Add Files to [your project's name]
Go to node_modules/react-native-volume-indicator and add RNVolumeIndicator.xcodeproj
In XCode, in the project navigator, select your project. Add libRNVolumeIndicator.a to your project's Build Phases ➜ Link Binary With Libraries
Run your project

Usage

⚠️ Please note that you'll only be able to get the actual volume using a physical device.

VolumeIndicator

Component that displays a volume indicator. By default, it looks like a blue slider that fills up from left to right depending on the current volume.

Exemple

import VolumeIndicator from 'react-native-volume-indicator';

class App extends React.Component {
  render() {
    <VolumeIndicator />
  };
}

getVolume()

Call it whenever you need to get the volume of your app's audio.

Exemple

import {getVolume} from 'react-native-volume-indicator';

class App extends React.Component {
  
  _getVolume() {
    getVolume().then(volume => {
      // ...
    })
  }
}

listenToVolumeChange(callback) / stopListeningToVolumeChange()

Use listenToVolumeChange when you want to start listening to volume change. Don't forget to remove the listener by calling stopListeningToVolumeChange().

Allows you to create your own volume indicator easily.

Exemple

import {listenToVolumeChange, stopListeningToVolumeChange} from 'react-native-volume-indicator';

class App extends React.Component {
  
  componentDidMount(){
    listenToVolumeChange(this._onVolumeChange);
  }
  
  componentWillUnmount(){
    stopListeningToVolumeChange();
  }
  
  _onVolumeChange = (volume) => {
    // ...
  }
}