@starling-tech/react-native-control-volume
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

react-native-control-volume

Control device volume for iOS and Android.

First installation step (applied for both iOS & Android)

$ npm install @starling-tech/react-native-control-volume --save

2. Automatic installation

$ react-native link @starling-tech/react-native-control-volume

3. Manual installation

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-control-volume => ios
    • add ReactNativeControlVolume.xcodeproj to the Libraries folder in your XCode project
  3. In XCode, in the project navigator, select your project. Add libReactNativeControlVolume.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)

Android

Manual installation

  1. In Android Studio open Module Settings and add a Gradle Project.
  2. Look for react-native-control-volume android folder and link with a Gradle.
  3. Open MyApplication.java from main app and put the ReactNativeControlVolumePackage
 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNControlVolumePackage()
      );
    }

Usage

This component only exposes an api to update device volume and listens for VolumeChanged events via hardware buttons. There is no UI component included.

// Other imports
...

import ControlVolume, {
  ControlVolumeEvents
} from "react-native-control-volume";
import Slider from '@react-native-community/slider';

class App extends React.Component {
  state = {
    volume: 0
  }

  async componentDidMount() {
    this.setState({
      volume: await ControlVolume.getVolume()
    });

    // Add and store event listener
    this.volEvent = ControlVolumeEvents.addListener(
      "VolumeChanged",
      this.volumeEvent
    );
  }

  // Updates Slider UI when hardware buttons change volume
  volumeEvent = event => {
    this.setState({ volume: event.volume });
  };

  // Updates device volume
  sliderChange(value) {
    ControlVolume.change(value);
  }

  componentWillUnmount() {
    // remove event listener
    this.volEvent.remove();
  }

  render() {
    return (
      <Slider
        value={this.state.volume}
        onValueChange={this.sliderChange}
        // Other props
      />
    )
  }
}

Package Sidebar

Install

npm i @starling-tech/react-native-control-volume

Weekly Downloads

0

Version

0.1.4

License

ISC

Unpacked Size

290 kB

Total Files

47

Last publish

Collaborators

  • starling-tech